:root{--title-color: #989898;--text-color: #ffffff;--color-positive: #7cc576;--color-neutral: #ffd674;--color-negative: #f68e56;--background-color: #242424;--box-color: #333333;--widget-color: #111111;--widget-radius: 12px}html{--aura-font-family: 'Source Sans Pro',sans-serif;--aura-base-color: var(--widget-color);--aura-body-text-color: var(--text-color);background-color: var(--background-color);color: var(--text-color)}vaadin-dashboard-widget{--vaadin-dashboard-widget-border-width: 0;--vaadin-dashboard-widget-shadow: none;--vaadin-dashboard-widget-background: var(--widget-color);border: none !important;border-radius: var(--widget-radius);overflow: hidden}vaadin-dashboard-widget::part(header){border-bottom: 1px solid var(--title-color);padding: 0.4em 0.8em;min-height: 2.6em}vaadin-dashboard-widget::part(title){font-size: 14px;font-weight: bold;text-transform: uppercase;color: var(--title-color)}vaadin-dashboard-widget::part(content){padding: 0}vaadin-dashboard-widget.addwidget-tile::part(header){display: none}vaadin-dashboard-widget.addwidget-tile[editable]{animation: none}vaadin-dashboard-widget::part(resize-button){display: none}vaadin-dashboard-widget::part(remove-button){color: #ffffff;background: var(--color-negative);border-radius: 50%}@keyframes mqtt-jiggle{0%{transform: rotate(-0.4deg)}50%{transform: rotate(0.4deg)}100%{transform: rotate(-0.4deg)}}vaadin-dashboard-widget[editable]{animation: mqtt-jiggle 0.3s ease-in-out infinite}@media (prefers-reduced-motion: reduce){vaadin-dashboard-widget[editable]{animation: none}}.mqtt-widget{position: relative;width: 100%;height: 100%;background-color: transparent}.mqtt-message-success,.mqtt-message-failure{display: block;font-size: 24px;text-align: center;color: #676767}.config,.save,.cancel{width: 32px;min-width: 32px;height: 32px;padding: 0;color: var(--title-color);--vaadin-button-background: transparent;--vaadin-button-border-width: 0;--vaadin-button-border-radius: 0}.config:hover,.save:hover,.cancel:hover{color: var(--text-color)}.config-controls{display: flex;gap: 4px}.mqtt-dashboard{position: relative}.mqtt-dashboard .dashboard-controls{position: absolute;bottom: 24px;right: 24px;z-index: 3;display: flex;gap: 8px}.mqtt-dashboard .dashboard-controls vaadin-button{color: var(--title-color);--vaadin-button-background: var(--box-color);--vaadin-button-border-width: 0}.mqtt-dashboard .dashboard-controls vaadin-button:hover{color: var(--text-color)}.mqtt-dashboard .dashboard-rearrange.active{color: var(--text-color);--vaadin-button-background: var(--color-neutral)}.mqtt-dashboard .dashboard-save{color: var(--text-color);--vaadin-button-background: var(--accent-color,#7cc576)}.mqtt-dashboard .dashboard-save[disabled]{opacity: 0.5}.mqtt-widget .addwidget{width: 100%;height: 100%;color: #989898;font-size: 196px;--vaadin-button-background: transparent;--vaadin-button-border-width: 0;--vaadin-button-border-radius: 0}.mqtt-widget .addwidget:hover{color: #e7e7e7}.mqtt-widget .addwidget vaadin-icon{width: 0.7em;height: 0.7em}.mqtt-config{--aura-base-size: 12;--aura-font-size-m: 0.8125rem;--aura-font-size-s: 0.75rem;font-size: 0.8125rem;max-height: 80vh;overflow-y: auto;padding-right: 0.5em}.mqtt-value,.mqtt-text{display: block;box-sizing: border-box;max-width: 100%;font-size: 9em;text-align: center;padding: 5% 6%;white-space: nowrap;text-fit: shrink;overflow: hidden}.mqtt-unit{display: block;font-size: 2.8em;text-align: center;line-height: 1em;margin-top: -0.8em;color: #989898}.mqtt-widget .flipper,.mqtt-widget .front,.mqtt-widget .back{height: 100%}.mqtt-widget vaadin-grid{--aura-base-color: var(--widget-color);--aura-body-text-color: var(--text-color);--vaadin-grid-background: transparent;--vaadin-grid-cell-background: transparent;background: transparent;color: var(--text-color);border: none}.mqtt-list::part(cell){background: transparent;border-color: var(--box-color)}.mqtt-list::part(header-cell){background: transparent;color: var(--title-color);text-transform: uppercase}vaadin-map{--vaadin-map-border-radius: 0}.gauge-value{text-align: center;color: var(--text-color)}.gauge-value .value{font-size: 4em}.gauge-value .unit{font-size: 1.5em}.labels .labelcell{flex: 1;display: flex;padding: 0}.labels .value{width: 100%;height: 100%;background-color: var(--box-color);color: var(--title-color);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;overflow: hidden}.labels .value.current{color: var(--text-color)}.labels .value.nc{background-color: var(--color-neutral)}.labels .value.up{background-color: var(--color-positive)}.labels .value.down{background-color: var(--color-negative)}.labels .number{font-size: 3em;line-height: 1em}.labels .caption{color: inherit;text-align: center;text-transform: uppercase;font-size: 0.7em}.landing{max-width: 900px;margin: 0 auto;padding: 64px 24px 48px;box-sizing: border-box}.landing-hero{text-align: center;margin-bottom: 56px}.landing-hero h1{font-size: clamp(2rem,5vw,3.25rem);line-height: 1.1;margin: 0 0 0.5em;color: var(--text-color)}.landing-lead{color: var(--title-color);font-size: 1.2rem;line-height: 1.5;max-width: 640px;margin: 0 auto 1.75em}.landing-hero-shot-wrap{max-width: 1000px;margin: 0 auto 40px;filter: drop-shadow(0 24px 50px rgba(0,0,0,0.55))}.landing-hero-shot{display: block;width: 100%;height: auto;border-radius: var(--widget-radius);-webkit-mask-image: linear-gradient(to bottom,#000 82%,transparent 100%);mask-image: linear-gradient(to bottom,#000 82%,transparent 100%)}.landing-features{display: grid;grid-template-columns: repeat(auto-fit,minmax(240px,1fr));gap: 16px;margin-bottom: 56px}.landing-feature{background: var(--widget-color);border-radius: var(--widget-radius);padding: 24px}.landing-feature h3{margin: 0 0 0.5em;color: var(--text-color)}.landing-feature p{margin: 0;color: var(--title-color);line-height: 1.5}.landing-create{background: var(--box-color);border-radius: var(--widget-radius);padding: 32px;text-align: center;margin-bottom: 40px}.landing-create h2{margin: 0 0 0.4em;color: var(--text-color)}.landing-create p{color: var(--title-color);margin: 0 0 1.25em}.landing-create-row{display: flex;gap: 8px;justify-content: center;align-items: stretch;flex-wrap: wrap}.landing-create-field{min-width: 260px}.landing-create-button{font-size: 1.15rem;font-weight: 700;padding: 0.2em 1.6em;color: var(--text-color);--vaadin-button-background: var(--color-positive)}.landing-aside{display: inline-block;margin-top: 1em;color: var(--title-color)}.landing-footer{text-align: center;margin-top: 24px}.landing-madewith{display: inline-flex;align-items: center;gap: 0.5em;color: var(--text-color);font-weight: 600;text-decoration: none;margin-bottom: 0.5em}.landing-vaadin-logo{height: var(--aura-font-size-m);width: auto;display: block;position: relative;top: 1px}.landing-madewith:hover span{text-decoration: underline}.landing-credit{display: block;color: var(--title-color);font-size: 0.85rem}