:root {
    --1px: 1.13333px;
    --spacing: 0.25rem;
    --accent-logo-1: rgb(178 142 44);
    --accent-logo-2: rgb(43 168 35 / 15%);
    --accent-1: rgb(0 0 0 / 15%);
    --accent-2: rgb(0 0 0 / 5%);
    --system-ui-radius: calc(var(--1px) * 12);
    --max-width-main: calc(calc(var(--1px) * 402) * 1);
    --side-gap: calc((100vw - min(100vw, var(--max-width-main))) / 2);
    --font-size: calc(var(--1px) * 17);
    --white: 255 255 255;
    --black: 0 0 0;
    --muted: rgb(var(--black) / 60%);
    --muted: #999999;
    --muted-bg: rgb(var(--black) / 4%);
    --hr-bg: rgb(var(--black) / 6%);
    --text-primary: rgb(var(--black) / 100%);
    --text-primary-invers: rgb(var(--white) / 75%);
    --text-primary-invers-100: rgb(var(--white) / 100%);
    --placeholder: rgb(var(--black) / 25%);
    --keyboard-offset: calc(var(--1px) * 0);
    --viewport-height: 100svh;
    --viewport-top: calc(var(--1px) * 0);
    --system-ui-radius-base: calc(var(--1px) * 12);
    --system-ui-radius: var(--system-ui-radius-base);
}
:root {
    --accent-red: #ff383c;
    --red: 255 56 60;
    --accent-red: rgb(var(--red) / 100%);
    --accent-red-muted-bg: rgb(var(--red) / 10%);
    --accent-orange: #ff8d28;
    --orange: 255 141 40;
    --accent-orange: rgb(var(--orange) / 100%);
    --accent-orange-bg: rgb(var(--orange) / 70%);
    --accent-yellow: #ffcc00;
    --accent-green: #34c759;
    --green: 52 199 89;
    --accent-green: rgb(var(--green) / 100%);
    --accent-green-muted-bg: rgb(var(--green) / 15%);
    --accent-mint: #00c8b3;
    --accent-teal: #00c3d0;
    --accent-cyan: #00c0e8;
    --blue: 0 136 255;
    --accent-blue: rgb(var(--blue) / 100%);
    --accent-blue-muted-bg: rgb(var(--blue) / 4%);
    --accent-indigo: #6155f5;
    --accent-purple: #cb30e0;
    --accent-pink: #ff2d55;
    --accent-brown: #ac7f5e;
    --accent-1: rgb(178 178 178 / 30%);
    --accent-2: rgb(178 178 178 / 30%);
    --muted-bg: rgb(var(--black) / 4%);
    --blue: 0 145 255;
    --accent-blue: rgb(var(--blue) / 100%);
    --accent-blue-muted-bg: rgb(var(--blue) / 10%);
    --red: 255 66 69;
    --accent-red: rgb(var(--red) / 100%);
    --accent-red-muted-bg: rgb(var(--red) / 14%);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076df;
    --sk-button-background-active: #006edb;
}
:root,
:host {
    --font-mono:
        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
        "Liberation Mono", "monospace";
    --spacing: 0.25rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1/0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25/0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5/1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75/1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75/1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2/1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25/1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5/2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --drop-shadow-xs: 0 1px 1px #0000000d;
    --drop-shadow-sm: 0 1px 2px #00000026;
    --drop-shadow-md: 0 3px 3px #0000001f;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --drop-shadow-xl: 0 9px 7px #0000001a;
    --drop-shadow-2xl: 0 25px 25px #00000026;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: calc(var(--1px) * 4);
    --blur-sm: calc(var(--1px) * 8);
    --blur-md: calc(var(--1px) * 12);
    --blur-lg: calc(var(--1px) * 16);
    --blur-xl: calc(var(--1px) * 24);
    --blur-2xl: calc(var(--1px) * 40);
    --blur-3xl: calc(var(--1px) * 64);
    --aspect-video: 16/9;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family:
        "ui-sans-serif", "-apple-system", "system-ui", "Segoe UI", "Helvetica",
        "Apple Color Emoji", "Arial", "sans-serif", "Segoe UI Emoji",
        "Segoe UI Symbol";
    --default-mono-font-family:
        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
        "Liberation Mono", "monospace";
    --text-heading-2: 1.5rem;
    --text-heading-2--line-height: 1.75rem;
    --text-heading-2--letter-spacing: -0.015625rem;
    --text-heading-2--font-weight: 600;
    --text-heading-app: 1.75rem;
    --text-heading-app--line-height: 2.125rem;
    --text-heading-app--letter-spacing: 0.02375rem;
    --text-heading-app--font-weight: 500;
    --text-heading-3: 1.125rem;
    --text-heading-3--line-height: 1.625rem;
    --text-heading-3--letter-spacing: -0.028125rem;
    --text-heading-3--font-weight: 600;
    --text-body-regular: 1rem;
    --text-body-regular--line-height: 1.625rem;
    --text-body-regular--letter-spacing: -0.025rem;
    --text-body-regular--font-weight: 400;
    --text-body-small-regular: 0.875rem;
    --text-body-small-regular--line-height: 1.125rem;
    --text-body-small-regular--letter-spacing: -0.01875rem;
    --text-body-small-regular--font-weight: 400;
    --text-footnote-regular: 0.8125rem;
    --text-footnote-regular--line-height: 1.125rem;
    --text-footnote-regular--letter-spacing: -0.005rem;
    --text-footnote-regular--font-weight: 400;
    --text-footnote-medium: calc(var(--1px) * 13);
    --text-footnote-medium--line-height: calc(var(--1px) * 20);
    --text-footnote-medium--letter-spacing: calc(var(--1px) * -0.08);
    --text-footnote-medium--font-weight: 500;
    --text-monospace: 0.9375rem;
    --text-monospace--line-height: 1.375rem;
    --text-monospace--letter-spacing: -0.025rem;
    --text-monospace--font-weight: 400;
    --text-caption-regular: 0.75rem;
    --text-caption-regular--line-height: 1rem;
    --text-caption-regular--letter-spacing: -0.00625rem;
    --text-caption-regular--font-weight: 400;
    --tap-padding-pointer: calc(var(--1px) * 32);
    --tap-padding-mobile: calc(var(--1px) * 44);
    --focus-outline-margin-default: calc(var(--1px) * 4);
}
@supports (corner-shape: squircle) {
    :root {
        --system-ui-radius: calc(var(--system-ui-radius-base) * 3.5);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --white: 0 0 0;
        --black: 250 250 250;
        --accent-1: rgb(255 255 255 / 30%);
        --accent-2: rgb(255 255 255 / 30%);
        --muted-bg: rgb(var(--black) / 8%);
        --blue: 0 145 255;
        --accent-blue: rgb(var(--blue) / 100%);
        --accent-blue-muted-bg: rgb(var(--blue) / 10%);
        --red: 255 66 69;
        --accent-red: rgb(var(--red) / 100%);
        --accent-red-muted-bg: rgb(var(--red) / 14%);
    }
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-synthesis: none;
    -moz-font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
    line-height: calc(var(--1px) * 22);
    tab-size: 4;
    font-size: var(--font-size);
    background: rgb(var(--white) / 100%);
    color: var(--text-primary);
    font-family: var(--default-font-family);
}
html.page-about {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    min-height: 100vh;
    min-height: calc(
        100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
    display: grid;
    place-items: center;
    width: 100vw;
    overflow-x: hidden;
    background: rgb(var(--white) / 100%);
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom) env(safe-area-inset-left);
    align-items: start;
}
.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
}
input::placeholder,
textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
}
b {
    font-weight: 500;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100vw;
    width: 100%;
    margin-top: calc(var(--1px) * -16);
}
.screen {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 40);
    width: 100%;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    /*vertical-align: middle;*/
    display: block;
}
.screen > * {
    width: 100%;
}
.section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 14);
    max-width: var(--max-width-main);
    margin: 0 auto;
    padding: 0 calc(var(--1px) * 24);
}
header {
    display: flex;
    justify-items: center;
    text-align: center;
    margin: 0 auto;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: calc(var(--1px) * 16);
    z-index: 999;
    position: sticky;
    top: 0;
    gap: calc(var(--1px) * 4);
}
html[class*="page-"]:not(.page-index) header {
    top: env(safe-area-inset-top, 0px);
}
html.page-index body.is-loading .home-screen > :not(header),
html.page-index body.is-loading header > :not(#logo) {
    opacity: 0;
    pointer-events: none;
    transition: none;
}
html.page-index body.is-loading #logo,
html.page-index body.is-loading #logo * {
    opacity: 1;
    pointer-events: auto;
}
html.page-index body.is-loaded .home-screen > :not(header),
html.page-index body.is-loaded header > :not(#logo) {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s ease;
}
#logo svg path {
    stroke-width: calc(var(--1px) * 13.5);
}
#logo svg:last-child path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: logo-draw 3.8s cubic-bezier(0.35, 0, 0.99, 0.42) forwards;
    stroke-width: calc(var(--1px) * 13.5);
}
@keyframes logo-draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes header-dismiss {
    to {
        opacity: 0;
        transform: translateY(calc(var(--1px) * 12)) scale(0.98);
        filter: blur(calc(var(--1px) * 1));
        pointer-events: none;
        visibility: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-index header #logo svg path,
    .page-index header h1,
    .page-index header p {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
    html.page-index header {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}
#logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    transition:
        height 0.4s,
        margin-top 0.4s;
    margin-top: 0;
    z-index: 9999;
    transition:
        width 0.5s,
        height 0.5s,
        padding-top 0.5s;
    background: rgb(var(--white) / 100%);
    backdrop-filter: blur(calc(var(--1px) * 44));
    border-radius: calc(var(--1px) * 9999);
    padding-top: calc(var(--1px) * 10);
}
#logo > div {
    width: calc(var(--1px) * 68);
    height: calc(var(--1px) * 68);
    width: calc(var(--1px) * 136);
    height: calc(var(--1px) * 136);
    position: relative;
    margin: 0 auto;
    transition:
        width 0.5s,
        height 0.5s;
}
body.preload-off #logo > div {
    width: calc(var(--1px) * 68);
    height: calc(var(--1px) * 68);
}
#logo svg {
    width: 100%;
    height: 100%;
    max-width: calc(var(--1px) * 190);
    max-height: calc(var(--1px) * 190);
    position: absolute;
    left: 0;
    top: 0;
}
h1 {
    margin: 0;
    font-size: calc(var(--1px) * 17);
    font-weight: 500;
}
h2 {
    margin: 0;
    margin-top: calc(var(--1px) * 32);
    font-size: calc(var(--1px) * 17);
    font-weight: var(--font-weight-semibold);
}
h3 {
    margin: 0;
    margin-top: calc(var(--1px) * 17);
    font-weight: 500;
    font-size: calc(var(--1px) * 17);
}
h4 {
    margin: 0;
    margin-top: calc(var(--1px) * 16);
    font-weight: 500;
}
p {
    margin: 0;
    margin-top: calc(var(--1px) * 8);
}
strong {
    font-weight: 500;
}
a,
.day-task-time-header .option,
.option span {
    color: unset;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: calc(var(--1px) * 1);
    text-underline-offset: calc(var(--1px) * 3);
    cursor: pointer;
}
a:hover,
.day-task-time-header .option:hover {
    text-decoration-color: var(--accent-blue);
}
ul {
    margin: 0;
    margin-top: calc(var(--1px) * 8);
    padding-inline-start: calc(var(--1px) * 24);
}
.scroll-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-hide::-webkit-scrollbar {
    display: none;
}
.muted {
    color: var(--muted);
}

