body.td-panel-open { overflow: hidden; }

.td-remote {
  --remote-size: 3rem;
  --remote-transition: 1000ms;
  --remote-accent: #024d62;
  --remote-surface: #111111;
  --remote-foreground: #ffffff;
  position: fixed;
  right: max(clamp(.75rem, 2.4vw, 1.8rem), env(safe-area-inset-right));
  bottom: max(clamp(.75rem, 2.4vw, 1.8rem), env(safe-area-inset-bottom));
  z-index: 110;
  display: grid;
  width: calc(var(--remote-size) + .56rem);
  min-height: calc(var(--remote-size) + .56rem);
  overflow: hidden;
  padding: .28rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(17,17,17,.97);
  box-shadow: 0 14px 38px rgba(0,0,0,.48);
  isolation: isolate;
  transition: box-shadow .28s ease;
}
.td-remote::before {
  position: absolute;
  inset: -45%;
  z-index: -2;
  content: "";
  background: conic-gradient(from 30deg, transparent 0 24%, #00fa00 31%, #024d62 39%, #43a6d8 46%, transparent 54% 100%);
  animation: td-remote-filament 9s linear infinite;
}
.td-remote::after {
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--remote-surface);
  content: "";
}
.td-remote-filament {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}
.td-remote-tools {
  display: grid;
  grid-template-rows: repeat(4, var(--remote-size));
  max-height: calc(var(--remote-size) * 4);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition: max-height var(--remote-transition) cubic-bezier(.2,.78,.2,1), opacity calc(var(--remote-transition) * .42) ease, transform var(--remote-transition) cubic-bezier(.2,.78,.2,1);
}
.td-remote .td-remote-command,
.td-remote .td-remote-compact,
.td-remote .td-remote-signature {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--remote-size);
  height: var(--remote-size);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--remote-foreground);
  cursor: pointer;
}
.td-remote .td-remote-command,
.td-remote .td-remote-compact {
  transition: background .18s ease, color .18s ease, opacity calc(var(--remote-transition) * .35) ease, transform calc(var(--remote-transition) * .55) cubic-bezier(.2,.78,.2,1);
}
.td-remote-command + .td-remote-command::before {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 1px;
  background: rgba(255,255,255,.12);
  content: "";
  transition: opacity calc(var(--remote-transition) * .28) ease;
}
.td-remote .td-remote-command:hover,
.td-remote .td-remote-command:focus-visible,
.td-remote .td-remote-compact:hover,
.td-remote .td-remote-compact:focus-visible,
.td-remote .td-remote-signature:hover,
.td-remote .td-remote-signature:focus-visible {
  outline: 0;
  background: #024d62;
  color: #ffffff;
}
.td-remote svg,
.td-panel svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.td-remote .td-remote-compact {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: calc(var(--remote-size) + 1px);
  height: calc(var(--remote-size) + 1px);
  opacity: 0;
  transform: translate(calc(-50% + .5px), calc(-50% + .5px)) scale(.62);
  pointer-events: none;
}
.td-remote-compact img {
  display: block;
  width: 1.46rem;
  height: 1.7rem;
  object-fit: contain;
}
.td-remote .td-remote-signature {
  z-index: 3;
  height: 44px;
  max-height: 44px;
  overflow: hidden;
  opacity: .82;
  transition: max-height calc(var(--remote-transition) * .35) ease, opacity calc(var(--remote-transition) * .3) ease, background .18s ease;
}
.td-remote-signature img { width: .78rem; height: .9rem; object-fit: contain; }
.td-remote[data-state="collapsing"] .td-remote-tools,
.td-remote[data-state="collapsed"] .td-remote-tools {
  max-height: 0;
  opacity: 0;
  transform: translateY(2.8rem) scale(.7);
  pointer-events: none;
}
.td-remote[data-state="collapsing"] .td-remote-command:nth-child(1) { transform: translateY(8.4rem) scale(.65); }
.td-remote[data-state="collapsing"] .td-remote-command:nth-child(2) { transform: translateY(5.6rem) scale(.65); }
.td-remote[data-state="collapsing"] .td-remote-command:nth-child(3) { transform: translateY(2.8rem) scale(.65); }
.td-remote[data-state="collapsing"] .td-remote-command::before,
.td-remote[data-state="collapsed"] .td-remote-command::before { opacity: 0; }
.td-remote[data-state="collapsing"] .td-remote-compact,
.td-remote[data-state="collapsed"] .td-remote-compact {
  opacity: 1;
  transform: translate(calc(-50% + .5px), calc(-50% + .5px)) scale(1);
  pointer-events: auto;
}
.td-remote[data-state="collapsed"] .td-remote-signature,
.td-remote[data-state="collapsing"] .td-remote-signature { max-height: 0; opacity: 0; }
.td-remote[data-state="collapsed"] { box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 18px rgba(0,250,0,.12); }
.td-remote-command:disabled { opacity: .34; cursor: default; }
.td-remote-command-top.is-activated svg { animation: td-top-pulse .42s ease; }
.td-remote-command-consent.is-activated svg { animation: td-consent-turn .46s ease; }
.td-remote-command-search:active svg { transform: scale(1.14); }
.td-remote-command-share:active svg { animation: td-share-pulse .4s ease; }

