/* ─── uikit.css — the EX3D design language: one family of controls (slider · number · toggle · switch · segmented · select · button · section · row · tip).
 *
 *   Prototype (owner 2026-10-25): dev/ui-lab/ shows every control, lets you tweak the tokens live and copy them as JSON; js/uikit.js builds them
 *   (UIKit.slider / field / toggle / switch / seg / button / section / row / theme). When the look is agreed, panels.css maps its rows onto these
 *   and the app's native range / checkbox inputs are upgraded to them (UIKit.upgrade) — no per-panel restyling.
 *
 *   The grammar (all controls share it):
 *     capsule   --uk-h high, --uk-r radius, dark track, hairline border, label LEFT / value RIGHT, mono tabular numbers
 *     ghost     the accent as a translucent fill (--uk-ghost) with a bright leading edge: the value of a slider, the ON state of a toggle
 *     focus     while dragging the capsule grows by --uk-grow px top and bottom (no layout shift) and the ghost shimmers
 *     numbers   − / + zones at both ends (hold = repeat, Shift = ×10) · drag = change (Shift = fine) · double-tap / right-click / Enter = type
 *     touch     body.is-touch (or .uk-touch on a container) → 36 px
 *   Tokens (all overridable; UIKit.theme sets them):
 *     --uk-accent --uk-ghost (%) --uk-glow --uk-h --uk-r --uk-fs --uk-grow --uk-dur (ms) --uk-lab (% label column)
 * ───────────────────────────────────────────────────────────────────────────*/
:root{
  --uk-accent:var(--accent,#D6A461); --uk-ghost:26%; --uk-glow:.5;
  --uk-h:24px; --uk-r:5px; --uk-fs:11.5px; --uk-grow:5px; --uk-dur:1; --uk-lab:44%;
  --uk-fade:.6; --uk-rest:#8b949e;
  --uk-bg:var(--uk-field,var(--bg,#0B0D10)); --uk-menubg:var(--uk-menu,var(--panel,#13161A)); --uk-panel:var(--panel,#13161A); --uk-panel2:var(--panel2,#1A1E23); --uk-hover:var(--hover,#21262C);
  --uk-line:var(--line,#262B31); --uk-line2:var(--line2,#323841); --uk-ink:var(--ink,#E3E6E9); --uk-mut:var(--mut,#7C848E); --uk-dim:var(--dim,#565D66);
  --uk-ease:cubic-bezier(.2,.8,.2,1);
  --uk-sans:var(--sans,"IBM Plex Sans","Segoe UI",system-ui,sans-serif); --uk-mono:var(--mono,"IBM Plex Mono",Consolas,monospace);
  --uk-ms:calc(var(--uk-dur) * 1ms);
}
body.is-touch:not(.desk-ui),.uk-touch{--uk-h:36px;--uk-fs:13px;--uk-grow:4px;--uk-r:7px}
.uk-ghostfill{background:linear-gradient(90deg,color-mix(in srgb,var(--uk-accent) calc(var(--uk-ghost) * .3),transparent),color-mix(in srgb,var(--uk-accent) var(--uk-ghost),transparent))}

/* ── slider / number field ── */
.uk-slider{position:relative;display:block;height:var(--uk-h);min-width:0;font:400 var(--uk-fs)/1 var(--uk-sans);color:var(--uk-ink);outline:0;-webkit-user-select:none;user-select:none}
.uk-body{position:absolute;inset:0;display:flex;align-items:stretch;border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);
  transition:inset calc(160 * var(--uk-ms)) var(--uk-ease),border-color calc(120 * var(--uk-ms)),box-shadow calc(160 * var(--uk-ms))}
.uk-slider:hover .uk-body{border-color:var(--uk-line2)}
.uk-slider:focus-visible .uk-body{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-slider.drag{z-index:5}
.uk-slider.drag .uk-body{inset:calc(var(--uk-grow) * -1) -2px;border-color:color-mix(in srgb,var(--uk-accent) 70%,transparent);
  box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 calc(var(--uk-glow) * 22px) color-mix(in srgb,var(--uk-accent) 35%,transparent);background:#0a0c0f}
.uk-track{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 8px;overflow:hidden;cursor:ew-resize;touch-action:pan-y}
/* the fill: GREY and quiet at rest, the accent while hovered / focused / dragged; --uk-fade: 0 = a flat colour … 1 = a gradient from nearly clear to full */
@property --uk-fc{syntax:"<color>";inherits:true;initial-value:#8b949e}
.uk-slider{--uk-fc:var(--uk-rest);transition:--uk-fc calc(220 * var(--uk-ms)) var(--uk-ease)}
.uk-slider:hover,.uk-slider:focus-within,.uk-slider.drag{--uk-fc:var(--uk-accent)}
.uk-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--uk-fc) calc(var(--uk-ghost) * (1 - .85 * var(--uk-fade))),transparent),color-mix(in srgb,var(--uk-fc) var(--uk-ghost),transparent));
  transition:width calc(180 * var(--uk-ms)) var(--uk-ease)}
.uk-fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--uk-fc);box-shadow:0 0 calc(var(--uk-glow) * 12px) var(--uk-fc);opacity:.85}
.uk-slider:not(:hover):not(:focus-within):not(.drag) .uk-fill::after{box-shadow:none;opacity:.55}
.uk-slider.drag .uk-fill{transition:none;background-size:200% 100%;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--uk-fc) calc(var(--uk-ghost) * (1 - .85 * var(--uk-fade))),transparent),color-mix(in srgb,var(--uk-fc) calc(var(--uk-ghost) * 1.5),transparent),color-mix(in srgb,var(--uk-fc) calc(var(--uk-ghost) * (1 - .85 * var(--uk-fade))),transparent));
  animation:uk-sheen 1.1s linear infinite}