span#batteryVoltage {
    display: none;
}
.avatars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: calc(var(--1px) * 14);
    overflow-x: auto;
}
.avatars li {
    display: grid;
    justify-items: center;
    gap: calc(var(--1px) * 8);
    min-width: calc(var(--1px) * 78);
    position: relative;
}
.avatars li.has-contact {
    cursor: pointer;
}
.avatars li .contact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--1px) * 20);
    height: calc(var(--1px) * 20);
    border-radius: calc(var(--system-ui-radius) * 0.4);
    background: linear-gradient(0deg, var(--accent-green), #00ff40);
    color: white;
    position: absolute;
    right: calc(var(--1px) * 4);
    top: calc(var(--1px) * 58);
    box-shadow: 0px 1px 2px rgb(0 0 0 / 8%);
}
.avatars li .contact-badge svg {
    width: calc(var(--1px) * 14);
    height: calc(var(--1px) * 14);
}
.avatars li > span {
    width: calc(var(--1px) * 88);
    height: calc(var(--1px) * 88);
    border-radius: 50%;
    background: var(--background-secondary-elevated);
    display: grid;
    place-items: center;
}
.avatars li > img {
    width: calc(var(--1px) * 70);
    height: calc(var(--1px) * 70);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.group-avatar {
    width: calc(var(--1px) * 70);
    height: calc(var(--1px) * 70);
    border-radius: 50%;
    display: grid;
    background: var(--muted-bg);
    position: relative;
    margin-top: calc(var(--1px) * 8);
}
.group-avatar[data-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.group-avatar[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: calc(var(--1px) * 8);
}
.group-avatar[data-count="3"],
.group-avatar[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.group-avatar img,
.group-avatar span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: grid;
    place-items: center;
    color: rgb(var(--muted));
    background: var(--gray-blue-bg);
    margin: auto;
    background: var(--hr-bg);
    max-width: none;
    border-radius: 50%;
}
.group-avatar .group-more {
    font-weight: 500;
    font-size: calc(var(--1px) * 10);
    background: transparent;
    line-height: var(--tw-leading, var(--text-xs--line-height));
}
.avatars small {
    display: block;
    text-align: center;
    font-size: calc(var(--1px) * 11);
    line-height: 1.2;
    color: rgb(var(--muted));
}
button,
.button {
    width: 100%;
    font: inherit;
    color: var(--accent-blue);
    color: var(--text-primary);
    cursor: pointer;
    background: transparent;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    backdrop-filter: blur(calc(var(--1px) * 40));
    -webkit-backdrop-filter: blur(calc(var(--1px) * 40));
    border: 1px solid rgb(223 223 223 / 12%);
    overflow: hidden;
    gap: calc(var(--spacing) * 1.5);
    pointer-events: auto;
    min-height: calc(var(--spacing) * 9);
    min-height: calc(var(--1px) * 44);
    border-style: solid;
    padding-inline: calc(var(--spacing) * 3);
    font-weight: var(--font-weight-medium);
    font-size: calc(var(--1px) * 15);
    border-width: 1px;
    border-color: #0000;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.ios-menu {
    transform-origin: center;
    transition: transform 0.2s ease;
    padding: 0;
    box-shadow: none;
    color: var(--text-primary);
    border-radius: var(--system-ui-radius);
    border-color: var(--hr-bg);
}
.ios-menu:active {
    transform: scale(0.97);
}
.ios-menu.is-animating.is-expanded {
    animation: ios-menu-open 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ios-menu.is-animating:not(.is-expanded) {
    animation: ios-menu-close 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ios-menu-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: calc(var(--1px) * 0) calc(var(--1px) * 24) calc(var(--1px) * 0)
        calc(var(--1px) * 24);
    transition:
        max-height 0.35s ease,
        opacity 0.2s ease,
        padding 0.2s ease;
}
.ios-menu-details.is-expanded {
    opacity: 1;
}
@keyframes ios-menu-open {
    0% {
        transform: scale(0.98);
    }
    55% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes ios-menu-close {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ios-menu,
    .ios-menu-details {
        animation: none;
        transition: none;
    }
}
@media (hover: hover) and (pointer: fine) {
    button:hover,
    .button:hover,
    a.row-actions:hover,
    .button.js-tasks-drawer-open:hover {
        background: var(--accent-blue-muted-bg);
        background: rgb(var(--black) / 2%);
        text-decoration: none;
        color: var(--text-primary) !important;
    }
}
.tasks-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}
.tasks-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--black) / 24%);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.tasks-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(96vw, calc(var(--1px) * 414));
    background: var(--text-primary-invers-100);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 16);
    overflow: auto;
}
.tasks-drawer.is-open {
    pointer-events: auto;
}
.tasks-drawer.is-open .tasks-drawer-backdrop {
    opacity: 1;
}
.tasks-drawer.is-open .tasks-drawer-panel {
    transform: translateX(0);
}
.tasks-drawer.is-dragging .tasks-drawer-panel,
.tasks-drawer.is-dragging .tasks-drawer-backdrop {
    transition: none;
}
.tasks-drawer.peek .tasks-drawer-panel {
    transform: translateX(-70%);
}
.tasks-drawer.peek .tasks-drawer-backdrop {
    opacity: 0.12;
}
.tasks-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        var(--text-primary-invers-100),
        transparent
    );
    padding: calc(calc(var(--1px) * 16) + env(safe-area-inset-top))
        calc(var(--1px) * 16) calc(var(--1px) * 16);
    width: 100%;
    z-index: 9;
}
.tasks-drawer-header h2 {
    margin: 0;
    font-size: calc(var(--1px) * 20);
    font-weight: 500;
}
.tasks-drawer .tasks-drawer-tasks {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
p.description-tasks {
    margin-top: calc(var(--1px) * -36);
    margin-bottom: calc(var(--1px) * 32);
    color: var(--muted);
}
body.login p.description-tasks {
    display: none;
}
.tasks-drawer .tasks-drawer-calendar {
    display: none;
    flex-direction: column;
    padding: calc(var(--1px) * 16);
}
.tasks-drawer.show-calendar .tasks-drawer-tasks {
    display: none;
}
.tasks-drawer.show-calendar .tasks-drawer-calendar {
    display: flex;
}
.tasks-drawer-tabs {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.tasks-drawer-tab {
    width: auto;
    padding: calc(var(--1px) * 10) calc(var(--1px) * 14);
    min-height: calc(var(--1px) * 44);
    font-weight: 400;
    border-radius: inherit;
    color: var(--muted);
    box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 6%);
    border-radius: calc(var(--1px) * 9999);
    backdrop-filter: blur(calc(var(--1px) * 40));
    -webkit-backdrop-filter: blur(calc(var(--1px) * 40));
    border: 1px solid rgb(255 255 255 / 80%);
}
.tasks-drawer-login {
    width: auto;
    font-weight: 400;
    color: var(--accent-blue);
    padding: 0;
    padding-inline: 0;
    background: var(--text-primary-invers-100);
    min-height: auto;
    border-radius: inherit;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: calc(var(--1px) * 16);
    border-top: 1px solid;
    border-color: var(--hr-bg);
    border-bottom-color: transparent;
}
.tasks-drawer-tab.is-active {
    color: var(--text-primary);
    font-weight: 500;
    pointer-events: none;
    box-shadow: none;
}
.tasks-drawer-toggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: calc(var(--1px) * 8);
    border-radius: calc(var(--1px) * 999);
    z-index: 998;
    background: transparent;
    box-shadow: none;
    border: none;
    height: 100%;
    backdrop-filter: none;
    color: var(--muted);
    border-radius: 0;
}
body.drawer-open {
    overflow: hidden;
}

