/* ============================================================
   TOKEZLY runtime UI, ported from the design spec, scoped to
   .tk-ui so it renders natively without touching site tokens.
   ============================================================ */
.tk-ui{
  --bg:#1b1b1b; --bg-grad:#202020;
  --surf-1:#272727; --surf-2:#2b2b2b; --surf-3:#323232; --surf-4:#3a3a3a;
  --line:rgba(255,255,255,.0698); --line-2:rgba(255,255,255,.10); --line-3:rgba(255,255,255,.14);
  --tx:#fff; --tx-2:rgba(255,255,255,.786); --tx-3:rgba(255,255,255,.544); --tx-4:rgba(255,255,255,.363);
  --acc:#2FE0A6; --acc-2:#6AF0C0; --acc-deep:#1BBF8E; --acc-dim:rgba(47,224,166,.14); --acc-dim-2:rgba(47,224,166,.30); --acc-glow:rgba(47,224,166,.40); --on-acc:#000;
  --ok:#6CCB5F; --caution:#FCE100; --err:#FF99A4; --info:#38B6F2;
  --rec:#FF99A4; --rec-dim:rgba(255,153,164,.16); --rec-glow:rgba(255,153,164,.45);
  --sans:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Code","Cascadia Mono",Consolas,"JetBrains Mono",ui-monospace,monospace;
  --r-win:8px; --r-md:4px; --r-sm:4px;
  font-family:var(--sans); color:var(--tx); line-height:1.5;

  /* ---------- Acrylic capsule ---------- */
  .cap{ display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:999px;
    font-family:var(--sans); font-size:13.5px; color:var(--tx); white-space:nowrap;
    background:rgba(43,43,43,.72); backdrop-filter:blur(50px) saturate(1.35); -webkit-backdrop-filter:blur(50px) saturate(1.35);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.30);
    position:relative; }
  .cap.tappable{ cursor:pointer; }
  .cap.idle .cap-ico{ width:22px; height:22px; color:var(--tx-2); display:grid; place-items:center; }
  .cap.idle .cap-ico svg{ width:18px; height:18px; }
  .cap-hint{ color:var(--tx-2); display:flex; align-items:center; gap:8px; }
  .cap .reddot{ width:9px; height:9px; border-radius:99px; background:var(--rec); flex:none; box-shadow:0 0 0 0 var(--rec-glow); animation:tkRecpulse 1.6s ease-out infinite; }
  .cap-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--rec); }
  .cap .timer{ font-family:var(--mono); font-size:11px; color:var(--tx-3); }
  .cap .wave{ flex:none; width:auto; }
  .cap .wave .b{ background:var(--rec); box-shadow:none; }
  .cap.toast .checkwrap{ width:20px; height:20px; border-radius:99px; background:var(--ok); color:#000; display:grid; place-items:center; flex:none; }
  .cap.toast .checkwrap svg{ width:13px; height:13px; }
  .cap.toast .toast-t{ color:var(--tx); font-weight:600; }
  .cap.toast .toast-sub{ font-family:var(--mono); font-size:11px; color:var(--tx-3); }

  /* ---------- Acrylic popup ---------- */
  .pop{ width:min(360px,100%); font-family:var(--sans); color:var(--tx);
    background:rgba(43,43,43,.74); backdrop-filter:blur(50px) saturate(1.35); -webkit-backdrop-filter:blur(50px) saturate(1.35);
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.40), 0 2px 10px rgba(0,0,0,.32);
    overflow:hidden; position:relative; }
  .pop .top-accent{ position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--acc) 50%,transparent); opacity:0; }
  .pop.accent .top-accent{ opacity:1; }
  .pop-head{ display:flex; align-items:center; gap:9px; padding:11px 14px 9px; }
  .pop-ttl{ font-size:13px; color:var(--tx); font-weight:600; }
  .pop-eng{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); }
  .pop-eng .dot{ width:6px; height:6px; border-radius:99px; background:var(--ok); }
  .pop-eng .dot.off{ background:var(--err); }
  .pop-body{ padding:0 14px 13px; }
  .pop .refine-raw{ margin-bottom:10px; }
  .pop .refine-out .codeblk{ font-size:12px; }

  .metaline{ display:flex; align-items:center; gap:8px; margin-top:11px; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); }
  .metaline .sp{ color:var(--tx-4); }
  .metaline .lat{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; }
  .metaline .lat b{ color:var(--acc-2); font-weight:500; }

  /* ---------- Command popup ---------- */
  .cmd{ width:min(380px,100%); font-family:var(--sans); color:var(--tx);
    background:rgba(43,43,43,.74); backdrop-filter:blur(50px) saturate(1.35); -webkit-backdrop-filter:blur(50px) saturate(1.35);
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.40), 0 2px 10px rgba(0,0,0,.32); overflow:hidden; }
  .cmd-field{ display:flex; align-items:center; gap:11px; height:54px; padding:0 14px; position:relative; }
  .cmd-field::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--acc); }
  .cmd-field .slash{ width:32px; height:32px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--acc-dim); border:1px solid var(--acc-dim-2); color:var(--acc); flex:none; }
  .cmd-field .slash svg{ width:17px; height:17px; }
  .cmd-input{ flex:1; min-width:0; }
  .cmd-lead{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--acc); margin-bottom:1px; }
  .cmd-val{ font-size:14.5px; color:var(--tx); }
  .cmd-val .ph{ color:var(--tx-4); }
  .cmd-list{ padding:5px 6px 8px; display:flex; flex-direction:column; gap:1px; }
  .cmd-list .ci{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md); cursor:pointer; font-size:13px; color:var(--tx); transition:.1s; }
  .cmd-list .ci:hover{ background:rgba(255,255,255,.06); }
  .cmd-list .ci .h{ color:var(--acc); font-family:var(--mono); width:12px; flex:none; }
  .cmd-list .ci-t{ flex:1; }
  .cmd-list .ci-tag{ font-family:var(--mono); font-size:9.5px; color:var(--tx-4); border:1px solid var(--line); border-radius:99px; padding:1px 7px; }

  /* ---------- waveform / transcript / spinner ---------- */
  .wave{ display:flex; align-items:center; gap:2px; height:24px; flex:1; min-width:0; }
  .wave .b{ width:2.5px; border-radius:2px; background:var(--rec); flex:none; transition:height .09s linear; }
  .wave .b.idle{ background:var(--tx-4); }
  .timer{ font-family:var(--mono); font-size:11px; color:var(--tx-3); flex:none; }
  .transcript{ font-family:var(--mono); font-size:13.5px; line-height:1.6; color:var(--tx); }
  .transcript .typed{ color:var(--tx); }
  .transcript .ghost{ color:var(--tx-4); }
  .caret{ display:inline-block; width:7px; height:15px; background:var(--acc); margin-left:1px; vertical-align:-2px; animation:tkBlink 1s steps(1) infinite; border-radius:1px; }
  .spinner{ width:14px; height:14px; flex:none; }
  .spinner circle{ stroke:var(--acc); }
  .spin-rot{ transform-origin:center; animation:tkSpin 0.9s linear infinite; }

  .refine-raw{ font-family:var(--mono); font-size:12px; color:var(--tx-4); line-height:1.5; margin-bottom:12px; padding-left:11px; border-left:2px solid var(--surf-4); }
  .refine-raw .rl{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4); display:block; margin-bottom:4px; }
  .refine-out{ font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--tx); padding-left:11px; border-left:2px solid var(--acc); }
  .refine-out .rl{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:5px; }
  .refine-out .codeblk{ background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; font-size:12.5px; }
  .tok-ins{ background:var(--acc-dim); border-radius:3px; padding:0 2px; }

  /* ---------- keycaps ---------- */
  .kbd{ font-family:var(--mono); font-size:11px; color:var(--tx-2); background:rgba(255,255,255,.0605);
    border:1px solid var(--line-2); border-bottom-color:rgba(0,0,0,.4);
    border-radius:var(--r-sm); padding:2px 6px; min-width:18px; display:inline-flex; justify-content:center; }
  .kbd.lg{ font-size:12.5px; padding:4px 8px; }
  .kdrow{ display:inline-flex; align-items:center; gap:5px; }
  .kdrow .plus{ color:var(--tx-4); font-size:11px; }

  /* ---------- Settings window ---------- */
  .win{ width:100%; max-width:560px; font-family:var(--sans); color:var(--tx);
    background:rgba(43,43,43,.72); backdrop-filter:blur(50px) saturate(1.35); -webkit-backdrop-filter:blur(50px) saturate(1.35);
    border:1px solid rgba(255,255,255,.08); border-radius:var(--r-win);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 32px rgba(0,0,0,.34), 0 2px 10px rgba(0,0,0,.30);
    overflow:hidden; position:relative; }
  .win.settings{ width:100%; max-width:680px; background:#202020; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .win-chrome{ display:flex; align-items:center; height:40px; padding:0 0 0 14px; border-bottom:1px solid var(--line); }
  .win-chrome .ttl{ font-size:12px; color:var(--tx-2); display:flex; align-items:center; gap:9px; }
  .win-chrome .ttl svg{ width:14px; height:14px; color:var(--tx-3); }
  .win-chrome .winbtns{ margin-left:auto; display:flex; }
  .win-chrome .wb{ width:46px; height:40px; display:grid; place-items:center; color:var(--tx-2); transition:.1s; cursor:default; }
  .win-chrome .wb:hover{ background:rgba(255,255,255,.06); }
  .win-chrome .wb.close:hover{ background:#C42B1C; color:#fff; }
  .win-chrome .wb svg{ width:11px; height:11px; }

  .settings-body{ display:grid; grid-template-columns:184px 1fr; min-height:382px; }
  .set-nav{ border-right:1px solid var(--line); padding:8px 6px; display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.02); }
  .set-nav a{ position:relative; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--tx-2); text-decoration:none; padding:9px 12px; border-radius:var(--r-md); transition:.1s; cursor:pointer; }
  .set-nav a svg{ width:16px; height:16px; flex:none; }
  .set-nav a:hover{ color:var(--tx); background:rgba(255,255,255,.06); }
  .set-nav a.on{ color:var(--tx); background:rgba(255,255,255,.06); }
  .set-nav a.on::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:16px; border-radius:3px; background:var(--acc); }
  .set-foot{ margin-top:auto; padding:10px 12px; font-family:var(--mono); font-size:10px; color:var(--tx-4); line-height:1.6; }

  .set-main{ padding:20px 20px 22px; overflow:auto; max-height:470px; }
  .set-main h4{ font-size:20px; font-weight:600; color:var(--tx); margin:0 0 4px; letter-spacing:-.01em; }
  .set-main .sd{ font-size:13px; color:var(--tx-3); margin:0 0 18px; line-height:1.5; }
  .set-group-lbl{ font-size:11px; letter-spacing:.02em; color:var(--tx-3); margin:0 0 9px; font-weight:600; }

  /* ---------- engine cards ---------- */
  .eng-card{ display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px 15px; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:6px; background:rgba(255,255,255,.0512); transition:.12s; cursor:pointer; }
  .eng-card:hover{ background:rgba(255,255,255,.07); }
  .eng-card.active{ border-color:var(--acc-dim-2); background:rgba(47,224,166,.07); }
  .eng-card .nm{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--tx); font-weight:600; }
  .eng-card .badge{ font-size:11px; letter-spacing:0; color:var(--on-acc); background:var(--acc); border-radius:99px; padding:1px 9px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
  .eng-card .badge.local{ color:var(--on-acc); background:var(--ok); }
  .eng-card .badge.cloud{ color:var(--on-acc); background:var(--info); }
  .eng-card .desc{ font-size:12.5px; color:var(--tx-3); margin-top:4px; line-height:1.4; }
  .eng-card .tags{ display:flex; gap:12px; margin-top:9px; font-family:var(--mono); font-size:10.5px; color:var(--tx-4); }
  .eng-card .tags span{ display:inline-flex; align-items:center; gap:5px; }
  .eng-card .tags svg{ width:12px; height:12px; }
  .eng-card .nm .rc{ width:16px; height:16px; border-radius:99px; border:1.5px solid var(--tx-3); position:relative; flex:none; }
  .eng-card .nm .rc.on{ border-color:var(--acc); }
  .eng-card .nm .rc.on::after{ content:""; position:absolute; inset:3px; border-radius:99px; background:var(--acc); }
  .eng-card.locked{ opacity:.5; }
  .lockico{ width:16px; height:16px; color:var(--tx-3); display:inline-flex; }
  .lockico svg{ width:15px; height:15px; }
  .eng-meta{ display:flex; flex-direction:column; gap:7px; justify-content:center; min-width:124px; }
  .meter{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9px; color:var(--tx-4); letter-spacing:.06em; text-transform:uppercase; }
  .meter .track{ flex:1; height:3px; border-radius:99px; background:rgba(255,255,255,.15); overflow:hidden; }
  .meter .fill{ height:100%; border-radius:99px; background:var(--acc); }
  .eng-card .dl{ display:flex; align-items:center; gap:6px; justify-content:flex-end; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); margin-top:2px; }
  .eng-card .dl svg{ width:12px; height:12px; }

  /* ---------- settings controls ---------- */
  .set-card{ display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.0512); margin-bottom:5px; }
  .set-card .ic{ width:20px; height:20px; color:var(--tx-2); flex:none; }
  .set-card .ic svg{ width:20px; height:20px; }
  .set-card .tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .set-card .tx .t{ font-size:13.5px; color:var(--tx); font-weight:600; display:block; }
  .set-card .tx .d{ font-size:12px; color:var(--tx-3); margin-top:2px; line-height:1.4; display:block; }
  .set-card .ctl{ flex:none; display:flex; align-items:center; }

  .expander{ border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.0512); margin-bottom:6px; overflow:hidden; }
  .expander .exp-head{ display:flex; align-items:center; gap:14px; padding:13px 15px; cursor:pointer; transition:.1s; }
  .expander .exp-head:hover{ background:rgba(255,255,255,.04); }
  .expander .exp-head .ic{ width:20px; height:20px; color:var(--tx-2); flex:none; }
  .expander .exp-head .ic svg{ width:20px; height:20px; }
  .expander .exp-head .tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .expander .exp-head .tx .t{ font-size:13.5px; color:var(--tx); font-weight:600; display:block; }
  .expander .exp-head .tx .d{ font-size:12px; color:var(--tx-3); margin-top:2px; display:block; }
  .expander .chev{ width:16px; height:16px; color:var(--tx-2); transition:transform .2s; flex:none; }
  .expander.open .chev{ transform:rotate(180deg); }
  .exp-badge{ font-family:var(--mono); font-size:10px; color:var(--tx-3); border:1px solid var(--line-2); border-radius:99px; padding:2px 8px; }
  .exp-body{ border-top:1px solid var(--line); background:rgba(0,0,0,.14); }
  .exp-body .erow{ display:flex; align-items:flex-start; gap:14px; padding:12px 15px 12px 49px; border-bottom:1px solid var(--line); }
  .exp-body .erow:last-child{ border-bottom:0; }
  .exp-body .erow .tx{ flex:1; min-width:0; padding-top:3px; display:flex; flex-direction:column; }
  .exp-body .erow .tx .t{ font-size:13px; color:var(--tx); font-weight:500; display:block; }
  .exp-body .erow .tx .d{ font-size:11.5px; color:var(--tx-3); margin-top:2px; line-height:1.4; display:block; }
  .exp-body .erow .ctl{ flex:none; display:flex; align-items:center; }

  .toggle{ width:40px; height:20px; border-radius:99px; border:1px solid var(--tx-2); background:transparent; position:relative; cursor:pointer; transition:.15s; flex:none; padding:0; }
  .toggle .knob{ position:absolute; top:50%; left:3px; transform:translateY(-50%); width:12px; height:12px; border-radius:99px; background:var(--tx-2); transition:.15s; }
  .toggle:hover .knob{ width:14px; height:14px; }
  .toggle.on{ background:var(--acc); border-color:var(--acc); }
  .toggle.on .knob{ left:auto; right:3px; background:#000; }

  .slider{ display:flex; align-items:center; gap:11px; min-width:158px; }
  .slider .strack{ flex:1; height:3px; border-radius:99px; background:rgba(255,255,255,.20); position:relative; cursor:pointer; }
  .slider .sfill{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--acc); }
  .slider .sthumb{ position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:99px; background:#fff; box-shadow:0 0 0 5px var(--acc), 0 1px 4px rgba(0,0,0,.5); }
  .slider .sval{ font-family:var(--mono); font-size:11.5px; color:var(--tx-2); width:30px; text-align:right; }

  .comboWrap{ position:relative; }
  .combo{ display:inline-flex; align-items:center; gap:10px; height:32px; padding:0 8px 0 11px; background:rgba(255,255,255,.0605); border:1px solid var(--line-2); border-bottom-color:rgba(0,0,0,.18); border-radius:var(--r-md); font-family:var(--sans); font-size:13px; color:var(--tx); cursor:pointer; min-width:150px; justify-content:space-between; }
  .combo:hover{ background:rgba(255,255,255,.0837); }
  .combo svg{ width:13px; height:13px; color:var(--tx-3); }
  .combo-pop{ position:absolute; right:0; top:36px; z-index:20; min-width:170px; background:#2c2c2c; border:1px solid var(--line-2); border-radius:var(--r-md); padding:3px; box-shadow:0 12px 28px rgba(0,0,0,.45); }
  .combo-pop .ci{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:var(--r-sm); font-size:13px; color:var(--tx); cursor:pointer; }
  .combo-pop .ci:hover{ background:rgba(255,255,255,.06); }
  .combo-pop .ci.on{ color:var(--acc-2); }
  .combo-pop .ci:not(.on) span{ margin-left:21px; }

  .numbox{ display:inline-flex; align-items:stretch; height:32px; background:rgba(255,255,255,.0605); border:1px solid var(--line-2); border-bottom-color:rgba(0,0,0,.18); border-radius:var(--r-md); overflow:hidden; }
  .numbox .nv{ display:flex; align-items:center; padding:0 11px; font-family:var(--mono); font-size:12.5px; color:var(--tx); }
  .numbox .spin{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
  .numbox .sb{ flex:1; width:26px; display:grid; place-items:center; color:var(--tx-2); background:transparent; border:0; cursor:pointer; padding:0; }
  .numbox .sb:first-child{ border-bottom:1px solid var(--line); }
  .numbox .sb:hover{ background:rgba(255,255,255,.07); color:var(--tx); }

  .textbox{ background:rgba(255,255,255,.0605); border:1px solid var(--line-2); border-bottom:2px solid var(--tx-3); border-radius:var(--r-md); padding:8px 11px; font-size:13px; color:var(--tx); min-width:170px; }
  .textbox.area{ font-family:var(--mono); font-size:11.5px; line-height:1.5; min-height:54px; white-space:normal; width:230px; color:var(--tx-2); border-bottom-color:var(--acc); }
  .textbox.mask{ font-family:var(--mono); letter-spacing:.04em; }

  .radios{ display:flex; gap:18px; align-items:center; }
  .radio{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; color:var(--tx-2); background:transparent; border:0; cursor:pointer; padding:0; }
  .radio .rc{ width:18px; height:18px; border-radius:99px; border:1.5px solid var(--tx-3); position:relative; }
  .radio.on{ color:var(--tx); }
  .radio.on .rc{ border-color:var(--acc); }
  .radio.on .rc::after{ content:""; position:absolute; inset:3px; border-radius:99px; background:var(--acc); }

  .ai-master{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--acc-dim-2); border-radius:var(--r-md); background:rgba(47,224,166,.07); margin-bottom:10px; }
  .ai-master .ic{ width:22px; height:22px; color:var(--acc); flex:none; }
  .ai-master .ic svg{ width:22px; height:22px; }
  .ai-master .tx{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .ai-master .tx .t{ font-size:14px; color:var(--tx); font-weight:600; }
  .ai-master .tx .d{ font-size:12px; color:var(--tx-3); margin-top:2px; line-height:1.4; }

  .fl-banner{ display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid rgba(108,203,95,.3); border-radius:var(--r-md); background:rgba(108,203,95,.08); margin-bottom:16px; }
  .fl-ico{ width:24px; height:24px; color:var(--ok); flex:none; }
  .fl-ico svg{ width:24px; height:24px; }
  .fl-tx{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .fl-tx b{ font-size:13.5px; color:var(--ok); font-weight:600; }
  .fl-tx span{ font-size:12px; color:var(--tx-2); margin-top:1px; line-height:1.4; }
  .fl-badge{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--ok); border:1px solid rgba(108,203,95,.35); border-radius:99px; padding:2px 8px; flex:none; }

  .cloud-gate{ position:relative; opacity:.5; pointer-events:none; padding-top:6px; }
  .cg-hint{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; color:var(--tx-3); margin-bottom:8px; }
  .cg-hint svg{ width:13px; height:13px; }
  .ssobtn{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--on-acc); background:var(--acc); border:0; border-radius:var(--r-md); padding:7px 14px; cursor:pointer; }
}

/* ---------- global keyframes (distinct names) ---------- */
@keyframes tkRecpulse{ 0%{ box-shadow:0 0 0 0 var(--rec-glow);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
@keyframes tkSpin{ to{ transform:rotate(360deg);} }
@keyframes tkBlink{ 50%{ opacity:0; } }