@keyframes uk-sheen{to{background-position:-200% 0}}
.uk-numf .uk-fill{display:none}
.uk-lab{position:relative;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--uk-mut);pointer-events:none;transition:color .15s}
.uk-val{position:relative;flex:none;font:500 calc(var(--uk-fs) - .5px) var(--uk-mono);font-variant-numeric:tabular-nums;color:var(--uk-ink);pointer-events:none}
.uk-val i{font-style:normal;color:var(--uk-dim);margin-left:2px}
.uk-slider.drag .uk-lab{color:var(--uk-ink)}
.uk-slider.drag .uk-val{color:var(--uk-accent)}
.uk-step{flex:none;width:calc(var(--uk-h) - 2px);border:0;padding:0;background:transparent;color:var(--uk-dim);font:400 calc(var(--uk-fs) + 3px)/1 var(--uk-sans);cursor:pointer;display:grid;place-items:center;
  transition:background .12s,color .12s}
.uk-step:first-of-type{border-right:1px solid var(--uk-line);border-radius:calc(var(--uk-r) - 1px) 0 0 calc(var(--uk-r) - 1px)}
.uk-step:last-of-type{border-left:1px solid var(--uk-line);border-radius:0 calc(var(--uk-r) - 1px) calc(var(--uk-r) - 1px) 0}
.uk-step:hover{background:var(--uk-hover);color:var(--uk-ink)}
.uk-step:active{background:color-mix(in srgb,var(--uk-accent) 22%,transparent);color:var(--uk-accent)}
.uk-slider.drag .uk-step{opacity:.35}
.uk-slider,.uk-slider *,.uk-nw,.uk-nw *,.uk-sl,.uk-sl *,.uk-seg,.uk-seg *,.uk-toggle,.uk-switch,.uk-color,.uk-color *{box-sizing:border-box}
.uk-in{position:absolute;inset:0 calc(var(--uk-h) - 2px);z-index:3;width:calc(100% - 2 * (var(--uk-h) - 2px));max-width:calc(100% - 2 * (var(--uk-h) - 2px));min-width:0;height:100%;margin:0;border:0;outline:0;padding:0 8px;background:var(--uk-bg);color:var(--uk-ink);
  font:500 var(--uk-fs) var(--uk-mono);text-align:right;border-radius:0}
.uk-slider.typing .uk-in{display:block}
.uk-in[hidden]{display:none}
/* the − / + zones stay out of the way until the control is hovered, focused or touched */
.uk-slider:not(:hover):not(:focus-within):not(.drag) .uk-step{color:transparent}
body.is-touch:not(.desk-ui) .uk-slider .uk-step,.uk-touch .uk-slider .uk-step{color:var(--uk-dim)}
.uk-slider[aria-disabled=true]{opacity:.4;pointer-events:none}

/* ── toggle (bar) and switch (compact): the same ghost, sweeping in ── */
.uk-toggle{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:var(--uk-h);padding:0 8px;border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);
  color:var(--uk-mut);font:400 var(--uk-fs)/1 var(--uk-sans);text-align:left;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;
  transition:border-color calc(140 * var(--uk-ms)),color calc(140 * var(--uk-ms))}