.avatars li > img + div,
.avatars li > .group-avatar + div,
.avatars li > img + div span,
.avatars li > .group-avatar + div span {
    max-width: calc(var(--1px) * 96);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.avatars li > span + div > span,
.avatars li > img + div > span,
.avatars li > .group-avatar + div > span {
    max-width: calc(var(--1px) * 78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-size: calc(var(--1px) * 15);
    font-size: calc(var(--1px) * 14);
}
.avatars li > img + div > span.name {
    font-size: calc(var(--1px) * 15);
}
.button-group.apply {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 4);
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-main);
    align-items: center;
    margin-bottom: calc(var(--1px) * 40);
    flex-wrap: wrap;
}
.button-group.apply > span {
    font-size: calc(var(--1px) * 15);
}

.section.width100 {
    max-width: none;
    margin: auto;
    padding: 0;
}
.farm-team {
    gap: calc(var(--1px) * 0);
}
.section.width100 p {
    margin-left: var(--side-gap);
    padding: 0 calc(var(--1px) * 24);
    font-size: calc(var(--1px) * 15);
}
.farm-toggle-tabs {
    display: flex;
    flex-direction: row;
    gap: calc(var(--1px) * 6);
    margin-left: var(--side-gap);
    margin-right: var(--side-gap);
    padding: 0 calc(var(--1px) * 24);
    justify-content: space-between;
    max-width: var(--max-width-main);
}
html.page-volunteer .farm-toggle-tabs {
    margin-left: 0;
    margin-right: 0;
    position: sticky;
    top: 0;
    z-index: 999;
}
.farm-toggle .toggle-panel {
    display: none;
}
.farm-toggle .toggle-panel.is-active {
    display: flex;
}
.farm-toggle .toggle-tab {
    cursor: pointer;
    font-size: calc(var(--1px) * 15);
    letter-spacing: calc(var(--1px) * -0.08);
}
.farm-toggle .toggle-tab.is-active {
    color: var(--text-primary);
}
.avatars li:first-child {
    margin-left: calc(var(--side-gap) + calc(var(--1px) * 24));
}
.avatars li:last-child {
    margin-right: calc(var(--side-gap) + calc(var(--1px) * 24));
}
.group-avatar[data-count="2"] img,
.group-avatar[data-count="3"] img,
.group-avatar[data-count="4"] img {
    border-radius: calc(var(--1px) * 999);
    position: absolute;
}
.group-avatar[data-count="2"] img:nth-child(1),
.group-avatar[data-count="3"] img:nth-child(1),
.group-avatar[data-count="4"] img:nth-child(1) {
    width: calc(var(--1px) * 37);
    height: calc(var(--1px) * 37);
    margin: calc(var(--1px) * 8) calc(var(--1px) * 0) calc(var(--1px) * 0)
        calc(var(--1px) * 10);
}
.group-avatar[data-count="2"] img:nth-child(2),
.group-avatar[data-count="3"] img:nth-child(2),
.group-avatar[data-count="4"] img:nth-child(2) {
    width: calc(var(--1px) * 22);
    height: calc(var(--1px) * 22);
    margin: calc(var(--1px) * 38) calc(var(--1px) * 0) calc(var(--1px) * 0)
        calc(var(--1px) * 40);
}
.group-avatar[data-count="3"] img:nth-child(3),
.group-avatar[data-count="4"] img:nth-child(3) {
    width: calc(var(--1px) * 16);
    height: calc(var(--1px) * 16);
    margin: calc(var(--1px) * 50) calc(var(--1px) * 0) calc(var(--1px) * 0)
        calc(var(--1px) * 20);
}
.group-avatar[data-count="4"] span:nth-child(4) {
    width: calc(var(--1px) * 16);
    height: calc(var(--1px) * 16);
    margin: calc(var(--1px) * 20) calc(var(--1px) * 0) calc(var(--1px) * 0)
        calc(var(--1px) * 50);
}
.modal {
    position: fixed;
    top: var(--viewport-top);
    left: 0;
    right: 0;
    height: var(--viewport-height);
    align-items: flex-end;
    justify-content: center;
    padding: calc(var(--1px) * 4);
    padding-bottom: calc(calc(var(--1px) * 4) + env(safe-area-inset-bottom));
    background: rgb(0 0 0 / 30%);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 220ms ease,
        visibility 0s linear 220ms;
    display: flex;
    background: rgb(var(--black) / 24%);
    backdrop-filter: blur(8px);
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease;
    z-index: 9999;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
}
.modal-panel {
    position: relative;
    width: 100%;
    max-width: var(--max-width-main);
    max-height: calc(var(--viewport-height, 100svh) - calc(var(--1px) * 48));
    background: rgb(var(--white) / 100%);
    border-radius: calc(var(--system-ui-radius) * 1.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform 240ms ease,
        opacity 180ms ease;
    padding: calc(var(--1px) * 16);
}
.modal-panel.is-camera-live-panel {
    max-width: calc(var(--max-width-main) * 1.49);
}

.modal-panel.is-dragging {
    transition: none;
}
.modal.is-open .modal-panel {
    transform: translateY(0);
    opacity: 1;
}
.modal-body {
    overflow: auto;
    padding: 0;
}
.modal.is-open .modal-panel:before {
    background: rgb(var(--black) / 16%);
    content: "";
    width: calc(var(--1px) * 40);
    height: calc(var(--1px) * 4);
    position: absolute;
    left: calc(50% - calc(var(--1px) * 20));
    border-radius: calc(var(--1px) * 999);
    top: calc(var(--1px) * 8);
    display: none;
}
.modal-loading {
    padding: calc(var(--1px) * 28);
    color: var(--gray-blue-text);
    font-size: var(--body-font-size);
}
.contact-card {
    padding: calc(var(--1px) * 8);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 16);
}

