*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-4 {
  margin: 1rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.\!table {
  display: table !important;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-56 {
  width: 14rem;
}
.w-full {
  width: 100%;
}
.min-w-52 {
  min-width: 13rem;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-none {
  flex: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.basis-\[50rem\] {
  flex-basis: 50rem;
}
.border-collapse {
  border-collapse: collapse;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-nowrap {
  text-wrap: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-center {
  text-align: center;
}
.\!text-end {
  text-align: end !important;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.border-surface {
  border-color: var(--p-content-border-color);
}
.bg-emphasis {
  background: var(--p-content-hover-background);
  color: var(--p-content-hover-color);
}
.text-muted-color {
  color: var(--p-text-muted-color);
}
@keyframes enter {

  from {
    opacity: var(--p-enter-opacity, 1);
    transform: translate3d(var(--p-enter-translate-x, 0), var(--p-enter-translate-y, 0), 0) scale3d(var(--p-enter-scale, 1), var(--p-enter-scale, 1), var(--p-enter-scale, 1)) rotate(var(--p-enter-rotate, 0));
  }
}
@keyframes leave {

  to {
    opacity: var(--p-leave-opacity, 1);
    transform: translate3d(var(--p-leave-translate-x, 0), var(--p-leave-translate-y, 0), 0) scale3d(var(--p-leave-scale, 1), var(--p-leave-scale, 1), var(--p-leave-scale, 1)) rotate(var(--p-leave-rotate, 0));
  }
}
/* One glyph only: the Sabi head on U+1F916, so the robot emoji renders as our own bot
   instead of the platform emoji. unicode-range keeps this font out of the way for every
   other character, so it can sit first in the stack without affecting normal text.
   Monochrome by nature -- it takes the surrounding text colour. Where the icon should
   keep its colours, use getSabiHtml()/.sabi-icon instead.
   Regenerate with: python3 scripts/generate-sabi-font.py src/assets/font */
@font-face {
    font-family: 'SabiIcon';
    /* woff2 only: it is small enough that vite inlines it as a data uri, and listing
       woff/ttf as well would inline those too and triple the css for no gain -- every
       browser in the legacy target list (safari 12, ios 12, edge 79) reads woff2.
       sabi.ttf is kept alongside as the editable source, unreferenced. */
    src: url('data:font/woff2;base64,d09GMgABAAAAAARwAAoAAAAACngAAAQmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAUAqNSIxmATYCJAMGCwYABCAFgxsHKxtbCSMRwsYBFeAbkL9IsA1R2w81QEkEIhNhxs2VW4byxnWQLA/ycM2scSCEguJvfpzfu9/bZG4K/JISzfxTxXkFIAmkAFgYPr7GVBkyursrDMHPr7m7zd8H/7vbbmJyh59YVKR6hsZCQyyusUQlJUIkUrcRndC8vzQEFSnQhGFTN80LbYE8lY1pY9I/yG/7plibo64Ujt6eXFObpPTPbVUtkVFDtFMzKvlSMgJycwBo3CbkFJEit5tyZCKdwcNrfRn1XwkdMk+8LJeGwT4L0f+fgPznEJZeCCeIcggr68tND9PtzayiEcZov8JqN4gyCTIqI4Zp/xclWm7uEYEeioR3L4FktDTiVMRbnsKYvVYrlTjYgwO4bq9UGo0ETIImX92ALOzDNa5cB/EgJ5FgmAoaoJ6uZA6HY+Z4PKIroz5idVUQLSaZvCRwAlQBJEknENrGcB+KTlI0KZ5hCpYbwqEuxCbUSSB4g/1jACDpkAFC4GTp50A2KPrMHkWiKXgO8FxXS5AoU6QcouNMSd7dw2MwXwgnEaPQfG4knbN88bMoakdGHOqQSCNAx2wWt2aESwq2AIbCKKC+Y/PTpvdf/pz1ukHROb+TyzBQ2ThOEd6frdwH26cRZvPp5ewLQMHCubb1bWx+Ce81suO/Bq7WZ5bQdNngZb2SmH1sZNT+j8xYXjYf6VXGiH2fcV2TeUPWqvHPZ70C9LreJFvj5AwAplwqaawqy7Zl8AOW5Mgqy3KlMgOAOJTjBqpiS8G2pKgDvVS9ttSbGSYSyrKq7NiiQ5ZVjaXM0gKIOQwXp6qK5CvatqIOOBrRT0FzgHjnVWJIgMROnfcMWObODodjygISVBqbIChQjU14+Uoaej0ejFez3W6nLfKCl+e9Ai+2OyXD2dWcBy99XuzJSbUgMFlxKqIvxdjjOXjMcKy0pnNycef6DkFChkGpEMtlEOXezuJkZ01phijVXQIelRG/tqu69L7HYO+9c6qiEFjBXKPu1BBnseA5qlqQ9jzB+Ll5HEZuOmBuZ6u6IBKAmIiovhMAQlFJE1zv30lWjiruMarZizaclWZNOEejVmstFOUCExnDlGAR10aEIWBsLalwKrd4zgUsPHuf0ITaVDXukVhC44tgYa2gQCpKFBHG1npyZWZ808o9Kks5m19TDb4gok/jTl2d9hVjkoiA7SKPhj9hH+WpaiUZjpk6Rr22OHkiyjiEaXumJ3sco9Qotj1Fas4NpXLcVqTanSRL53CyyBibTdMIG+bdLNuWG1pduC3x7E5S4p0l14x82CurO19Yjv67ofZN68i3KGN9ubQLlkTf85iI60MIq6HuczRtxaodE9YcOTRlw5YL+1a07Fyajw3mhnes25KNxWoD6ZeHoHN5Eref2akfidULfmHbhOq2yc+SZprYs5XVHQA=') format('woff2');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    unicode-range: U+1F916;
}
@font-face {
    font-family: 'Noto Sans w Symbols';
    src: url('/assets/NotoSanswSymbolsVF-Bns11Oqz.woff2') format('woff2'),
        url('/assets/NotoSanswSymbolsVF-BGg7TS3u.woff') format('woff'),
        url('/assets/NotoSanswSymbolsVF-D-QzFQ8_.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
/* Arial with the suits of Symbol, for the card faces (CCCardSvg).
   Regenerate with: python3 scripts/generate-card-font.py src/assets/font */
@font-face {
    font-family: 'StepBridge Card';
    src: url('/assets/StepBridgeCard-Wqv6WdFJ.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
@font-face {
    font-family: 'StepBridge Card';
    src: url('/assets/StepBridgeCard-Bold-CRDFbx-M.woff2') format('woff2');
    font-style: normal;
    font-weight: bold;
    font-display: block;
}
/* The only thing we still used from primeicons, which cost 633 kB of font files for it:
   PrimeVue's autocomplete, multiselect and cascadeselect put pi-spin on their loading
   icon, and our own spinner borrows it too. The keyframes are FontAwesome's own. */
.pi-spin {
    animation: fa-spin 2s infinite linear;
}
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); */
/* .p-tooltip {
    z-index: 2000 !important;
} */
.v-enter-active,
.v-leave-active {
    transition: opacity 0.2s ease;
}
.v-enter-from,
.v-leave-to {
    opacity: 0;
}
/* color palette from <https://github.com/vuejs/theme> */
:root {
    --c-black: #000000;
    --c-white: #ffffff;
    --c-red: #ff0808;
    --c-red-dark: #fc6a5d;
    --c-red-soft: #650718;
    --c-red-soft-dark: #fdddff;
    /* --c-yellow: #fd8f3f;
    --c-yellow-dark: #d0bc56; */
    --c-orange: #fd8f3f;
    --c-orange-dark: #fdbb3f;
    --c-blue: #0b28e2;
    --c-blue-dark: #5482ff;
    --c-green: #30a010;
    --c-green-dark: #5dda5d;
    --c-dark-cyan: #014d4d;
    --c-cyan: #00ffff;
    --c-light-cyan: #caffff;
    --c-dark-green: #008000;
    --c-light-green: #70f070;
    --c-light-blue: #70aaff;
    --c-grey: #e0e0e0;
    --c-grey-dark: #aaaaaa;
    --c-light-grey: #e0e0e0;
    --c-dark-grey: #474747;
    --c-purple: #800080;
    --c-pink: #ff30ff;


    --clr-symbol-green-light: var(--c-green);
    --clr-symbol-green-dark: var(--c-green-dark);
    --clr-symbol-blue-light: var(--c-blue);
    --clr-symbol-blue-dark: var(--c-blue-dark);
    --clr-symbol-red-light: var(--c-red);
    --clr-symbol-red-dark: var(--c-red-dark);
    --clr-symbol-black-light: var(--c-black);
    --clr-symbol-black-dark: var(--vt-c-white-soft);

    --clr-hearts-light: var(--clr-symbol-red-light);
    --clr-diams-light: var(--clr-symbol-red-light);
    --clr-spades-light: var(--clr-symbol-black-light);
    --clr-clubs-light: var(--clr-symbol-black-light);
    --clr-clubs-4c-light: var(--clr-symbol-green-light);
    --clr-diams-4c-light: var(--clr-symbol-blue-light);
    --clr-hearts-dark: var(--clr-symbol-red-dark);
    --clr-diams-dark: var(--clr-symbol-red-dark);
    --clr-spades-dark: var(--clr-symbol-black-dark);
    --clr-clubs-dark: var(--clr-symbol-black-dark);
    --clr-clubs-4c-dark: var(--clr-symbol-green-dark);
    --clr-diams-4c-dark: var(--clr-symbol-blue-dark);

    --clr-vulnerable-light: var(--c-red);
    --clr-vulnerable-dark: var(--c-red-dark);
    --clr-turn-light: cyan;
    --clr-turn-dark: rgb(13, 166, 204);
    --clr-bid-disabled-light: var(--c-grey);
    --clr-bid-disabled-dark: var(--c-dark-grey);
    --clr-bid-select-light: var(--clr-turn-light);
    --clr-bid-select-border-light: var(--clr-bid-border-light);
    --clr-bid-select-text-light: var(--c-black);
    --clr-bid-select-light-hover: cyan;
    --clr-bid-select-dark: #80c0b8;
    --clr-bid-border-light: #8888;
    --clr-bid-border-dark: #8888;
    --clr-bid-select-border-dark: var(--clr-bid-border-dark);
    --clr-bid-select-text-dark: var(--c-white);
    --clr-bid-select-dark-hover: var(--clr-bid-select-dark);
    --clr-table-light: #268130;
    --clr-log-play-light: rgb(0, 132, 185);
    --clr-log-play-dark: #43d9f4;
    --clr-log-bid-light: #050;
    --clr-log-bid-dark: #1f1;
    --clr-log-chat-light: var(--c-purple);
    --clr-log-chat-dark: var(--c-pink);
    --clr-log-system-light: #00f;
    --clr-log-system-dark: #49f;
    --clr-table-dark: #166f20;
    --clr-table-hi-light: #c3e8c7;
    --clr-table-hi-dark: #0a4e12;
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;

    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;

    --vt-c-indigo: #2c3e50;

    --c-panel-transparent-light: rgba(255, 255, 255, 0.8);
    --c-panel-transparent-dark: rgba(0, 0, 0, 0.8);

    --clr-panel-video-light: #fff5f5;
    --clr-border-video-light: #ff9393;
    --clr-panel-video-dark: #2b0000;
    --clr-border-video-dark: #560909;

    --clr-panel-info-light: #f3f8fc;
    --clr-border-info-light: #abc7e0;
    --clr-panel-info-dark: #021f38;
    --clr-border-info-dark: #093f6f;

    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
    --vt-c-divider-light-2: rgba(60, 60, 60, 0.62);
    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
    --vt-c-divider-dark-2: rgba(104, 104, 104, 0.88);

    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark: #d9d9d9;
    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
    --color-contacts-location-activity: #c04000;
    --color-contacts-location-table: #0000f0;
    --color-contacts-code-partner-bg: #658fe3;
    --color-contacts-code-partner: #fff;
    --color-text-commentator: var(--color-text);
    --color-text-error: var(--c-red);
    --color-text-warning: var(--c-orange);
    --color-text-green: #005000;
    --color-text-private: #aa00b1;
    --color-text-private-send: #820187;
    --color-text-standard: #000000;
    --color-text-system: #0000f0;
    --color-text-system-important: #2747a2;
    --color-text-teacher: #0058ff;
    --color-text-tournament-director: var(--color-text-red);
    /* --color-text-tournament-director: #960869; */
    --color-text-url: var(--c-purple);
    --color-text-template: var(--c-blue);
    --color-pairing-none: var(--color-text-system);
    --color-participant-inactive: #808080;
    --color-participant-bye: #36a023;
    --color-selected: var(--c-black);
    --color-selected-background: #00ff8c5c;
    --color-current-location-background: #00ff8c1d;
    --color-current-location-border: #aaa;

    --color-hyperlink: #0000f0;
    --color-log-play: var(--clr-log-play-light);
    --color-log-bid: var(--clr-log-bid-light);
    --color-log-chat: var(--clr-log-chat-light);
    --color-log-system: var(--clr-log-system-light);
    --color-error-bg: #ff5f5f;
    --color-table-hi: var(--clr-table-hi-light);

    --color-text-green: var(--clr-symbol-green-light);
    --color-text-red: var(--clr-symbol-red-light);
    --color-text-blue: var(--c-blue);

    --color-suit-spades: var(--clr-spades-light);
    --color-suit-clubs: var(--clr-clubs-light);
    --color-suit-diams: var(--clr-diams-light);
    --color-suit-hearts: var(--clr-hearts-light);
    --color-suit-clubs-4c: var(--clr-clubs-4c-light);
    --color-suit-diams-4c: var(--clr-diams-4c-light);

    --color-background: var(--vt-c-white);
    --color-background-soft: var(--vt-c-white-soft);
    --color-background-mute: var(--vt-c-white-mute);

    --color-border: var(--vt-c-divider-light-2);
    --color-border-hover: var(--vt-c-divider-light-1);

    --color-heading: var(--vt-c-text-light-1);
    --color-text: var(--vt-c-text-light-1);
    --color-text-disabled: var(--vt-c-text-light-2);

    --color-vulnerable: var(--clr-vulnerable-light);
    --color-turn: var(--clr-turn-light);
    --color-bid-disabled: var(--clr-bid-disabled-light);
    --color-bid-border: var(--clr-bid-border-light);
    --color-bid-select: var(--clr-bid-select-light);
    --color-bid-select-border: var(--clr-bid-select-border-light);
    --color-bid-select-text: var(--clr-bid-select-text-light);
    --color-bid-select-hover: var(--clr-bid-select-hover-light);

    --color-table: var(--clr-table-light);

    --color-playable-background: #c9c9c9;

    --color-background-panel: var(--vt-c-white-soft);
    --color-background-frame: var(--vt-c-white-mute);
    --color-background-chat: var(--vt-c-white-soft);
    --color-background-chat-td: var(--c-light-cyan);

    --color-bubble-me: #dcf8c6;
    --color-bubble-me-text: #111;
    --color-bubble-them: #e8e8e8;
    --color-bubble-them-text: #111;

    --color-panel-transparent: var(--c-panel-transparent-light);
    --color-panel-info: var(--clr-panel-info-light);
    --color-border-info: var(--clr-border-info-light);
    --color-panel-video: var(--clr-panel-video-light);
    --color-border-video: var(--clr-border-video-light);
    --color-border-video-broadcast: var(--color-text-red);

    --p-button-tournament-color: var(--color-text);
    --p-button-tournament-background: #d3ffef;
    --p-button-tournament-border-color: #599f86;
    --p-button-tournament-hover-color: var(--color-text);
    --p-button-tournament-hover-background: #b1e5d2;
    --p-button-tournament-hover-border-color: #599f86;

    --color-participant-not-confirmed: var(--color-text-blue);
    --color-participant-offline: var(--color-text-red);
    --color-participant-not-active: var(--color-text-disabled);
    --color-participant-bye: var(--color-text-green);

    --color-user-offline: var(--color-text-error);

    --color-tooltip: var(--vt-c-white, #fff);
    --color-tooltip-background: var(--vt-c-black-soft, #222);
    --color-tooltip-border: var(--vt-c-black-mute, #282828);

    --color-tooltip-info: var(--vt-c-text-light-1, var(--vt-c-indigo));
    --color-tooltip-info-background: var(--clr-panel-info-light, #f3f8fc);
    --color-tooltip-info-border: var(--clr-border-info-light, #abc7e0);

    --color-splitter-dragindicator: #dddfe4;
    --color-splitter-dragindicator-border: #c2c2c2;

    --section-gap: 160px;
}
/* :root { */
.dark {
    --color-contacts-location-activity: #ffc080;
    --color-contacts-location-table: #3389f4;
    --color-contacts-code-partner-bg: #a0b6e2;
    --color-contacts-code-partner: #000;
    --color-text-commentator: var(--color-text);
    --color-text-error: var(--c-red-dark);
    --color-text-warning: var(--c-orange-dark);
    --color-text-green: #10ff10;
    --color-text-private: #ff96db;
    --color-text-private-send: #ff60c8;
    --color-text-standard: #e0e0e0;
    --color-text-system: #89a8fc;
    --color-text-system-important: #c1d1ff;
    --color-text-teacher: #00dfff;
    --color-text-tournament-director: var(--color-text-red);
    /* --color-text-tournament-director: #ff0033; */
    --color-text-url: var(--c-pink);
    --color-text-template: var(--c-blue-dark);
    --color-pairing-none: var(--color-text-system-dm);
    --color-participant-inactive: #888888;
    --color-participant-bye: #acf07b;
    --color-selected: var(--c-white);
    --color-selected-background: #00ff8c41;

    --color-current-location-background: #00ff8c25;
    --color-current-location-border: #8d8d8d;

    --color-hyperlink: #6488ff;
    --color-log-play: var(--clr-log-play-dark);
    --color-log-bid: var(--clr-log-bid-dark);
    --color-log-chat: var(--clr-log-chat-dark);
    --color-log-system: var(--clr-log-system-dark);

    --color-error-bg: #7a0000;

    --color-table: var(--clr-table-light-dark);
    --color-table-hi: var(--clr-table-hi-dark);

    --color-suit-spades: var(--clr-spades-dark);
    --color-suit-clubs: var(--clr-clubs-dark);
    --color-suit-diams: var(--clr-diams-dark);
    --color-suit-hearts: var(--clr-hearts-dark);
    --color-suit-clubs-4c: var(--clr-clubs-4c-dark);
    --color-suit-diams-4c: var(--clr-diams-4c-dark);

    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);
    --color-background-panel: var(--vt-c-black-soft);
    --color-background-frame: var(--vt-c-black-mute);
    --color-background-chat: var(--vt-c-black-soft);

    --color-background-chat-td: var(--c-dark-cyan);

    --color-bubble-me: #005c4b;
    --color-bubble-me-text: #e9e9e9;
    --color-bubble-them: #2a2a2a;
    --color-bubble-them-text: #e9e9e9;

    --color-panel-transparent: var(--c-panel-transparent-dark);
    --color-panel-info: var(--clr-panel-info-dark);
    --color-border-info: var(--clr-border-info-dark);
    --color-panel-video: var(--clr-panel-video-dark);
    --color-border-video: var(--clr-border-video-dark);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);

    --color-text-green: var(--clr-symbol-green-dark);
    --color-text-red: var(--clr-symbol-red-dark);
    --color-text-blue: var(--c-blue-dark);

    --color-text: var(--vt-c-text-dark);
    --color-text-disabled: var(--vt-c-text-dark-2);

    --color-vulnerable: var(--clr-vulnerable-dark);
    --color-turn: var(--clr-turn-dark);
    --color-bid-border: var(--clr-bid-border-dark);
    --color-bid-disabled: var(--clr-bid-disabled-dark);
    --color-bid-select: var(--clr-bid-select-dark);
    --color-bid-select-border: var(--clr-bid-select-border-dark);
    --color-bid-select-text: var(--clr-bid-select-text-dark);
    --color-bid-select-hover: var(--clr-bid-select-hover-dark);

    --color-table: var(--clr-table-dark);

    --color-participant-not-confirmed: var(--color-text-blue);
    --color-participant-offline: var(--color-text-red);
    --color-participant-not-active: var(--color-text-disabled);
    --color-participant-bye: var(--color-text-green);

    --color-playable-background: #575757;

    --color-user-offline: var(--color-text-error);

    --p-button-tournament-color: white;
    --p-button-tournament-background: #043535;
    --p-button-tournament-border-color: #0a2a2a;
    --p-button-tournament-hover-color: white;
    --p-button-tournament-hover-background: #165050;
    --p-button-tournament-hover-border-color: #205353;

    --color-tooltip: var(--vt-c-black, #181818);
    --color-tooltip-background: var(--vt-c-white-soft, #f8f8f8);
    --color-tooltip-border: var(--vt-c-white-mute, #f2f2f2);

    --color-tooltip-info: var(--color-text);
    --color-tooltip-info-background: var(--clr-panel-info-dark, #03213c);
    --color-tooltip-info-border: var(--clr-border-info-dark, #093f6f);

    --color-splitter-dragindicator: #555;
    --color-splitter-dragindicator-border: #777;
}
/* *,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
} */
/*
 root font-size must be equal to the size in the autozoom
 */
:root {
    font-size: 14px;
    touch-action: pinch-zoom;
}
a {
    color: var(--color-text-url);
}
html {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;

    /* Without this, iOS inflates text it considers too small for the layout while the
       paddings around it stay as computed, so the text sat high in buttons and inputs.
       It only showed once autozoom started compensating a page zoom, because that is
       when the root font-size gets small enough for iOS to step in. */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;

    overscroll-behavior: none;
}
body {
    position: fixed;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;

    overscroll-behavior: none;
    /* touch-action: none; */
    /* color: var(--p-text); */
    touch-action: pinch-zoom;
    /* Match the app theme so any area the app doesn't cover blends in. On
       Brave/iOS the bottom safe-area strip falls outside #app (all height:100%),
       and without this the hardcoded boot color (index.html) showed as a dark
       grey border there. The inline boot color is cleared in main.ts once the
       theme is applied so this rule takes over. */
    background-color: var(--color-background);
    /* transition: color 0.5s, background-color 0.5s; */
    /* line-height: 1.6; */
    /* font-family: Helvetica, sans-serif, Symbol; */
    font-synthesis: none;
    /* SabiIcon is restricted to U+1F916 by its unicode-range, so it only claims the
       robot emoji and every other character falls through to the fonts after it. */
    font-family: 'SabiIcon', 'Noto Sans w Symbols', 'Helvetica', sans-serif, Symbol;
    /* font-weight: 300; */
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}
/* iOS Safari specific fixes for keyboard handling */
@supports (-webkit-touch-callout: none) {

    /* This targets WebKit browsers (Safari on iOS) */
    html,
    body {
        /* Prevent elastic scrolling that can cause white space issues */
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    #app {
        /* Enable scrolling within the app container */
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure proper height calculation on iOS */
    .root {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}
#app {
    /* background-image: v-bind(pictureUrl); */
    /* max-width: 1280px; */
    margin: 0 auto;
    background-color: var(--color-background);
    color: var(--color);
    overflow: hidden;
}
img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: none;
}
button {
    touch-action: none;
}
.pointer {
    cursor: pointer;
}
.dragging {
    transition: none !important;
}
.bold {
    font-weight: bold;
}
#replayer {
    margin: 0 auto;
    padding: 1em;
    background-color: var(--color-background);
    color: var(--color);
}
input[type="checkbox"] {
    scale: 1.2;
}
.root {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--color-background);
    width: 100%;
    height: 100%;
    margin: auto;
}
.free {
    color: var(--color-text-green);
}
.offline {
    color: var(--color-text-error) !important;
}
.link {
    color: var(--color-text-url) !important;
    cursor: pointer !important;
}
/* Sabi head, injected through v-html (getSabiHtml) so it cannot be a scoped style.
   Sized in em so it follows the player name it is appended to; the negative
   vertical-align drops it slightly below the baseline, like the 🤖 it replaces.
   Drawn as a background image rather than an <img> so the injected markup stays a
   short tag (it repeats once per Sabi name in lists and in every chat line), and to
   stay clear of the global "img { touch-action: none }" rule above, which would
   swallow a finger scroll that starts on the icon. The svg is 240x210, so the
   width follows from the height. */
.sabi-icon {
    display: inline-block;
    height: 1.1em;
    width: 1.26em;
    vertical-align: -0.10em;
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='8%2021%20240%20210'%20width='240'%20height='210'%20role='img'%20aria-label='Sabi'%3e%3cpath%20d='M168%2072%20L179%2044'%20fill='none'%20stroke='%23171310'%20stroke-width='19'%20stroke-linecap='round'/%3e%3cpath%20d='M168%2072%20L179%2044'%20fill='none'%20stroke='%23ffffff'%20stroke-width='9'%20stroke-linecap='round'/%3e%3ccircle%20cx='181'%20cy='37'%20r='11'%20fill='%23ffffff'%20stroke='%23171310'%20stroke-width='6'/%3e%3cellipse%20cx='28'%20cy='139'%20rx='14'%20ry='24'%20fill='%23ffffff'%20stroke='%23171310'%20stroke-width='9'/%3e%3cellipse%20cx='228'%20cy='139'%20rx='14'%20ry='24'%20fill='%23ffffff'%20stroke='%23171310'%20stroke-width='9'/%3e%3cellipse%20cx='128.153'%20cy='137.674'%20rx='94.931'%20ry='86.326'%20fill='%23ffffff'%20stroke='%23171310'%20stroke-width='15'%20style=''/%3e%3ccircle%20cx='71'%20cy='173'%20r='12'%20fill='%23f6b4a4'/%3e%3ccircle%20cx='185'%20cy='173'%20r='12'%20fill='%23f6b4a4'/%3e%3ccircle%20cx='86.078'%20cy='127.169'%20r='28'%20fill='%23171310'/%3e%3ccircle%20cx='170.078'%20cy='127.169'%20r='28'%20fill='%23171310'/%3e%3ccircle%20cx='75.017'%20cy='113.108'%20r='7.639'%20fill='%23ffffff'%20style=''/%3e%3ccircle%20cx='159.35'%20cy='113.441'%20r='7.972'%20fill='%23ffffff'%20style=''/%3e%3cpath%20d='M%20114.2%20164.4%20C%20123.4%20173.733%20132.6%20173.733%20141.8%20164.4'%20fill='none'%20stroke='%23171310'%20stroke-width='12'%20stroke-linecap='round'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Sabi head for icon slots that take a class name instead of markup, such as
   PrimeVue's Button :icon (see icon.sabi). Drawn with the font glyph rather than the
   image above, so it is monochrome and inherits the text colour -- an icon sitting on
   a coloured button has to follow that button's foreground, the way the Font Awesome
   icon it replaces did. The family is named explicitly so a component rule that sets
   its own font-family on the icon element cannot win. */
.sabi-glyph::before {
    content: "🤖";
    font-family: 'SabiIcon', sans-serif;
    font-style: normal;
    font-weight: normal;
}
/* 
.p-menubar {
    z-index: 1000;
  }
  
  .p-menubar .p-menubar-root-list {
    z-index: 1001;
  } */
.suitsymbol {
    /* font-size: 1.1em; */
}
.suit-clubs-4c {
    /* padding: 0.05em 0; */
    color: var(--color-suit-clubs-4c);
}
.suit-diams-4c {
    /* padding: 0.05em 0; */
    color: var(--color-suit-diams-4c);
}
.suit-clubs {
    /* padding: 0.05em 0; */
    color: var(--color-suit-clubs);
}
.suit-diams {
    color: var(--color-suit-diams);
}
.suit-hearts {
    /* padding: 0.05em 0; */
    color: var(--color-suit-hearts);
}
.suit-spades {
    /* padding: 0.05em 0; */
    color: var(--color-suit-spades)
}
.vulnerable {
    background-color: var(--color-vulnerable);
    color: var(--color-background);
}
.turn {
    background-color: var(--color-turn);
}
.rotate90 {
    transform: rotate(90deg);
}
.w-button {
    width: 8rem;
}
.w-button-xl {
    width: 12rem;
}
.w-button-xxl {
    width: 15rem;
}
.labelgrid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center;
}
/* layout system, like tailwind */
.m-1 {
    margin: 0.25em;
    /* 4px */
}
.m-2 {
    margin: 0.5em;
    /* 8px */
}
.m-3 {
    margin: 0.75em;
    /* 12px */
}
.m-4 {
    margin: 1em;
    /* 16px */
}
.mt-1 {
    margin-top: 0.25em;
    /* 4px */
}
.mt-2 {
    margin-top: 0.5em;
    /* 8px */
}
.mt-3 {
    margin-top: 0.75em;
    /* 12px */
}
.mt-4 {
    margin-top: 1em;
    /* 16px */
}
.mb-1 {
    margin-bottom: 0.25em;
    /* 4px */
}
.mb-2 {
    margin-bottom: 0.5em;
    /* 8px */
}
.mb-3 {
    margin-bottom: 0.75em;
    /* 12px */
}
.mb-4 {
    margin-bottom: 1em;
    /* 16px */
}
.gap-1 {
    gap: 0.25em;
}
.gap-2 {
    gap: 0.5em;
}
.gap-3 {
    gap: 0.75em;
}
.gap-4 {
    gap: 1em;
}
.flex {
    display: flex;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-initial {
    flex: 0 1 auto;
}
.flex-none {
    flex: none;
}
.align-left {
    align-content: left;
}
.align-center {
    align-content: center;
}
.align-right {
    align-content: right;
}
.align-items-left {
    align-items: left;
}
.align-items-center {
    align-items: center;
}
.align-items-right {
    align-items: right;
}
.justify-left {
    justify-content: left;
}
.justify-center {
    justify-content: center;
}
.justify-right {
    justify-content: right;
}
.justify-items-left {
    justify-items: left;
}
.justify-items-center {
    justify-items: center;
}
.justify-items-right {
    justify-items: right;
}
@media (min-width: 768px) {

  .md\:w-56 {
    width: 14rem;
  }
}
.bidding-grid[data-v-08b11198] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bidding-chair[data-v-08b11198] {
    display: flex;
    width: 100%;
    justify-content: center;
}
.rounded[data-v-08b11198] {
    border-radius: 0.3em;
    /* padding: 0.05em 0.3em; */
    width: 1.4em;
    text-align: center;
}
.bidding-bid[data-v-08b11198] {
    justify-self: center;
    margin: 0.1em 0.2em;
}
.axis[data-v-08b11198] {}
.names[data-v-08b11198] {
    /* font-weight: bold; */
    text-align: center;
    text-overflow: ellipsis;
    width: 25%;
}
.column[data-v-08b11198] {
    text-align: center;
    width: 25%;
}

.attr-icons[data-v-b03724ef] {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.dgcard[data-v-d983c6c6] {
    min-width: 1.15em;
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--color-text);
    background-color: var(--color-background-panel);
    border-radius: 0.25em;
    margin: 0.1em;
}
.playable[data-v-d983c6c6] {
    cursor: pointer;
}
.cardPlayed[data-v-d983c6c6] {
    filter: brightness(0.75) contrast(0.5);
}
.playable[data-v-d983c6c6]:hover {
    background-color: var(--color-playable-background);
    border-radius: 0.2em;
}

.touchbar[data-v-1986cd2d] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column: span 2;
}
.dghand-symbol[data-v-1986cd2d] {
    width: 1.5em;
    text-align: center;
}
.dghand[data-v-1986cd2d] {
    position: relative;
    z-index: var(--d56e3b4a);
    min-width: 12em;
    border-color: var(--color-border);
    border-style: solid;
    border-width: 0.1em;
    border-radius: 0.5em;
    border-spacing: 0;
    background-color: var(--color-background-panel);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}
.dghand-chair[data-v-1986cd2d] {
    width: 1.5em;
    height: 1.7em;
    align-items: center;
    border-bottom: 0.1em solid var(--color-border);
    border-radius: 0.4em 0 0;
    border-right: 0.1em solid var(--color-border);
    display: flex;
    justify-content: center;
}
.dghand-title[data-v-1986cd2d] {
    height: 1.7em;
    text-align: left;
    border-bottom: 0.1em solid var(--color-border);
    border-radius: 0 0.4em 0 0;
    padding: 0 0.25em;
    gap: 0.25em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    touch-action: none;
}
.dghand-attr[data-v-1986cd2d] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8em;
}
.dghand tr[data-v-1986cd2d] {
    text-align: left;
}
.dghand td th[data-v-1986cd2d] {
    display: table-cell;
}
.dghand-cards[data-v-1986cd2d] {
    justify-content: left;
    display: flex;
    min-height: 1.7em;
}
.dgcard[data-v-1986cd2d] {
    padding-left: 0.2em;
    padding-right: 0.2em;
}
input[type="checkbox"][data-v-1986cd2d] {
    margin: 0em;
}

.cc-card-svg[data-v-f87fa078] {
    display: block;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
}

/* the card is one object: no text cursor or selection on its glyphs */
text[data-v-f87fa078] {
    pointer-events: none;
}
.rank[data-v-f87fa078] {
    font-family: 'StepBridge Card', sans-serif;
}
.suit[data-v-f87fa078] {
    font-family: 'StepBridge Card', sans-serif;
}

.cccard[data-v-efca7c50] {
    -webkit-touch-callout: none;
}
.playable[data-v-efca7c50] {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.cardPlayed[data-v-efca7c50] {
    filter: brightness(0.75);
}
[draggable='true'][data-v-efca7c50] {
    cursor: move;
}
.is-dragging[data-v-efca7c50] {
    display: none;
}

/* Bug fix: On iPad Pro, :hover can fire when cards become playable (turn change)
   without actual mouse hover, causing cards to pop out unexpectedly.
   This happens because iPadOS triggers :hover on elements that change state
   near the last touch position. Using @media (hover: hover) restricts the
   pop-out effect to devices with a true hover-capable pointer (mouse/trackpad). */
@media (hover: hover) {
.playable[data-v-efca7c50]:hover {
        /* filter: brightness(80%) */
        scale: 1.1;
        transform: translateX(4%);
        /* transition: scale 0.2s ease-in-out; */
}
}

.cchand[data-v-1903dae8] {
    position: relative;
}
.cctitle[data-v-1903dae8] {
    position: absolute;
    font-size: 1.1em;
    width: 10em;
    top: 71%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    border: solid 0.1em var(--color-border);
    border-radius: 0.25em;
    box-sizing: border-box;
    touch-action: none;
}
.cctitle-chair[data-v-1903dae8] {
    width: 2em;
    text-align: center;
    border-radius: 0.15em 0 0 0.15em;
    border-right: 0.1em solid var(--color-border);
    background-color: var(--color-background);
    box-sizing: border-box;
}
.cctitle-title[data-v-1903dae8] {
    text-align: left;
    border-radius: 0 0.15em 0.15em 0;
    padding: 0 0.25em;
    gap: 0.25em;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: inherit;
    background-color: var(--color-background-panel);
}
.cctitle-attr[data-v-1903dae8] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8em;
}
.cchand-cards[data-v-1903dae8] {
    display: flex;
    justify-content: center;
    align-items: center;
}
.vulnerable[data-v-1903dae8] {
    background-color: var(--color-vulnerable);
    color: var(--color-background);
}
.turn[data-v-1903dae8] {
    background-color: var(--color-turn);
}
.cctitle-cards[data-v-1903dae8] {
    justify-content: center;
    display: flex;
}
.cccard[data-v-1903dae8] {
    /* height: 8em; */
}
input[type='checkbox'][data-v-1903dae8] {
    margin: 0em;
}

.dgcard[data-v-bb50b290] {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--color-text);
    margin: 0.1em;

    border: 0.1em solid var(--color-border);
    border-radius: 0.4em;
    background-color: var(--color-background-panel);

    width: 2.5em;
    height: 2.2em;
}
.playable[data-v-bb50b290] {
    cursor: pointer;
}
.cardPlayed[data-v-bb50b290] {
    filter: brightness(0.75) contrast(0.5);
}
.playable[data-v-bb50b290]:hover {
    background-color: var(--color-playable-background);
    border-radius: 0.2em;
}

.playArea[data-v-c8a08228] {}
.cardArea[data-v-c8a08228] {
    position: relative;
    height: 6em;
    width: 6em;
    font-size: 1.2em;
}
.playArea-msg[data-v-c8a08228] {
    border: 0.1em solid var(--color-text);
    border-radius: 0.25em;
    background-color: #d5eeff;
    padding: 0.1em 0.5em;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
}
.top[data-v-c8a08228] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -120%);
}
.right[data-v-c8a08228] {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(120%, -40%);
}
.bottom[data-v-c8a08228] {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-60%, 120%);
}
.left[data-v-c8a08228] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-120%, -60%);
}

.playArea-text-diagram[data-v-0bf8862c] {
    font-size: 0.6em !important;
}
.playArea-text-paused[data-v-0bf8862c] {
    color: var(--color-text-error);
    background-color: var(--color-background);
    border-radius: 0.2em;
    font-size: 1em;
}
.playArea-text[data-v-0bf8862c] {
    padding: 0 0.8em;
    font-size: 0.8em;
    font-style: italic;
}
.playArea-text-top[data-v-0bf8862c] {
    position: absolute;
    top: -0.7em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}
.playArea-text-border[data-v-0bf8862c] {
    /* border: 1px dashed var(--color-border);
    border-radius: 0.3em; */
}
.playArea-text-bottom[data-v-0bf8862c] {
    position: absolute;
    bottom: -0.5em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.scroll-y[data-v-03e53853] {
    overflow-y: auto;
    overflow-x: hidden;
}

.center[data-v-1640ea19] {
    /* border: 1px dashed var(--color-border);
    border-radius: 4em; */
    width: 11em;
    height: 9.5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bidding-container[data-v-1640ea19] {
    border: 0.1em solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    border-radius: 0.5em;
    scrollbar-width: none;
    background-color: var(--color-background-panel);
    padding-top: 0.2em;
}
.bidding-container[data-v-1640ea19]:hover {
    scrollbar-width: thin;
}
.playArea-container[data-v-1640ea19] {
    /* margin-top: -0.5em;
    margin-bottom: -0.5em; */
    width: 11em;
    height: 9.5em;

    display: flex;
    justify-content: center;
    align-items: center;
}
.previousTrick[data-v-1640ea19] {
    border: 0.1em dashed red;
    border-radius: 0.8em;
    color: red;
}
.row-ns[data-v-1640ea19] {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.5em;
}
.row-ew[data-v-1640ea19] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: center;
    /* float: left; */
    padding: 0.5em;
    gap: 0.5em;
}
.row-e[data-v-1640ea19] {
    display: flex;
    justify-self: start;
    align-items: center;
}
.row-w[data-v-1640ea19] {
    display: flex;
    justify-self: end;
    align-items: center;
}

/* .nshand {
    margin: auto;
} */

.boardlayout[data-v-6fddb57d] {}
.bidding-container[data-v-6fddb57d] {
    border: 0.1em solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    padding-top: 0.25em;
    border-radius: 0.5em;
    scrollbar-width: none;
    background-color: var(--color-background-panel);
    font-size: 1.3em;
}
.bidding-container[data-v-6fddb57d]:hover {
    scrollbar-width: thin;
}
.playArea-container[data-v-6fddb57d] {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: var(--color-text);
    border: 0.08em dashed var(--color-border);
    border-radius: 0.8em;
}
.previousTrick[data-v-6fddb57d] {
    border: 0.1em dashed red;
    color: red;
}
.hand-container[data-v-6fddb57d] {
    /* padding: 0.5em; */
    /* width: 30em;
    display: flex;
    justify-content: center;
    align-items: center; */
}
.center[data-v-6fddb57d] {
    width: 15em;
    height: 15em;
    margin: 0.5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.row-ns[data-v-6fddb57d] {
    width: 100%;
    display: flex;
    justify-content: center;
}
.row-ew[data-v-6fddb57d] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* .nshand {
    margin: auto;
} */

/* .ccareacard {
    opacity: 1;
    transition: all 50ms ease-in-out;
} */
.top[data-v-cf522fda] {
    position: absolute;
    bottom: 45%;
    left: 51%;
    transform: translate(-55%, 0%);
}
.right[data-v-cf522fda] {
    position: absolute;
    left: 51%;
    top: 50%;
    transform: translate(0%, -55%);
}
.bottom[data-v-cf522fda] {
    position: absolute;
    top: 45%;
    left: 49%;
    transform: translateX(-55%);
}
.left[data-v-cf522fda] {
    position: absolute;
    right: 51%;
    top: 50%;
    transform: translateY(-45%);
}

.bidding[data-v-19564fbc] {
    line-height: 1.4;
    width: 100%;
}
.dropzoneActive[data-v-19564fbc] {
    border: 0.2em dashed black;
    border-radius: 0.5em;
}

.replayer[data-v-271e4031] {
    line-height: 1.5;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
    /* border: 1px dashed grey;
    border-radius: 1em; */
    background-color: var(--color-background);
}
.board[data-v-271e4031] {
    font-size: 1.3em;
}
.btn[data-v-271e4031] {
    color: var(--color-text);
    height: 2.3em;
    width: 2.3em;
    font-size: 1.3em;
    border-radius: 0.3em;
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    background-image: none;
    transition: all 0.2s ease-in-out;
    touch-action: manipulation;
}
.btn[data-v-271e4031]:hover {
    border: 0.1em solid var(--color-border-hover);
}
.btn[data-v-271e4031]:disabled {
    color: var(--color-text-disabled);
    background-color: var(--color-background-mute);
}
.results[data-v-271e4031] {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1.2em;
}
.buttonbox-share[data-v-271e4031] {
    position: absolute;
    left: 0.5em;
    bottom: 0.6em;
    width: 15em;
    gap: 0.4em;
    display: flex;
    justify-content: start;
}
.buttonbox-control[data-v-271e4031] {
    position: absolute;
    right: 0.5em;
    bottom: 0.6em;
    width: 15em;
    gap: 0.2em;
    display: flex;
    justify-content: end;
}