.uk-toggle:hover{border-color:var(--uk-line2)}
.uk-toggle:focus-visible{outline:0;border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-toggle .uk-fill{width:100%;transform:scaleX(0);transform-origin:left;transition:transform calc(320 * var(--uk-ms)) var(--uk-ease)}
.uk-toggle .uk-fill::after{opacity:0;transition:opacity calc(200 * var(--uk-ms)) calc(160 * var(--uk-ms))}
.uk-toggle.on .uk-fill{transform:scaleX(1)}
.uk-toggle.on .uk-fill::after{opacity:.9}
.uk-toggle.on{color:var(--uk-ink);border-color:color-mix(in srgb,var(--uk-accent) 45%,var(--uk-line))}
.uk-toggle .uk-lab{color:inherit}
.uk-led{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--uk-line2);transition:background calc(200 * var(--uk-ms)),box-shadow calc(300 * var(--uk-ms)),transform calc(300 * var(--uk-ms)) var(--uk-ease)}
.uk-toggle.on .uk-led{background:var(--uk-accent);box-shadow:0 0 calc(var(--uk-glow) * 10px) var(--uk-accent);transform:scale(1.15)}
.uk-toggle:active .uk-led{transform:scale(.8)}
/* switch: for a row that has its own label — a small capsule with the ghost and a knob */
.uk-switch{position:relative;flex:none;width:calc(var(--uk-h) * 1.5);height:var(--uk-h);padding:0;border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);cursor:pointer;overflow:hidden;
  transition:border-color calc(140 * var(--uk-ms))}
.uk-switch:hover{border-color:var(--uk-line2)}
.uk-switch .uk-fill{width:100%;transform:scaleX(0);transform-origin:left;transition:transform calc(320 * var(--uk-ms)) var(--uk-ease)}
.uk-switch .uk-fill::after{display:none}
.uk-switch::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(var(--uk-h) - 10px);border-radius:calc(var(--uk-r) - 2px);background:var(--uk-mut);
  transition:transform calc(320 * var(--uk-ms)) cubic-bezier(.3,1.6,.5,1),background calc(200 * var(--uk-ms)),width calc(120 * var(--uk-ms))}
.uk-switch.on{border-color:color-mix(in srgb,var(--uk-accent) 55%,var(--uk-line))}
.uk-switch.on .uk-fill{transform:scaleX(1)}
.uk-switch.on::after{transform:translateX(calc(var(--uk-h) * .5 + 4px));background:var(--uk-accent);box-shadow:0 0 calc(var(--uk-glow) * 8px) var(--uk-accent)}
.uk-switch:focus-visible{outline:0;box-shadow:0 0 0 1px var(--uk-accent)}
.uk-switch:active::after{width:calc(var(--uk-h) - 4px)}
.uk-switch.on:active::after{transform:translateX(calc(var(--uk-h) * .5 - 2px))}

/* ── segmented: the ghost slides to the chosen option ── */
.uk-seg{position:relative;display:flex;height:var(--uk-h);border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);overflow:hidden;font:400 var(--uk-fs)/1 var(--uk-sans)}
.uk-ind{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--uk-accent) calc(var(--uk-ghost) * .6),transparent),color-mix(in srgb,var(--uk-accent) var(--uk-ghost),transparent));
  box-shadow:inset 0 -2px 0 var(--uk-accent);transition:transform calc(260 * var(--uk-ms)) var(--uk-ease),width calc(260 * var(--uk-ms)) var(--uk-ease)}
.uk-seg button{position:relative;flex:1 1 0;min-width:0;border:0;background:none;color:var(--uk-mut);font:inherit;padding:0 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.uk-seg button:hover{color:var(--uk-ink);background:color-mix(in srgb,var(--uk-hover) 60%,transparent)}
.uk-seg button.on{color:var(--uk-ink)}
.uk-seg button+button{border-left:1px solid var(--uk-line)}
.uk-seg button:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--uk-accent)}

/* ── select, text, button, colour ── */
.uk-select,.uk-text{width:100%;height:var(--uk-h);min-width:0;padding:0 8px;border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);color:var(--uk-ink);font:400 var(--uk-fs) var(--uk-sans);outline:0;
  transition:border-color .12s}