.telegram-bot-card .telegram-bot-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: calc(var(--1px) * 4);
    display: none;
}

.telegram-bot-card .telegram-bot-header button:first-child {
    position: absolute;
    left: calc(var(--1px) * -8);
    top: calc(var(--1px) * -8);
    z-index: 1;
}

.telegram-bot-card .telegram-bot-header button:first-child svg {
    min-width: calc(var(--1px) * 14);
    min-height: calc(var(--1px) * 14);
    max-width: calc(var(--1px) * 14);
    max-height: calc(var(--1px) * 14);
}

.telegram-bot-card .telegram-bot-header h2 {
    margin: 0;
    font-size: calc(var(--1px) * 17);
    font-weight: 500;
}
.telegram-bot-card .telegram-bot-header .telegram-bot-header-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--1px) * 6);
    /* max-width: calc(var(--1px) * 280); */
    /* max-width: calc(var(--max-width-main) - calc(var(--1px) * 88)); */
    padding: 0px calc(var(--1px) * 32);
    /* display: none; */
}
.telegram-bot-card .telegram-bot-header .telegram-bot-header-copy p {
    margin: 0;
    font-size: calc(var(--1px) * 13);
    line-height: 1.35;
}
.telegram-bot-card .telegram-bot-header .button-icon {
    position: absolute;
    left: calc(var(--1px) * 0);
    top: calc(var(--1px) * 0);
    width: calc(var(--1px) * 44);
    height: calc(var(--1px) * 44);
    min-width: calc(var(--1px) * 44);
    min-height: calc(var(--1px) * 44);
    max-width: calc(var(--1px) * 44);
    max-height: calc(var(--1px) * 44);
    padding: 0;
    border-radius: calc(var(--1px) * 9999);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1;
    text-indent: calc(var(--1px) * -9999);
}
.telegram-bot-card .telegram-bot-header .button-icon svg {
    width: calc(var(--1px) * 20);
    height: calc(var(--1px) * 20);
}
.telegram-bot-card .telegram-bot-header .button-icon span {
    display: none;
}
.telegram-bot-qr-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}
.telegram-bot-qr {
    width: min(calc(var(--1px) * 260), 100%);
    aspect-ratio: 1 / 1;
    height: auto;
    /* border-radius: calc(var(--1px) * 16); */
    /* border: 1px solid var(--hr-bg); */
    display: grid;
    place-items: center;
    overflow: hidden;
    justify-content: center;
    align-content: center;
}
.telegram-bot-qr > canvas,
.telegram-bot-qr > svg,
.telegram-bot-qr > img {
    width: 100%;
    height: 100%;
    display: block;
}
.contact-header {
    display: flex;
    align-items: center;
    gap: calc(var(--1px) * 16);
}
.contact-header h3 {
    margin: 0;
    font-size: calc(var(--1px) * 17);
    font-weight: 500;
}
.contact-avatar {
    width: calc(var(--1px) * 88);
    height: calc(var(--1px) * 88);
    border-radius: 50%;
    background: var(--gray-blue-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-top: 0;
    background: var(--muted-bg);
}
.contact-avatar span {
    font-size: var(--callout-font-size);
    color: rgb(var(--muted));
}
.row-blocks {
    display: grid;
    gap: 0;
    font-size: var(--body-font-size);
}
.row-blocks > div {
    display: grid;
    gap: calc(var(--1px) * 4);
}
.row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--1px) * 16);
    padding: calc(var(--1px) * 13) calc(var(--1px) * 14);
    border-radius: var(--system-ui-radius);
    text-decoration: none;
    color: inherit;
    background: transparent;
    position: relative;
    width: 100%;
}
.row-actions > div:first-child {
    display: grid;
    gap: calc(var(--1px) * 0);
    width: 100%;
}
.row-actions > div.row-actions-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--1px) * 8);
}
.row-actions .row-actions-image {
    width: calc(var(--1px) * 64);
    height: calc(var(--1px) * 64);
    max-width: calc(var(--1px) * 64);
}
.row-actions .row-actions-image img {
    margin: 0;
}
.row-icon {
    display: grid;
    place-items: center;
    color: var(--muted);
    justify-content: end;
}
.row-icon svg {
    width: calc(var(--1px) * 10);
    height: calc(var(--1px) * 10);
}