.td-panel[hidden] { display: none; }
.td-panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.td-panel-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(5px);
}
.td-panel-card {
  position: relative;
  width: min(42rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1rem,3vw,1.5rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.2rem;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 32px 90px rgba(0,0,0,.7);
}
.td-share .td-panel-card { width: min(31rem, 100%); }
.td-panel-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.td-panel-card header p { margin: 0; color: #00fa00; font-size: .68rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.td-panel-card h2 { margin: .25rem 0 0; color: #ffffff; font-size: clamp(1.35rem,4vw,1.8rem); font-weight: 850; }
.td-panel-close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .65rem;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.td-panel-close:hover,
.td-panel-close:focus-visible,
.td-panel button:focus-visible,
.td-panel a:focus-visible,
.td-panel input:focus-visible { outline: 2px solid #00fa00; outline-offset: 2px; }
.td-panel-intro { margin-top: .75rem; color: #c9d2d5; font-size: .88rem; line-height: 1.55; }
.td-share-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: 1rem; }
.td-share-grid button {
  display: grid;
  grid-template-columns: 2.15rem 1fr;
  grid-template-rows: auto auto;
  column-gap: .65rem;
  align-items: center;
  min-height: 4rem;
  padding: .6rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .72rem;
  background: #1b1b1b;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: .18s;
}
.td-share-grid button:hover { border-color: #024d62; background: #17272c; }
.td-share-grid button[hidden] { display: none; }
.td-share-grid button > span { grid-row: 1/3; display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .55rem; background: #024d62; color: #fff; font-size: .82rem; font-weight: 850; }
.td-share-grid strong { align-self: end; color: #ffffff; font-size: .78rem; }
.td-share-grid small { align-self: start; color: #aebcc1; font-size: .62rem; }
.td-panel-status { min-height: 1.2rem; margin: .7rem .1rem 0; color: #00fa00; font-size: .7rem; font-weight: 750; }
.td-search-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; margin-top: 1.2rem; padding: 0 .8rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: #ffffff; }
.td-search-field:focus-within { border-color: #024d62; box-shadow: 0 0 0 3px rgba(2,77,98,.28); }
.td-search-field input { min-width: 0; height: 3.2rem; border: 0; outline: 0; background: transparent; color: #ffffff; font-size: 1rem; }
.td-search-field kbd { border: 1px solid rgba(255,255,255,.14); border-radius: .35rem; background: #1b1b1b; padding: .18rem .4rem; color: #ffffff; font-size: .62rem; }
.td-search-status { margin: .9rem .15rem .45rem; color: #aebcc1; font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.td-search-results { display: grid; gap: .35rem; }
.td-search-results a { position: relative; display: grid; gap: .16rem; padding: .72rem 2.7rem .72rem .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: .72rem; background: #1b1b1b; color: #ffffff; text-decoration: none; transition: .18s; }
.td-search-results a:hover,
.td-search-results a:focus-visible { border-color: #024d62; background: #17272c; }
.td-search-results a > span { color: #00fa00; font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.td-search-results strong { color: #ffffff; font-size: .88rem; }
.td-search-results small { overflow: hidden; color: #aebcc1; font-size: .72rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.td-search-results a > svg { position: absolute; top: 50%; right: .9rem; width: 1rem; height: 1rem; transform: translateY(-50%); }
.td-search-empty { border-left: 2px solid #024d62; padding: .8rem; color: #c9d2d5; font-size: .82rem; }
.td-search-note { margin-top: .8rem; color: #aebcc1; font-size: .65rem; }
.td-cookie-choice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem 0; padding: .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: .72rem; background: #1b1b1b; }
.td-cookie-choice span { display: grid; gap: .2rem; }
.td-cookie-choice small { color: #aebcc1; }
.td-cookie-choice b { color: #00fa00; font-size: .78rem; text-align: right; }
.td-cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.td-cookie-actions button { min-height: 44px; padding: .65rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: .65rem; background: #1b1b1b; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.td-cookie-actions .primary { border-color: #024d62; background: #024d62; }

@keyframes td-remote-filament { to { transform: rotate(1turn); } }
@keyframes td-top-pulse { 50% { transform: translateY(-4px); } }
@keyframes td-consent-turn { to { transform: rotate(145deg); } }
@keyframes td-share-pulse { 50% { transform: scale(1.14); } }

@media (max-width: 640px) {
  .td-remote { --remote-size: 2.75rem; }
  .td-panel { padding: .65rem .65rem calc(4.7rem + env(safe-area-inset-bottom)); place-items: end center; }
  .td-search { padding: 5.25rem .65rem .65rem; place-items: start center; }
  .td-panel-card { width: 100%; max-height: calc(100vh - 5.5rem); border-radius: 1rem; }
  .td-search-field kbd { display: none; }
  .td-search-results small { white-space: normal; }
}
@media (max-height: 480px) and (orientation: landscape) { .td-remote { --remote-size: 2.6rem; } }
@media (prefers-reduced-motion: reduce) {
  .td-remote::before { animation: none; }
  .td-remote-tools,
  .td-remote-command,
  .td-remote-compact,
  .td-remote-signature,
  .td-search-results a { transition-duration: .01ms !important; }
  .td-remote-command.is-activated svg,
  .td-remote-command:active svg { animation: none !important; }
}