.uk-select:hover,.uk-text:hover{border-color:var(--uk-line2)}
.uk-select:focus-visible,.uk-text:focus{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-select{appearance:none;-webkit-appearance:none;padding-right:22px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--uk-mut) 50%),linear-gradient(135deg,var(--uk-mut) 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px;background-repeat:no-repeat}
.uk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--uk-h);padding:0 10px;border-radius:var(--uk-r);background:var(--uk-panel2);border:1px solid var(--uk-line);
  color:var(--uk-ink);font:400 var(--uk-fs)/1 var(--uk-sans);cursor:pointer;white-space:nowrap;outline:0;
  transition:background .12s,border-color .12s,transform calc(120 * var(--uk-ms)) var(--uk-ease)}
.uk-btn:hover{background:var(--uk-hover);border-color:var(--uk-line2)}
.uk-btn:active{transform:scale(.97)}
.uk-btn:focus-visible{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-btn .uk-ic{font-style:normal;opacity:.8;font-size:calc(var(--uk-fs) + 1px);line-height:1}
.uk-btn.primary{background:var(--uk-accent);border-color:var(--uk-accent);color:var(--on-accent,#1B1408);font-weight:600}
.uk-btn.primary:hover{filter:brightness(1.08)}
.uk-btn.ghost{background:color-mix(in srgb,var(--uk-accent) calc(var(--uk-ghost) * .6),transparent);border-color:color-mix(in srgb,var(--uk-accent) 40%,var(--uk-line));color:var(--uk-accent)}
.uk-btn.flat{background:transparent;border-color:transparent;color:var(--uk-mut)}
.uk-btn.flat:hover{background:var(--uk-hover);color:var(--uk-ink)}
.uk-btnrow{display:flex;flex-wrap:wrap;gap:3px}.uk-btnrow>.uk-btn{flex:1 1 auto}
.uk-color{position:relative;display:flex;align-items:center;gap:6px;height:var(--uk-h);padding:0 3px 0 8px;border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);color:var(--uk-mut);font:400 var(--uk-fs) var(--uk-sans)}
.uk-color:hover{border-color:var(--uk-line2)}.uk-color:focus-within{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-color .uk-lab{flex:1}
.uk-hex{flex:none;width:calc(7ch + 12px);height:calc(var(--uk-h) - 6px);padding:0 4px;border:0;border-radius:3px;background:transparent;color:var(--uk-ink);font:500 calc(var(--uk-fs) - .5px) var(--uk-mono);text-align:right;text-transform:uppercase;outline:0}
.uk-hex:focus{background:#0a0c0f;box-shadow:inset 0 0 0 1px var(--uk-line2)}
.uk-pick{position:relative;flex:none;display:block;width:calc(var(--uk-h) * 1.3);height:calc(var(--uk-h) - 8px);cursor:pointer}
.uk-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uk-color .uk-sw{display:block;width:100%;height:100%;border-radius:3px;border:1px solid rgba(255,255,255,.18);box-sizing:border-box}

/* ── structure: section (animated fold), row, vector ── */
.uk-sec{border-radius:var(--uk-r)}
.uk-sec>.uk-sec-h{display:flex;align-items:center;gap:6px;width:100%;height:calc(var(--uk-h) + 2px);padding:0 6px;border:0;border-radius:var(--uk-r);background:color-mix(in srgb,var(--uk-panel2) 78%,transparent);
  color:var(--uk-ink);font:600 11px var(--uk-sans);cursor:pointer;text-align:left;outline:0;transition:background .12s}
.uk-sec>.uk-sec-h:hover{background:var(--uk-hover)}
.uk-sec>.uk-sec-h:focus-visible{box-shadow:inset 0 0 0 1px var(--uk-accent)}
.uk-sec-h .uk-chev{flex:none;width:10px;font-size:9px;color:var(--uk-dim);transition:transform calc(220 * var(--uk-ms)) var(--uk-ease)}
.uk-sec:not(.open)>.uk-sec-h .uk-chev{transform:rotate(-90deg)}
.uk-sec-h .uk-x{margin-left:auto;display:flex;font:400 10px var(--uk-mono);color:var(--uk-dim)}
.uk-sec-h .uk-x .uk-seg{height:calc(var(--uk-h) - 6px);font-size:10.5px}.uk-sec-h .uk-x .uk-seg button{flex:none;padding:0 8px}
.uk-sec-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows calc(240 * var(--uk-ms)) var(--uk-ease)}
.uk-sec.open>.uk-sec-b{grid-template-rows:1fr}
.uk-sec-b>div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:0 0}
.uk-sec.open>.uk-sec-b>div{padding:4px 0 6px}
.uk-row{display:grid;grid-template-columns:minmax(0,var(--uk-lab)) minmax(0,1fr);align-items:center;column-gap:8px;min-height:var(--uk-h);font:400 var(--uk-fs)/1.2 var(--uk-sans);color:var(--uk-mut)}
.uk-row>.uk-rl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-row>.uk-rc{min-width:0;display:flex;align-items:center;gap:4px}
.uk-row>.uk-rc>*{min-width:0}
.uk-row.full{grid-template-columns:1fr}
.uk-vec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:100%}
.uk-vec .uk-slider:nth-child(1) .uk-body{box-shadow:inset 2px 0 0 #e5484d}.uk-vec .uk-slider:nth-child(2) .uk-body{box-shadow:inset 2px 0 0 #4cc38a}.uk-vec .uk-slider:nth-child(3) .uk-body{box-shadow:inset 2px 0 0 #3e8bff}
.uk-vec .uk-step{display:none}.uk-vec .uk-track{padding:0 6px}.uk-vec .uk-lab{flex:none}
.uk-vec .uk-slider.drag .uk-body{box-shadow:0 6px 22px rgba(0,0,0,.5)}
.uk-panel{background:var(--uk-panel);border:1px solid var(--uk-line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;width:300px;max-width:100%;box-sizing:border-box}

/* ── tooltip (js/tips.js): wrapped, never cropped ── */
.uk-tip{position:fixed;z-index:100000;left:0;top:0;max-width:min(260px,calc(100vw - 16px));padding:6px 9px;border-radius:6px;background:#050607;border:1px solid var(--line2,#323841);color:#cfd4da;
  font:400 11.5px/1.4 var(--sans,system-ui,sans-serif);box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .14s,transform .14s;white-space:normal;overflow-wrap:anywhere}
.uk-tip.on{opacity:1;transform:none}
/* ── upgrade (UIKit.upgrade): the app's native fields take the design language ── */
.uk-gone{display:none!important}
.uk-slider.uk-up-r,.uk-slider.uk-scrub{flex:1 1 auto;width:100%}
/* number field: − [value] + round the native input (code that reads or listens to the input keeps working) */
.uk-nw{position:relative;display:flex;align-items:stretch;flex:1 1 auto;width:100%;min-width:0;height:var(--uk-h);border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);container-type:inline-size;box-sizing:border-box;
  transition:border-color calc(120 * var(--uk-ms)),box-shadow calc(160 * var(--uk-ms))}
.uk-nw:hover{border-color:var(--uk-line2)}
.uk-nw:focus-within{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-nw>input{flex:1 1 0;min-width:0;width:auto!important;height:auto!important;margin:0;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0;
  text-align:center!important;font:500 calc(var(--uk-fs) - .5px) var(--uk-mono)!important;color:var(--uk-ink);-moz-appearance:textfield;appearance:textfield;cursor:ew-resize}
.uk-nw>input:focus{cursor:text}
.uk-nw>input::-webkit-inner-spin-button,.uk-nw>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.uk-nw>input:disabled{opacity:.4}
.uk-nw:has(>input:disabled){opacity:.5}
.uk-nw:has(>.ax-x){box-shadow:inset 2px 0 0 #e5484d}.uk-nw:has(>.ax-y){box-shadow:inset 2px 0 0 #4cc38a}.uk-nw:has(>.ax-z){box-shadow:inset 2px 0 0 #3e8bff}
.uk-nw:not(:hover):not(:focus-within) .uk-step{color:transparent}
body.is-touch:not(.desk-ui) .uk-nw .uk-step{color:var(--uk-dim)}
@container (max-width:104px){.uk-nw .uk-step{width:15px;font-size:12px}}
/* a native checkbox = a switch with the ghost sweeping in (rows, check lists, panels) */
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]){appearance:none;-webkit-appearance:none;position:relative;flex:none;width:calc(var(--uk-h) * 1.5);height:calc(var(--uk-h) - 2px);min-width:0;margin:0;padding:0;
  border-radius:var(--uk-r);border:1px solid var(--uk-line);cursor:pointer;
  background:linear-gradient(90deg,color-mix(in srgb,var(--uk-accent) calc(var(--uk-ghost) * .3),transparent),color-mix(in srgb,var(--uk-accent) var(--uk-ghost),transparent)) no-repeat left center / 0% 100%,var(--uk-bg);
  transition:background-size calc(320 * var(--uk-ms)) var(--uk-ease),border-color calc(140 * var(--uk-ms))}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]):hover{border-color:var(--uk-line2)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk])::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(var(--uk-h) - 10px);border-radius:calc(var(--uk-r) - 2px);background:var(--uk-mut);
  transition:transform calc(320 * var(--uk-ms)) cubic-bezier(.3,1.6,.5,1),background calc(200 * var(--uk-ms))}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]):checked{background-size:100% 100%,auto;border-color:color-mix(in srgb,var(--uk-accent) 55%,var(--uk-line))}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]):checked::after{transform:translateX(calc(var(--uk-h) * .5 + 4px));background:var(--uk-accent);box-shadow:0 0 calc(var(--uk-glow) * 8px) var(--uk-accent)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]):focus-visible{outline:0;border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) input[type=checkbox]:not(.tf-snap):not([data-nouk]):disabled{opacity:.4;cursor:default}