.row-blocks a.row-actions {
    color: inherit;
    text-decoration: none;
}
body.modal-open {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-panel {
        transition: none;
    }
}
.row-actions:not(:first-child):before {
    content: "";
    position: absolute;
    height: calc(var(--1px) * 1);
    width: 90%;
    background: var(--hr-bg);
    top: 0;
    left: 5%;
}
.row-actions:first-child:hover + .row-actions:before,
.row-actions:hover:before {
    display: none;
}
img,
video {
    width: 100%;
    height: auto;
    max-width: max-content;
    max-height: 60dvh;
    object-fit: contain;
    border-radius: var(--system-ui-radius);
    overflow: hidden;
    margin: 0 auto;
    display: block;
    margin-top: calc(var(--1px) * 8);
}
figure {
    padding: 0;
    margin: 0;
}
ul li {
    margin-top: calc(var(--1px) * 8);
}
hr {
    border: none;
    background: var(--hr-bg);
    height: calc(var(--1px) * 1);
    width: 100%;
    margin: 0 auto;
    margin-top: calc(var(--1px) * 24);
    margin-bottom: calc(var(--1px) * 24);
}
html.page-about section,
html.page-personal-data-policy .section,
html.docs .section {
    max-width: calc(1.44 * var(--max-width-main));
}
img + em,
video + figcaption {
    text-align: center;
    display: block;
    font-size: calc(var(--1px) * 14);
    color: var(--muted);
    margin-top: calc(var(--1px) * 8);
}
html.page-about hr + p + h2,
html.page-about hr + p + h1,
html.page-personal-data-policy hr + p + h2,
html.page-personal-data-policy hr + p + h1 {
    margin-top: 0;
    padding-top: calc(var(--1px) * 32);
}
html.page-about hr,
html.page-personal-data-policy hr {
    margin: calc(var(--1px) * 96) auto calc(var(--1px) * 72) auto;
}
html.page-about main,
html.page-personal-data-policy main {
    margin-bottom: calc(var(--1px) * 96);
    transition:
        margin-left 0.3s,
        width 0.3s;
}
span.quick-navigation {
    position: fixed;
    left: 0;
    top: 0;
    background: var(--muted-bg);
    padding: calc(var(--1px) * 24);
    z-index: 99;
    overflow: auto;
    height: 100dvh;
    width: calc(var(--1px) * 260);
    border-right: 1px solid var(--hr-bg);
    backdrop-filter: saturate(0.75) blur(calc(var(--1px) * 40));
    transform: translateX(-100%);
    transition: transform 0.3s;
    padding-top: calc(var(--1px) * 96);
}
span.quick-navigation hr {
    display: none;
}
span.quick-navigation ul li {
    margin-top: 0;
    position: relative;
}
span.quick-navigation ul {
    list-style-type: none;
    padding-inline-start: calc(var(--1px) * 0);
}
span.quick-navigation ul li a {
    padding: calc(var(--1px) * 8) calc(var(--1px) * 12);
    width: 100%;
    display: block;
    border-radius: var(--system-ui-radius);
    color: var(--text-primary);
    text-decoration: none;
}
span.quick-navigation ul li a:hover {
    background: var(--hr-bg);
    text-decoration: none;
}
header nav {
    transition: gap 0.3s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--1px) * 4);
}
body.open-sidebar span.quick-navigation {
    transform: translateX(0%);
}
body.open-sidebar header nav {
    gap: calc(var(--1px) * 136);
}
html.page-index .screen header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}
html.page-index header h1 {
    font-size: calc(var(--1px) * 17);
    font-weight: 400;
    letter-spacing: calc(var(--1px) * -0.43);
}

html.page-index header p {
    margin-top: 0;
    font-size: calc(var(--1px) * 15);
    display: inline-flex;
    align-items: center;
}
html.page-index header p > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    text-transform: capitalize;
    display: inline;
}
@media (min-width: calc(var(--1px) * 1024)) {
}
html.page-about p {
    margin-top: calc(var(--1px) * 16);
}

span.quick-navigation ul li:last-child {
    margin-top: calc(var(--1px) * 24);
    padding-top: calc(var(--1px) * 14);
    font-weight: 500;
}
span.quick-navigation ul li:last-child:after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(var(--1px) * 1);
    background: var(--hr-bg);
}
html.page-farm-team header {
    width: 100%;
    max-width: calc(var(--max-width-main) + calc(var(--1px) * 72));
    margin: 0 auto;
}

summary {
    color: var(--accent-blue);
    margin-top: calc(var(--1px) * 24);
    cursor: pointer;
}
html.page-index section.section h2 {
    font-size: calc(var(--font-size) * 2);
    font-size: calc(var(--font-size) * 1.588234);
    font-weight: 400;
    text-align: center;
    margin: 0;
}
html.page-index section.section h2 + p {
    font-size: calc(var(--font-size) * 1);
    text-align: center;
    margin-top: calc(var(--1px) * -12);
}
.notification-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 0);
    flex-wrap: wrap;
    position: relative;
    border: 1px solid rgb(223 223 223 / 12%);
    backdrop-filter: blur(calc(var(--1px) * 40));
    -webkit-backdrop-filter: blur(calc(var(--1px) * 40)) saturate(180%);
    background: linear-gradient(
        136deg,
        rgb(255 255 255 / 12%),
        rgb(255 255 255 / 4%)
    );
    width: 100%;
    border-radius: calc(var(--1px) * 24);
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 4%);
}

.status-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--1px) * 12);
}
.status-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--1px) * 6);
    font-weight: 500;
}

.status-time {
    font-weight: 500;
    font-size: calc(var(--1px) * 15);
}

.status-row {
    padding: calc(var(--1px) * 14);
    box-shadow:
        0 0 2px 0 var(--tw-shadow-color, #0000000d),
        0 4px 6px 0 var(--tw-shadow-color, #00000005);
    width: 100%;
}
.status-row.progress {
    position: relative;
    overflow: hidden;
}
.status-row.progress::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fill, 0%);
}
.status-row.progress > * {
    position: relative;
    z-index: 1;
}
.status-row > div {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 8);
    align-items: flex-start;
    width: 100%;
    padding: 0;
}
div#farmNowDetails {
    display: flex;
    flex-direction: row;
    gap: calc(var(--1px) * 24);
    padding-left: calc(var(--1px) * 6);
}