/* a labelled checkbox = the TOGGLE capsule (same grammar as the slider: name inside, ghost sweeping in, a lit dot); the native input stays, invisible, over it */
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk])){position:relative;display:flex!important;align-items:center;gap:8px;grid-template-columns:none!important;width:100%;min-width:0;height:var(--uk-h);min-height:var(--uk-h);padding:0 8px!important;box-sizing:border-box;
  border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);color:var(--uk-mut);font:400 var(--uk-fs)/1 var(--uk-sans);cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;
  transition:border-color calc(140 * var(--uk-ms)),color calc(140 * var(--uk-ms))}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk])):hover{border-color:var(--uk-line2)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]))::before{content:"";position:absolute;inset:0;pointer-events:none;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,color-mix(in srgb,var(--uk-accent) calc(var(--uk-ghost) * .3),transparent),color-mix(in srgb,var(--uk-accent) var(--uk-ghost),transparent));box-shadow:inset -2px 0 0 var(--uk-accent);
  transition:transform calc(320 * var(--uk-ms)) var(--uk-ease)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]):checked)::before{transform:scaleX(1)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]))::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--uk-line2);pointer-events:none;
  transition:background calc(200 * var(--uk-ms)),box-shadow calc(300 * var(--uk-ms)),transform calc(300 * var(--uk-ms)) var(--uk-ease)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]):checked){color:var(--uk-ink);border-color:color-mix(in srgb,var(--uk-accent) 45%,var(--uk-line))}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]):checked)::after{background:var(--uk-accent);box-shadow:0 0 calc(var(--uk-glow) * 10px) var(--uk-accent);transform:scale(1.15)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]):focus-visible){border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk]):disabled){opacity:.45;cursor:default}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk])) > input[type=checkbox]{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0;opacity:0;border:0;background:none;cursor:pointer;z-index:2}