.status-row svg {
    width: calc(var(--1px) * 20);
    height: calc(var(--1px) * 20);
    margin-left: 0;
}
.status-row div > span {
    font-size: calc(var(--1px) * 15);
    font-weight: 400;
}
span#farmNowLead strong {
    color: var(--text-primary);
}
span#farmNowStatus {
    display: block;
    line-height: 1.25;
}
span#farmNowStatus strong {
    color: var(--text-primary);
}
span#farmNowValue {
    color: var(--text-primary);
    opacity: 1;
    -webkit-text-fill-color: var(--text-primary);
}
.status-row div > span:first-child {
    display: flex;
    align-items: center;
    gap: calc(var(--1px) * 8);
    font-size: calc(var(--1px) * 34);
    line-height: 1.0943;
    margin-top: calc(var(--1px) * 4);
    font-weight: 500;
    color: var(--text-primary);
    opacity: 1;
    -webkit-text-fill-color: var(--text-primary);
}
.status-row #tempLabel {
    text-transform: capitalize;
}
.status-icon {
    width: calc(var(--1px) * 16);
    height: calc(var(--1px) * 16);
    flex: 0 0 auto;
    display: inline;
    vertical-align: text-bottom;
    margin-left: 0.5ch;
}
.status-meter {
    position: relative;
    width: calc(var(--1px) * 44);
    height: calc(var(--1px) * 44);
    display: grid;
    place-items: center;
    border-radius: calc(var(--1px) * 999);
    flex: 0 0 auto;
}
.status-meter-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}
.status-meter-track,
.status-meter-progress {
    fill: none;
    stroke-width: calc(var(--1px) * 4);
}
.status-meter-track {
    stroke: rgb(var(--green) / 20%);
    stroke: var(--hr-bg);
}
.status-meter-progress {
    stroke: var(--accent-green);
    stroke-linecap: round;
    stroke-dasharray: var(--meter-dash, 0) var(--meter-circ, 113);
}
.status-row.progress.is-stable .status-meter-progress {
    stroke: var(--accent-green);
}
.status-row.progress.is-limited .status-meter-progress {
    stroke: var(--accent-yellow);
}
.status-row.progress.is-critical .status-meter-progress {
    stroke: var(--accent-red);
}
.status-meter .status-icon {
    position: relative;
    z-index: 1;
}
.notification-card-section {
    position: relative;
    height: var(--stack-height, auto);
    transition: height 0.35s ease;
    will-change: height;
}
.notification-card-section .notification-card {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    transform-origin: top center;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}
.notification-card-section.is-expanded {
    overflow: visible;
}
.notification-card-section.is-expanded .notification-card {
    position: relative;
    transform: none;
    margin-top: calc(var(--1px) * 12);
}
.notification-card-section.is-expanded .notification-card:first-child {
    margin-top: 0;
}
.home-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

a.notification-card.row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}
a.notification-card.row-actions > div.row-actions-content {
    width: auto;
}
.row-actions p {
    margin: 0;
}
ul.cameras {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: calc(var(--1px) * 14);
    overflow-x: auto;
    margin-top: 40px;
}
ul.cameras li:first-child {
    margin-left: calc(var(--side-gap) + calc(var(--1px) * 24));
}
ul.cameras li:last-child {
    margin-right: calc(var(--side-gap) + calc(var(--1px) * 24));
}
ul.cameras li.is-first-visible {
    margin-left: calc(var(--side-gap) + calc(var(--1px) * 24));
}
ul.cameras li.is-last-visible {
    margin-right: calc(var(--side-gap) + calc(var(--1px) * 24));
}
ul.cameras li {
    display: grid;
    justify-items: center;
    gap: calc(var(--1px) * 8);
    min-width: min(
        calc(100% - calc(var(--1px) * 48)),
        calc(var(--max-width-main) - calc(var(--1px) * 48))
    );
    width: 100%;
    max-width: 100%;
    position: relative;
    margin-top: 0;
}
ul.cameras img,
ul.cameras video,
ul.cameras iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 0;
}
footer {
    text-align: center;
    padding: calc(var(--1px) * 24) calc(var(--1px) * 0);
}
footer a {
    font-size: calc(var(--1px) * 12);
    font-weight: 400;
    text-decoration: none;
}
footer a svg {
    width: 1ch;
    height: 1ch;
    margin-left: 0.5ch;
}
footer p {
    margin: 0;
    font-size: calc(var(--font-size) * 0.88235);
}
.home-screen > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: calc(var(--1px) * 60);
}
.home-screen div section {
    width: 100%;
}
html.page-index header p span a {
    margin-left: 0.5ch;
}
img.webcam-media + span {
    background: rgb(0 0 0 / 4%);
    font-size: calc(var(--1px) * 12);
    letter-spacing: calc(var(--1px) * 0.06);
    border-radius: calc(var(--1px) * 999);
    position: absolute;
    top: calc(var(--1px) * 16);
    right: calc(var(--1px) * 8);
    backdrop-filter: blur(calc(var(--1px) * 8));
    width: calc(var(--1px) * 16);
    height: calc(var(--1px) * 16);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
img.webcam-media + span:before {
    content: "";
    width: calc(var(--1px) * 8);
    height: calc(var(--1px) * 8);
    background: var(--accent-red);
    position: relative;
    z-index: 9;
    display: inline-flex;
    border-radius: calc(var(--1px) * 999);
    animation: webcam-recording-blink 1.2s ease-in-out infinite;
}
@keyframes webcam-recording-blink {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
.camera-live {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1px) * 12);
    /* padding-top: calc(var(--1px) * 12); */
}
.camera-live-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--1px) * 12);
    display: none;
}
.camera-live-header p {
    margin: 0;
}
.camera-live-close {
    border: 0;
    background: var(--muted-bg);
    color: var(--text-primary);
    border-radius: calc(var(--1px) * 10);
    height: calc(var(--1px) * 30);
    padding: 0 calc(var(--1px) * 12);
    font: inherit;
    cursor: pointer;
}
.camera-live-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--system-ui-radius) * 0.85);
    background: var(--muted-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera-live-stream {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--muted-bg);
    border-radius: 0;
    margin-top: 0;
}
.camera-live-status {
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    /* max-width: 92%; */
    text-wrap: balance;
    pointer-events: none;
    color: var(--muted);
}
.camera-live-status.is-error {
    color: var(--accent-red);
    text-shadow: none;
}
.camera-live-entity {
    margin: 0;
    word-break: break-all;
    display: none;
}
.status-row > div.flex-line {
    flex-direction: row;
}
.status-row > div.flex-line > div {
    text-align: left;
    gap: calc(var(--1px) * 4);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.status-row .status-row {
    background: var(--text-primary-invers-100);
    background: transparent;
    box-shadow: none;
    margin-top: calc(var(--1px) * 16);
    border-top: 1px solid;
    border-color: transparent;
    border-top-color: var(--hr-bg);
    padding: calc(var(--1px) * 16) calc(var(--1px) * 16) calc(var(--1px) * 0)
        calc(var(--1px) * 16);
    border-radius: calc(var(--1px) * 15);
    border-radius: calc(var(--1px) * 0);
}
.status-row .status-row .status-meter {
    width: calc(var(--1px) * 32);
    height: calc(var(--1px) * 32);
}
.status-row .status-row svg.status-icon {
    width: calc(var(--1px) * 14);
    height: calc(var(--1px) * 14);
}
.status-row .status-row div > span:first-child {
    font-size: calc(var(--1px) * 24);
}
svg.status-meter-ring {
    width: 100%;
    height: 100%;
    margin: 0;
}
.tasks-drawer-toggle span {
    text-indent: calc(var(--1px) * -9999);
    border-radius: calc(var(--1px) * 999);
    padding: calc(var(--1px) * 13) calc(var(--1px) * 14);
    background: var(--text-primary);
    color: var(--text-primary-invers-100);
    font-size: calc(var(--1px) * 15);
    position: relative;
    top: calc(var(--1px) * -3);
    display: none;
}
.tasks-drawer-toggle:hover span {
    display: inline;
}
.button-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-direction: row;
}
.button-group button,
.button-group a {
    width: auto;
    text-align: center;
}
.button-group.apply hr {
    margin: 0;
}
body.login button#applyBtn,
body.login .button-group.apply hr,
body.login .button-group.apply hr + .button-group a,
body.login .button-group.apply a.button.icon-target_blank,
body.login section.section.section-button-js-tasks-drawer-open {
    display: none;
}
body.login .button-group.apply .link-whatsapp {
    display: block !important;
    font-size: calc(var(--1px) * 14);
    color: var(--muted);
    text-align: center;
}
body.login .button-group.apply .link-whatsapp hr {
    display: block;
    margin-bottom: calc(var(--1px) * 8);
    margin-top: calc(var(--1px) * 6);
    opacity: 0;
}
button#tasksDrawerDaysOffTab {
    display: none;
}
.tasks-drawer .tasks-drawer-tasks .option {
    display: none;
}
.button-group.apply .button-group .button {
    color: var(--muted);
}
body.login .button-group.apply .button-group .button {
    color: var(--accent-blue);
}
body.login button#tasksDrawerLoginBtn {
    display: none;
}
button#tasksDrawerPushBtn {
    display: none;
}
body.login button#tasksDrawerPushBtn {
    display: flex;
}
body.login button#tasksDrawerDaysOffTab {
    display: flex;
    align-content: center;
    align-items: center;
}
body.login .tasks-drawer .tasks-drawer-tasks {
    pointer-events: auto;
}
button svg {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    flex-grow: 0;
    flex-shrink: 0;
}
.btn-primary {
    border-color: var(--sk-button-background);
    color: white;
    background: var(--sk-button-background);
}
.btn-primary:hover,
.button.btn-primary.js-tasks-drawer-open:hover {
    border-color: var(--sk-button-background-hover);
    background: var(--sk-button-background-hover);
    color: white !important;
}

.button.js-tasks-drawer-open {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.25s;
    padding: calc(var(--1px) * 14);
    border-color: var(--hr-bg);
    border-radius: var(--system-ui-radius);
}
.button-group.apply button.button.btn-primary.js-tasks-drawer-open {
    display: none;
}
body.login .button-group.apply button.button.btn-primary.js-tasks-drawer-open {
    display: flex;
}
.button.js-tasks-drawer-open > span {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--1px) * 2);
}
.button.js-tasks-drawer-open > span span.muted {
    font-weight: 400;
    text-align: left;
}
.button.js-tasks-drawer-open svg {
    color: var(--muted);
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    transition:
        transform 0.25s,
        color 0.25s;
}

a.button.icon-target_blank svg {
    color: var(--muted);
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
}

.button.js-tasks-drawer-open:hover svg {
    color: var(--text-primary);
    transform: translateX(calc(var(--1px) * 8));
}
.tasks-drawer-tab:hover {
    background: transparent;
}
.day-task-done-by {
    display: none;
}
.day-task.show-completed .day-task-done-by {
    display: flex;
}
.day-task.is-due span.day-task-time {
    color: var(--accent-blue);
}
body.login a[href="https://maps.app.goo.gl/xe5b2ScZ24Wpn7298"] {
    display: none;
}
section.section.section-btn-primary {
    position: sticky;
    bottom: calc(var(--1px) * 6);
    z-index: 9;
}
section.section.section-btn-primary .button-group.apply {
    margin-bottom: 0;
}
section.section.section-btn-primary + section.section {
    margin-top: calc(var(--1px) * -36);
}
.contact-avatar + div p {
    margin-top: 0;
}
body.preload-off main {
    display: flex !important;
}
body.preload-off #logo {
    width: calc(var(--1px) * 68);
    height: calc(var(--1px) * 68);
    margin-top: calc(var(--1px) * 40);
}
body.scroll #logo {
    position: sticky;
    top: calc(
        env(safe-area-inset-top, calc(var(--1px) * 0)) + calc(var(--1px) * 8)
    );
    width: calc(var(--1px) * 44);
    height: calc(var(--1px) * 44);
    padding-top: calc(var(--1px) * 6);
}
body.scroll #logo > div {
    width: calc(var(--1px) * 44);
    height: calc(var(--1px) * 44);
}
@supports (corner-shape: squircle) {
    .modal-panel,
    .row-actions,
    img,
    video,
    span.quick-navigation ul li a,
    .ios-menu,
    .avatars li .contact-badge,
    section.section.section-button-js-tasks-drawer-open
        .button.js-tasks-drawer-open,
    .camera-live-player {
        corner-shape: squircle;
    }
    img.webcam-media + span {
        top: calc(var(--1px) * 20);
        right: calc(var(--1px) * 12);
    }

    .avatars li > img,
    .group-avatar img,
    .calendar-chip img,
    .button.js-tasks-drawer-open {
        corner-shape: round;
    }
}

.modal-panel.is-camera-live-panel {
    max-width: calc(var(--max-width-main) * 1.49);
}

button.btn-tgbot {
    font-size: calc(var(--1px) * 12);
    min-height: calc(var(--1px) * 34);
    font-weight: var(--font-weight-medium);
    background: rgb(var(--white) / 50%);
}

section.apply-convo-card.apply-convo-card-welcome button#backBtn {
    display: none;
}