body.uk-up :is(.left,.right,.sel3d,.site-pop,.lens-pop) label:has(>input[type=checkbox]:not(.tf-snap):not([data-nouk])) > :is(span,b){position:relative;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;order:0}
body.is-touch:not(.desk-ui) .left label:has(>input[type=checkbox]),body.is-touch:not(.desk-ui) .right label:has(>input[type=checkbox]){min-height:36px}
body.uk-up .st-docked .sp-chk,body.uk-up .st-docked.site-pop>.sp-chk{flex:0 0 100%!important}   /* toggles: one per line, the name never cut in half */
.uk-toggle,.uk-switch,.uk-seg{--uk-fc:var(--uk-accent)}
/* a long name takes a second line (the capsule grows to two rows) instead of ending in "…" */
.uk-slider.two,.uk-nw.two,.uk-sl.two,body.uk-up label:has(>input[type=checkbox]).two{height:calc(var(--uk-h) * 1.6)!important;min-height:calc(var(--uk-h) * 1.6)!important}
.uk-slider.two .uk-lab,.uk-nw.two .uk-lab,.uk-sl.two .uk-lab,body.uk-up label.two>:is(span,b){white-space:normal!important;line-height:1.12;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:clip}
/* the dropdown capsule: an arrow says so; dragging it sideways cycles the options */
.uk-sl{cursor:ew-resize;touch-action:pan-y}
.uk-sl::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;margin-top:-4px;border-right:1.5px solid var(--uk-mut);border-bottom:1.5px solid var(--uk-mut);transform:rotate(45deg);pointer-events:none;transition:border-color .15s,transform .15s}
.uk-sl:hover::after,.uk-sl.drag::after{border-color:var(--uk-accent)}
.uk-sl>select{background-image:none!important;padding-right:24px!important;pointer-events:none}
.uk-sl.drag{border-color:color-mix(in srgb,var(--uk-accent) 70%,transparent);box-shadow:0 0 calc(var(--uk-glow) * 14px) color-mix(in srgb,var(--uk-accent) 30%,transparent)}
.uk-menu{position:fixed;z-index:100001;overflow:auto;padding:3px;border-radius:calc(var(--uk-r) + 1px);background:var(--uk-menubg);border:1px solid var(--uk-line2);box-shadow:0 14px 40px rgba(0,0,0,.55);font:400 var(--uk-fs)/1.2 var(--uk-sans);color:var(--uk-ink);-webkit-user-select:none;user-select:none;animation:uk-pop calc(140 * var(--uk-ms)) var(--uk-ease)}
@keyframes uk-pop{from{opacity:0;transform:translateY(-4px)}}
.uk-mi{display:flex;align-items:center;min-height:var(--uk-h);padding:3px 8px;border-radius:calc(var(--uk-r) - 1px);cursor:pointer;white-space:normal}
.uk-mi.hot{background:var(--uk-hover)}
.uk-mi.on{color:var(--uk-accent);background:color-mix(in srgb,var(--uk-accent) 14%,transparent)}
.uk-mi.on.hot{background:color-mix(in srgb,var(--uk-accent) 24%,transparent)}
.uk-mi.off{color:var(--uk-dim);cursor:default}
/* the "modified — reset" mark of a row: a small ↺ inside the control, after its − zone; the control keeps the full width */
.uk-solo{position:relative}
.uk-solo>.rp-reset{position:absolute;left:calc(var(--uk-h) - 1px);top:50%;transform:translateY(-50%);z-index:4;width:calc(var(--uk-h) - 8px);height:calc(var(--uk-h) - 8px);min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:var(--uk-r);background:transparent;color:var(--uk-accent);font-size:12px;line-height:1;cursor:pointer}
.uk-solo>.rp-reset[hidden]{display:none}
.uk-solo:has(>.rp-reset:not([hidden])) .uk-lab{padding-left:calc(var(--uk-h) - 8px)}
.uk-solo:has(>.uk-sl)>.rp-reset{left:3px}
.uk-solo:has(>.uk-sl):has(>.rp-reset:not([hidden])) .uk-lab{padding-left:calc(var(--uk-h) - 6px)}
.uk-solo:has(>.rp-reset){grid-template-columns:minmax(0,1fr)!important}
/* a row whose label moved inside its control */
.uk-solo{grid-template-columns:minmax(0,1fr)!important}
.uk-nw .uk-lab,.uk-sl .uk-lab{display:flex;align-items:center;flex:1;min-width:0;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--uk-mut);pointer-events:none;font-size:var(--uk-fs)}
.uk-nw.lab>input{flex:0 0 46%!important;text-align:right!important;padding-right:6px!important}
.uk-nw.lab:not(:hover):not(:focus-within) .uk-step{color:transparent}
.uk-sl{position:relative;display:flex;align-items:stretch;flex:1 1 auto;width:100%;min-width:0;height:var(--uk-h);border-radius:var(--uk-r);background:var(--uk-bg);border:1px solid var(--uk-line);box-sizing:border-box;transition:border-color .12s}
.uk-sl:hover{border-color:var(--uk-line2)}.uk-sl:focus-within{border-color:var(--uk-accent);box-shadow:0 0 0 1px var(--uk-accent)}
.uk-sl>select{flex:1 1 0;min-width:0;width:auto!important;height:auto!important;margin:0;border:0!important;background-color:transparent!important;box-shadow:none!important;border-radius:0!important;color:var(--uk-ink);text-align:right;text-align-last:right;padding:0 22px 0 4px!important;cursor:pointer;outline:0}
.uk-sl:not(.lab)>select{text-align:left;text-align-last:left;padding-left:8px!important}
@media (prefers-reduced-motion:reduce){.uk-fill,.uk-body,.uk-ind,.uk-sec-b,.uk-switch::after,.uk-led{transition-duration:1ms!important;animation:none!important}}