#toasts {
	position: fixed;
	right: 10px;
	top: 5px;
	z-index: 1001;
	top: calc(5px + var(--top, 0px));
}
#toasts > * {
	background-color: #000A;
	border-radius: 10px;
	clear: both;
	color: white;
	cursor: zoom-out;
	float: right;
	margin-top: 5px;
	padding: 3px 6px;
}
.agents {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.agent {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-left: 3px solid rgba(122, 160, 255, .5);
	border-radius: 10px;
	color: #FFF;
	display: block;
	padding: 7px 10px;
	text-decoration: none;
}
.agent:hover {
	background: rgba(255, 255, 255, .12);
}
.agent.live {
	border-left-color: #5BE39A;
}
.agent b {
	display: block;
	font: 600 12.5px/1.25 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.agent .meta {
	display: flex;
	gap: 6px;
	margin-top: 2px;
	overflow: hidden;
}
.agent .meta span {
	color: rgba(255, 255, 255, .5);
	font: 500 10.5px/1.4 system-ui, sans-serif;
	white-space: nowrap;
}
.agent .dir {
	overflow: hidden;
	text-overflow: ellipsis;
}
.agent .who,
.agent .branch {
	background: rgba(255, 255, 255, .08);
	border-radius: 5px;
	flex: 0 0 auto;
	padding: 0 5px;
}
.agent .when {
	flex: 0 0 auto;
	margin-left: auto;
}
.agent.live .when {
	color: #5BE39A;
}
.agents-block .agentnew-open {
	background: rgba(255, 255, 255, .06);
	border: 1px dashed rgba(255, 255, 255, .28);
	color: rgba(255, 255, 255, .85);
	flex: 0 0 auto;
	font: 600 12.5px/1 system-ui, sans-serif;
	margin-top: 8px;
	text-transform: none;
}
.agentnew {
	background: #1B1230;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
	color: #FFF;
	padding: 20px;
	width: min(600px, 92vw);
}
.agentnew::backdrop {
	background: rgba(6, 4, 14, .62);
}
.agentnew h3 {
	font: 700 17px/1.2 system-ui, sans-serif;
	margin: 0 0 14px;
}
.agentnew .fields {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
.agentnew label {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.agentnew label.wide {
	grid-column: 1 / -1;
}
.agentnew label span {
	color: rgba(255, 255, 255, .6);
	font: 600 11.5px/1 system-ui, sans-serif;
}
.agentnew select,
.agentnew input,
.agentnew textarea {
	appearance: none;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	color: #FFF;
	font: 500 14px/1.4 system-ui, sans-serif;
	padding: 9px 11px;
}
.agentnew textarea {
	min-height: 140px;
	resize: vertical;
}
.agentnew option {
	background: #1B1230;
}
.agentnew .actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}
.agentnew .actions button {
	flex: 0 0 auto;
	font: 600 13px/1 system-ui, sans-serif;
	padding: 10px 18px;
	text-transform: none;
}
.agentnew .actions .agentnew-start {
	background: linear-gradient(140deg, rgba(122, 160, 255, .7), rgba(159, 107, 255, .8));
	color: #FFF;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	box-sizing: border-box;
}
body.desktop {
	background: #0B0716 url(/phome.jpg) center center / cover fixed;
	color: #FFF;
	font: 400 15px/1.35 system-ui, sans-serif;
	margin: 0;
	min-height: 100vh;
}
#toasts,
#toasts * {
	font-family: system-ui, sans-serif;
}
body.desktop::before {
	background: linear-gradient(165deg, rgba(58, 20, 98, .84) 0%, rgba(20, 12, 40, .78) 45%, rgba(10, 7, 22, .92) 100%);
	content: '';
	inset: 0;
	position: fixed;
	z-index: 0;
}
.desk {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100vh;
	margin: 0 auto;
	max-width: 1400px;
	overflow: hidden;
	padding: 12px 18px 14px;
	position: relative;
	z-index: 1;
}
.columns {
	align-items: stretch;
	display: grid;
	flex: 1 1 auto;
	gap: 12px;
	grid-template-columns: 1fr 1.3fr 1fr;
	min-height: 0;
}
.col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	max-height: 100%;
	min-width: 0;
	overflow: hidden;
}
.col::-webkit-scrollbar {
	display: none;
}
.block {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	padding: 12px 14px;
}
.agents-block {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	max-height: 548px;
	min-height: 0;
	padding-bottom: 10px;
}
.agents-block .agents {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}
.agents-block .agent {
	padding: 4px 9px;
}
.agents-block .agent b {
	font-size: 12px;
}
.agents-block .agent .meta {
	font-size: 10px;
}
.agents-block .agent .meta span {
	font-size: 10px;
}
.agents-block .agent .branch {
	display: none;
}
.block h2 {
	color: rgba(255, 255, 255, .6);
	font: 600 12.5px/1 system-ui, sans-serif;
	letter-spacing: .06em;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.grid {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}
.item {
	align-items: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: #FFF;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: 84px;
	padding: 9px 6px;
	position: relative;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}
.item:hover,
.item:focus-visible {
	background: linear-gradient(140deg, rgba(122, 160, 255, .38), rgba(159, 107, 255, .45));
	border-color: rgba(190, 165, 255, .55);
	outline: none;
}
.glyph {
	font-size: 30px;
	line-height: 1;
}
.floors .floor + .floor {
	margin-top: 12px;
}
.floors h3 {
	color: rgba(255, 255, 255, .5);
	font: 600 11px/1 system-ui, sans-serif;
	letter-spacing: .06em;
	margin: 0 0 6px;
	text-transform: uppercase;
}
.block.away .device .actions,
.block.away .media button {
	opacity: .4;
	pointer-events: none;
}
.away-note {
	color: rgba(255, 255, 255, .6);
	font: 500 12px/1.3 system-ui, sans-serif;
	margin: -4px 0 10px;
}
.floors div.devices {
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.guesthead {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 4px;
	width: 100%;
}
.desk.guest:has(.columns > .col:only-child) .guesthead {
	max-width: 520px;
}
.guesthead b {
	font: 700 18px/1.1 system-ui, sans-serif;
}
.guesthead .dictate-open {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	color: #FFF;
	flex: 0 0 auto;
	font: 600 13px/1 system-ui, sans-serif;
	padding: 9px 13px;
	text-decoration: none;
}
.columns:has(> .col:nth-child(2):last-child) {
	grid-template-columns: 1fr 1.3fr;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
}
.columns:has(> .col:only-child) {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}
.block .card.scan {
	background: none;
	border: 0;
	padding: 0;
}
.item .key.count {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
.item.tree .glyph {
	font-size: 26px;
	line-height: 32px;
}
.item .label {
	font-size: 12.5px;
	min-width: 0;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
img.glyph {
	border-radius: 8px;
	height: 34px;
	object-fit: contain;
	width: 34px;
}
.label {
	display: -webkit-box;
	font: 500 10px/1.15 system-ui, sans-serif;
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.key {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-radius: 50%;
	font: 700 11px/20px system-ui, sans-serif;
	height: 20px;
	left: 6px;
	position: absolute;
	text-align: center;
	top: 6px;
	width: 16px;
}
.block .cams {
	grid-template-columns: 1fr 1fr;
}
.block .cam img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.weather {
	align-items: center;
	display: flex;
	gap: 12px;
	align-items: center;
	border-radius: 16px;
	color: #FFF;
	display: flex;
	gap: 9px;
	min-width: 0;
	overflow: hidden;
	padding: 7px 12px;
	text-decoration: none;
}
.wicon {
	font-size: 34px;
	line-height: 1;
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
}
.wmid {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	overflow: hidden;
}
.wtemp {
	align-items: baseline;
	display: flex;
	gap: 2px;
	align-items: baseline;
	display: flex;
	gap: 2px;
}
.wtemp b {
	font: 700 30px/1 system-ui, sans-serif;
	letter-spacing: -1px;
}
.block .wdeg {
	font: 600 16px/1 system-ui, sans-serif;
}
.block .wcond {
	font: 500 12px/1.3 system-ui, sans-serif;
}
.light {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
.light .device {
	display: contents;
}
.light .device header,
.light .device > div:not(.actions) {
	display: none;
}
.light .device .actions {
	display: flex;
	flex: 1;
	gap: 6px;
	min-width: 0;
}
.block .tiles {
	gap: 6px;
}
.block .tiles button {
	min-height: 64px;
}
.block .tiles button::before {
	font-size: 16px;
	height: 28px;
	width: 28px;
}
.block .tiles button::after {
	font-size: 11px;
}
.block .light button[data-action="aan"],
.block .light button[data-action="uit"] {
	display: none;
}
.block .light button[data-label] {
	font-size: 0;
}
.block .light button[data-label]::after {
	content: attr(data-label);
	font: 600 11px/1.1 system-ui, sans-serif;
}
html.shell body.desktop,
body.desktop.shell {
	background: transparent;
}
html.shell body.desktop::before,
body.desktop.shell::before {
	display: none;
}
body.desktop .media {
	flex-wrap: nowrap;
	min-width: 0;
}
body.desktop .media .track {
	flex: 1 1 auto;
	min-width: 0;
}
body.desktop .media button {
	flex: 0 0 auto;
	min-width: 34px;
	padding: 4px 6px;
}
body.desktop .media .volume {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 3px;
}
body.desktop .media.idle .pick {
	min-width: 0;
	padding: 6px 4px;
}
body.desktop .media.idle .tv {
	min-width: 0;
	padding: 2px 3px;
}
body.desktop .media .vol {
	min-width: 20px;
	text-align: center;
}
body.desktop.shell .desk {
	max-width: 1450px;
}
body.desktop.shell .block {
	backdrop-filter: none;
	background: rgba(16, 10, 30, .78);
	border-color: rgba(255, 255, 255, .16);
}
.block button:where(:not(div.devices button)) {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	color: rgba(255, 255, 255, .78);
	cursor: pointer;
	flex: 1 1 0;
	font: 600 11px/1.1 system-ui, sans-serif;
	min-height: 38px;
	min-width: 0;
	overflow: hidden;
	padding: 4px 8px;
	text-overflow: ellipsis;
	text-transform: capitalize;
	white-space: nowrap;
}
.block button:where(:not(div.devices button)):hover {
	background: rgba(255, 255, 255, .16);
}
.block .tiles .device.active button,
.block button.active:where(:not(div.devices button)) {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .55);
	color: #FFF;
}
.block input[type="range"]:where(:not(div.devices input)) {
	-webkit-appearance: none;
	background: transparent;
	flex: 0 0 110px;
	height: 38px;
	margin: 0;
	width: 110px;
}
.block input[type="range"]:where(:not(div.devices input))::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, rgba(122, 160, 255, .75) 0 var(--fill, 50%), rgba(255, 255, 255, .09) var(--fill, 50%) 100%);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 10px;
	cursor: pointer;
	height: 38px;
	width: 100%;
}
.block input[type="range"]:where(:not(div.devices input))::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: #FFF;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	cursor: pointer;
	height: 20px;
	margin-top: 9px;
	width: 20px;
}
.media {
	align-items: center;
	display: flex;
	gap: 8px;
	min-height: 40px;
}
.media .cover {
	background: rgba(255, 255, 255, .12);
	border-radius: 8px;
	flex: 0 0 40px;
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	object-fit: cover;
	text-align: center;
	width: 40px;
	background: rgba(255, 255, 255, .12);
	border-radius: 8px;
	flex: 0 0 38px;
	font-size: 16px;
	height: 38px;
	line-height: 38px;
	object-fit: cover;
	text-align: center;
	width: 38px;
}
.media .track {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.media .track b,
.media .track span {
	font: 600 11.5px/1.25 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 11px/1.2 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.media .track span {
	color: rgba(255, 255, 255, .62);
	font-weight: 500;
	color: rgba(255, 255, 255, .62);
	font-weight: 500;
}
.media button {
	flex: 0 0 40px;
	flex: 0 0 38px;
	padding: 0;
}
.quiet {
	color: rgba(255, 255, 255, .55);
	font: 500 12px/1.3 system-ui, sans-serif;
}
.search {
	flex: 0 0 auto;
	margin-top: auto;
	padding: 8px 14px;
}
.heating {
	display: flex;
	gap: 6px;
}
.heating .device {
	display: contents;
}
.heating .device header,
.heating .device > div:not(.actions) {
	display: none;
}
.heating .device .actions {
	display: flex;
	flex: 1;
	gap: 6px;
	min-width: 0;
}
.reading {
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	display: flex;
	flex: 1;
	font: 600 11px/1 system-ui, sans-serif;
	gap: 6px;
	justify-content: space-between;
	min-height: 38px;
	padding: 0 10px;
}
.reading b {
	color: rgba(255, 255, 255, .62);
	font-weight: 500;
}
.media .volume,
.stepper {
	align-items: center;
	display: flex;
	gap: 4px;
}
.media .vol,
.stepper .val {
	font: 600 12px/1 system-ui, sans-serif;
	min-width: 30px;
	text-align: center;
}
.stepper button {
	flex: 0 0 34px;
}
.query {
	background: none;
	border: 0;
	color: #FFF;
	font: 400 15px/1 system-ui, sans-serif;
	outline: none;
	padding: 10px 0;
	width: 100%;
	background: none;
	border: 0;
	color: #FFF;
	flex: 1;
	font: 400 13.5px/1 system-ui, sans-serif;
	min-width: 0;
	outline: none;
	padding: 8px 0;
	touch-action: none;
}
.query::placeholder {
	color: rgba(255, 255, 255, .45);
	color: rgba(255, 255, 255, .5);
}
.results {
	display: none;
	max-height: 46vh;
	overflow-y: auto;
	display: none;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.desk.searching .results {
	display: block;
	margin-top: 8px;
}
.desk.searching .columns {
	display: none;
}
.list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.row {
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	color: #FFF;
	display: flex;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 14px;
	text-decoration: none;
	align-items: stretch;
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 13px;
	color: #FFF;
	display: flex;
	min-height: 50px;
	overflow: hidden;
	text-decoration: none;
}
.row:hover {
	background: rgba(255, 255, 255, .13);
}
.state {
	color: rgba(255, 255, 255, .55);
	font: 400 12px/1 system-ui, sans-serif;
}
.empty {
	color: rgba(255, 255, 255, .6);
	font: 400 13px/1.4 system-ui, sans-serif;
	margin: 6px 2px;
	color: rgba(255, 255, 255, .6);
	font: 400 13px/1.4 system-ui, sans-serif;
	margin: 4px 2px;
}
.answer {
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	font: 400 14px/1.55 system-ui, sans-serif;
	margin: 0;
	padding: 12px 14px;
	white-space: pre-wrap;
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	color: #FFF;
	font: 400 14px/1.5 system-ui, sans-serif;
	margin: 0;
	padding: 12px 14px;
	white-space: pre-wrap;
}
.resident .home .tiles {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.resident .home .light,
.resident .home .curtain {
	margin-top: 6px;
}
.resident .home .tiles + .light,
.resident .home .tiles + .curtain {
	margin-top: 8px;
}
.resident .home .light .device.metstanden::before,
.resident .curtain .device::before {
	align-self: center;
	color: rgba(255, 255, 255, .78);
	content: attr(data-label);
	flex: 1 1 0;
	font: 600 11px/1.2 system-ui, sans-serif;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.resident .home .light .device.metstanden::before {
	flex: 0 0 76px;
}
.resident .curtain {
	display: flex;
	gap: 6px;
}
.resident .curtain .device {
	display: contents;
}
.resident .curtain .device header,
.resident .curtain .device > div:not(.actions) {
	display: none;
}
.resident .curtain .device .actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}
.resident .curtain button {
	flex: 0 0 62px;
}
.resident .curtain button[data-action="switch"] {
	display: none;
}
.resident .amp {
	margin-top: 8px;
}
.resident .amp button[data-action="bluetooth"] {
	order: 1;
}
.resident .amp button[data-action="FM"] {
	order: 2;
}
.resident .amp button[data-action="cast"] {
	order: 3;
}
.resident .amp button[data-action="zachter"] {
	order: 4;
}
.resident .amp button[data-action="harder"] {
	order: 5;
}
.resident .amp button[data-action="uit"] {
	display: block;
	order: 6;
}
.resident .amp button[data-action="zachter"],
.resident .amp button[data-action="harder"] {
	flex: 0 0 38px;
	font-size: 15px;
}
.resident .card.scan .scanlog {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.resident .heating {
	flex-direction: column;
	gap: 10px;
}
.resident .heating .therm {
	flex-wrap: wrap;
}
.resident .heating .therm .device::before {
	color: rgba(255, 255, 255, .55);
	content: attr(data-device);
	flex: 0 0 100%;
	font: 600 11px/1 system-ui, sans-serif;
	order: -1;
}
.resident .guesthead .modes .actions {
	margin-left: auto;
}
.block.away .tiles button,
.guesthead.away .modes button {
	opacity: .4;
	pointer-events: none;
}
body.desktop:not(.shell) .desk {
	height: auto;
	min-height: 100vh;
	overflow: visible;
}
body.desktop:not(.shell) .col {
	justify-content: flex-start;
	max-height: none;
	overflow: visible;
}
body.dictate {
	background: #0B0716 url(/phome.jpg) center center / cover fixed;
	margin: 0;
}
body.dictate::before {
	background: linear-gradient(165deg, rgba(58, 20, 98, .88) 0%, rgba(10, 7, 22, .94) 100%);
	content: '';
	inset: 0;
	position: fixed;
}
#dictate {
	box-sizing: border-box;
	color: #FFF;
	display: flex;
	flex-direction: column;
	font: 16px/1.5 system-ui, sans-serif;
	gap: 12px;
	height: 100dvh;
	margin: 0 auto;
	max-width: 960px;
	padding: 16px;
	position: relative;
}
#dictate header {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}
#dictate h1 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}
#dictate select,
#dictate button {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	color: #FFF;
	font: 600 14px/1 system-ui, sans-serif;
	padding: 10px 16px;
}
#dictate select option {
	background: #1A1030;
	color: #FFF;
}
#dictate button {
	cursor: pointer;
}
#dictate button:hover {
	background: rgba(255, 255, 255, .2);
}
#dictate .toggle.recording {
	background: #C0392B;
	border-color: #E74C3C;
}
#dictate .text {
	backdrop-filter: blur(10px);
	background: rgba(10, 7, 22, .55);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
	box-sizing: border-box;
	color: #FFF;
	flex: 1;
	font: 17px/1.6 system-ui, sans-serif;
	outline: none;
	padding: 16px;
	resize: none;
	width: 100%;
}
#dictate .text:focus {
	border-color: rgba(255, 184, 107, .6);
}
#dictate .interim {
	color: rgba(255, 255, 255, .55);
	font-style: italic;
	margin: 0;
	min-height: 1.5em;
}
#dictate footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#dictate .status {
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
}
#dictate .status.error {
	color: #FFB86B;
}
.fl-strip {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 14px;
	color: #FFF;
	display: block;
	padding: 9px 11px;
	text-decoration: none;
}
.fl-nodes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
}
.fl-node {
	align-items: center;
	display: flex;
	gap: 5px;
	font: 600 11px/1 system-ui, sans-serif;
	opacity: .9;
}
.fl-dot {
	background: #6DE08F;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(109, 224, 143, .7);
	display: block;
	height: 7px;
	width: 7px;
}
.fl-node.warn .fl-dot,
.fl-card.warn .fl-dot {
	background: #FFC46B;
	box-shadow: 0 0 6px rgba(255, 196, 107, .7);
}
.fl-node.down .fl-dot,
.fl-card.down .fl-dot {
	background: #FF7A7A;
	box-shadow: 0 0 6px rgba(255, 122, 122, .7);
}
.fl-bars {
	align-items: flex-end;
	display: flex;
	gap: 3px;
	height: 26px;
	margin-top: 8px;
}
.fl-bar {
	background: linear-gradient(180deg, rgba(180, 150, 255, .95), rgba(130, 100, 230, .6));
	border-radius: 3px;
	flex: 1;
	height: var(--high, 3%);
}
.fl-bar.idle {
	background: rgba(255, 255, 255, .16);
}
.fl-empty {
	color: rgba(255, 255, 255, .6);
	font: 400 12px/1.4 system-ui, sans-serif;
	margin: 4px 2px;
}
.fl-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 12px;
	touch-action: pan-y;
}
.fl-card {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 8px;
	padding: 11px 12px;
}
.fl-card-head {
	align-items: center;
	display: flex;
	gap: 7px;
}
.fl-name {
	font: 600 14px/1 system-ui, sans-serif;
}
.fl-sub {
	color: rgba(255, 255, 255, .55);
	font: 500 11px/1 system-ui, sans-serif;
	margin-left: auto;
}
.fl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.fl-chip {
	background: rgba(255, 255, 255, .1);
	border-radius: 9px;
	font: 500 10.5px/1 system-ui, sans-serif;
	opacity: .85;
	padding: 4px 7px;
}
.fl-chip.warn {
	background: rgba(255, 196, 107, .22);
	opacity: 1;
}
.fl-meters {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.fl-meter {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 62px 1fr auto;
}
.fl-meter-label {
	color: rgba(255, 255, 255, .6);
	font: 500 10.5px/1 system-ui, sans-serif;
}
.fl-meter-track {
	background: rgba(255, 255, 255, .12);
	border-radius: 4px;
	display: block;
	height: 6px;
	overflow: hidden;
}
.fl-meter-fill {
	background: linear-gradient(90deg, rgba(150, 200, 255, .9), rgba(170, 140, 255, .9));
	border-radius: 4px;
	display: block;
	height: 100%;
	width: var(--fill, 0%);
}
.fl-meter-value {
	font: 500 10.5px/1 system-ui, sans-serif;
	opacity: .8;
}
.fl-work-head {
	align-items: center;
	display: flex;
	gap: 8px;
}
.fl-card h2 {
	font: 600 15px/1 system-ui, sans-serif;
	margin: 0;
}
.fl-card h3 {
	color: rgba(255, 255, 255, .6);
	font: 600 10px/1 system-ui, sans-serif;
	letter-spacing: .04em;
	margin: 4px 0 0;
	text-transform: uppercase;
}
.fl-rows {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.fl-row {
	align-items: center;
	display: flex;
	gap: 8px;
	font: 500 12px/1.3 system-ui, sans-serif;
	padding: 3px 0;
}
.fl-row-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fl-row-name.grow {
	margin-right: auto;
}
.fl-row-lines {
	color: rgba(255, 255, 255, .45);
	font-size: 11px;
	margin-left: auto;
	white-space: nowrap;
}
.fl-count {
	background: rgba(255, 255, 255, .12);
	border-radius: 8px;
	font: 600 11px/1 system-ui, sans-serif;
	min-width: 26px;
	padding: 4px 6px;
	text-align: center;
}
.fl-log {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.fl-log-row {
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: grid;
	gap: 1px 8px;
	grid-template-columns: 1fr auto;
	padding-top: 6px;
}
.fl-log-row:first-child {
	border-top: 0;
	padding-top: 0;
}
.fl-log-repo {
	color: rgba(180, 200, 255, .9);
	font: 600 10.5px/1.2 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fl-log-time,
.fl-log-author {
	color: rgba(255, 255, 255, .45);
	font: 500 10.5px/1.2 system-ui, sans-serif;
	text-align: right;
}
.fl-log-subject {
	font: 400 12px/1.35 system-ui, sans-serif;
}
.fl-foot {
	color: rgba(255, 255, 255, .4);
	font: 500 10.5px/1 system-ui, sans-serif;
	margin: 2px 2px 0;
	text-align: center;
}
body.launcher .screen {
	display: flex;
	flex-direction: column;
	gap: 7px;
	height: 100dvh;
	margin: 0 auto;
	max-width: 520px;
	overflow: hidden;
	padding: max(6px, var(--top, 0px)) 10px calc(8px + var(--bottom, 0px));
	position: relative;
	z-index: 1;
}
body.launcher .board {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	min-height: 0;
}
body.launcher .deck {
	display: flex;
	flex: 1;
	gap: 6px;
	min-width: 0;
}
body.launcher .slots {
	display: grid;
	flex: 1;
	gap: 6px;
	grid-template-rows: repeat(4, minmax(0, 1fr));
	min-height: 0;
	min-width: 0;
}
body.launcher .slot {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 13px;
	display: flex;
	min-height: 0;
	overflow: hidden;
	padding: 6px 8px;
}
body.launcher .slot.span-2 {
	grid-row: span 2;
}
body.launcher .slot.span-4 {
	grid-row: span 4;
}
body.launcher .slot .pbody {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	min-width: 0;
	overflow: auto;
}
body.launcher .tabs {
	display: flex;
	flex: 0 0 40px;
	flex-direction: column;
	gap: 4px;
	min-height: 0;
	overflow: hidden;
}
body.launcher .tabs::-webkit-scrollbar {
	display: none;
}
body.launcher .tab {
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 11px;
	color: rgba(255, 255, 255, .6);
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	min-height: 0;
	text-decoration: none;
}
body.launcher .tab .ticon {
	font-size: 19px;
	line-height: 1;
}
body.launcher .tab.on {
	background: linear-gradient(140deg, rgba(122, 160, 255, .5), rgba(159, 107, 255, .6));
	border-color: rgba(190, 165, 255, .55);
	color: #FFF;
}
body.launcher .screen.wide {
	max-width: 1200px;
}
body.launcher .screen.wide .board {
	flex: 0 0 auto;
}
body.launcher .screen.wide .slots {
	align-items: start;
	grid-auto-rows: auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
}
body.launcher .screen.wide .slot {
	font: 500 13px/1.3 system-ui, sans-serif;
	padding: 12px 14px;
}
body.launcher .screen.wide .slot .pbody {
	justify-content: flex-start;
	overflow: visible;
}
body.launcher .screen.wide .slot.rows-2 {
	grid-row: auto;
}
body.launcher .screen.wide .cams {
	height: auto;
}
body.launcher .screen.wide .pbody button {
	font-size: 13px;
	min-height: 44px;
}
body.launcher .screen.wide .tiles button {
	font-size: 0;
	min-height: 62px;
}
body.launcher .screen.wide .tiles button::before {
	font-size: 17px;
	height: 30px;
	width: 30px;
}
body.launcher .screen.wide .tiles button::after {
	font-size: 12px;
}
body.launcher .screen.wide .frow {
	font-size: 13px;
	padding: 5px 2px;
}
body.launcher .screen.wide .fnum {
	font-size: 12px;
	min-width: 46px;
}
body.launcher .screen.wide .media .track b {
	font-size: 14px;
}
body.launcher .screen.wide .media .track span {
	font-size: 12px;
}
body.launcher .screen.wide .lower {
	flex: 1 1 auto;
	min-height: 0;
}
body.launcher .screen.wide .apps {
	flex: 1 1 auto;
	grid-auto-rows: 84px;
	grid-template-columns: repeat(6, 1fr);
	height: auto;
}
body.launcher .screen.wide .dock .query {
	font-size: 15px;
}
body.launcher .lower {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	position: relative;
}
body.launcher .apps {
	flex: 0 0 auto;
	height: 330px;
	overflow: hidden;
}
body.launcher .screen.drawer .apps {
	flex: 1 1 auto;
	height: auto;
	overflow-y: auto;
}
body.launcher .screen.drawer .lower {
	flex: 1 1 auto;
	min-height: 0;
}
body.launcher .talkpane {
	display: none;
}
body.launcher.talking .board {
	display: none;
}
body.launcher.talking .talkpane {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}
body.launcher .talkpane #talk {
	flex: 1;
	gap: 12px;
	min-height: 0;
	overflow: hidden;
}
body.launcher .talkpane #talk::before {
	background: rgba(10, 7, 22, .5);
	border-radius: 16px;
	inset: 0;
	position: absolute;
}
body.launcher .talkpane #figure {
	flex: 0 1 auto;
	height: 160px;
	width: 160px;
}
body.launcher .dock {
	flex: 0 0 auto;
	gap: 10px;
}
body.launcher .dock .query {
	flex: 1;
	min-width: 0;
}
body.launcher .dock .flashlight {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 13px;
	flex: 0 0 38px;
	font-size: 16px;
	height: 38px;
	opacity: 1;
	pointer-events: auto;
}
body.launcher .dock .flashlight.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .55);
}
body.launcher .dock .dictate-open {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 13px;
	color: #FFF;
	flex: 0 0 38px;
	font-size: 16px;
	height: 38px;
	padding: 0;
}
body.launcher .dock .dictate-open::before {
	content: '🎙';
}
body.launcher .dock .flashlight::after {
	content: none;
}
body.launcher .cams {
	display: grid;
	gap: 5px;
	grid-template-columns: 1fr 1fr;
	height: 100%;
	width: 100%;
}
body.launcher .slot .weather .wmid {
	flex: 1 0 auto;
	min-width: 58px;
}
body.launcher .slot .weather .wchips {
	align-items: flex-end;
	flex-direction: column;
	gap: 3px;
}
body.launcher .slot .heating {
	flex-direction: column;
	gap: 4px;
}
body.launcher .slot .heating .temps {
	flex: 1;
}
body.launcher .slot .heating .stepper {
	display: flex;
	gap: 4px;
}
body.launcher .slot .heating .device .actions {
	flex: 0 0 auto;
}
body.launcher .slot .heating button {
	flex: 0 0 auto;
	min-height: 30px;
	min-width: 0;
	width: 44px;
}
body.launcher .scanstrip {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
	width: 100%;
}
body.launcher .scanstrip .shots {
	display: grid;
	flex: 1;
	gap: 6px;
	grid-auto-rows: minmax(0, 1fr);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-height: 0;
}
body.launcher .scanstrip .clip {
	border-radius: 9px;
	display: block;
	min-height: 0;
	overflow: hidden;
	position: relative;
}
body.launcher .scanstrip .clip img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
body.launcher .scanstrip .clip span {
	background: rgba(0, 0, 0, .55);
	border-radius: 6px;
	bottom: 4px;
	color: #FFF;
	font: 600 10px/1 system-ui, sans-serif;
	left: 4px;
	padding: 3px 5px;
	position: absolute;
}
body.launcher .scanstrip .more {
	color: rgba(255, 255, 255, .75);
	flex: 0 0 auto;
	font: 600 12px/1 system-ui, sans-serif;
	text-decoration: none;
}
body.launcher .screen.wide .scanstrip .shots {
	grid-auto-rows: auto;
}
body.launcher .screen.wide .scanstrip .clip img {
	aspect-ratio: 16 / 9;
	height: auto;
}
body.launcher .roomtiles {
	display: grid;
	flex-shrink: 0;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.launcher .roomtiles a {
	align-items: center;
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 16px;
	color: #FFF;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	min-height: 50px;
	min-width: 0;
	padding: 6px 4px;
	text-decoration: none;
}
body.launcher .roomtiles a::before {
	align-items: center;
	background: rgba(255, 255, 255, .15);
	border-radius: 9px;
	content: attr(data-icon);
	display: flex;
	font-size: 14px;
	height: 26px;
	justify-content: center;
	width: 26px;
}
body.launcher .roomtiles a::after {
	content: attr(data-label);
	font: 600 10px/1.1 system-ui, sans-serif;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.launcher .slot .roomtiles {
	gap: 4px;
}
body.launcher .slot .roomtiles a {
	gap: 2px;
	min-height: 0;
	padding: 3px;
}
body.launcher .slot .roomtiles a::before {
	font-size: 12px;
	height: 18px;
	width: 18px;
}
body.launcher .slot .roomtiles a::after {
	font: 600 9.5px/1.1 system-ui, sans-serif;
}
body.launcher .screen.wide .slot .roomtiles a {
	gap: 5px;
	min-height: 50px;
	padding: 6px 4px;
}
body.launcher .slot .tiles button {
	font-size: 0;
	min-height: 0;
	padding: 4px;
}
body.launcher .slot .tiles button::before {
	font-size: 13px;
	height: 22px;
	width: 22px;
}
body.launcher .slot .tiles button::after {
	font: 600 9.5px/1.1 system-ui, sans-serif;
}
body.launcher .fleetrows {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
}
body.launcher .frow {
	align-items: center;
	color: #FFF;
	display: flex;
	font: 600 11px/1 system-ui, sans-serif;
	gap: 6px;
	padding: 3px 2px;
	text-decoration: none;
}
body.launcher .frow b {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.launcher .frow.down b {
	color: #FF9B9B;
}
body.launcher .fnum {
	color: rgba(255, 255, 255, .58);
	flex: 0 0 auto;
	font: 600 10px/1 system-ui, sans-serif;
	min-width: 34px;
	text-align: right;
}
body.launcher .fnum.bad {
	color: #FFC76B;
}
body.launcher .cam {
	border-radius: 9px;
}
body.launcher .gate {
	max-width: 360px;
	padding-top: 20vh;
}
body.launcher .login {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
body.launcher .login .query {
	flex: 1;
}
body.panel {
	background: #0B0716 url(/phome.jpg) center center / cover fixed;
	color: #FFF;
	margin: 0;
	min-height: 100vh;
}
body.panel::before {
	background: linear-gradient(165deg, rgba(58, 20, 98, .82) 0%, rgba(20, 12, 40, .74) 45%, rgba(10, 7, 22, .9) 100%);
	content: '';
	inset: 0;
	position: fixed;
	z-index: 0;
}
.screen {
	display: flex;
	flex-direction: column;
	gap: 7px;
	height: 100vh;
	margin: 0 auto;
	max-width: 520px;
	overflow: hidden;
	padding: max(0px, calc(var(--top, 0px) - 9px)) 12px calc(10px + var(--bottom, 0px));
	position: relative;
	z-index: 1;
}
.top {
	align-items: center;
	display: flex;
	flex: 0 0 26px;
	gap: 5px;
}
.date {
	font: 700 14px/1 system-ui, sans-serif;
	margin-right: auto;
	opacity: .92;
	text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.modes,
.modes .device,
.modes .device .actions {
	display: contents;
}
.modes .device header,
.modes .device div:not(.actions) {
	display: none;
}
.modes .device .actions {
	display: flex;
	gap: 4px;
}
.modes button {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 9px;
	color: rgba(255, 255, 255, .62);
	font: 600 10px/1 system-ui, sans-serif;
	padding: 6px 9px;
	text-transform: capitalize;
}
.modes button.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .6);
	color: #FFF;
}
.upper {
	display: grid;
	flex: 0 0 62px;
	gap: 7px;
	grid-template-columns: 104px 1fr;
}
.cams {
	align-content: center;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.cam {
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, .07);
	border-radius: 14px;
	display: block;
	min-width: 0;
	overflow: hidden;
	position: relative;
}
.cam::before {
	color: rgba(255, 255, 255, .25);
	content: '📷';
	font-size: 20px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
.camname {
	background: rgba(11, 7, 22, .7);
	border-radius: 8px;
	bottom: 6px;
	color: #FFF;
	font: 600 11px/1 system-ui, sans-serif;
	left: 6px;
	padding: 4px 7px;
	position: absolute;
}
.camview {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 180px;
}
.camview .big {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	height: auto;
	overflow: hidden;
}
.camview .thumbs {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.camview .thumb {
	aspect-ratio: 16 / 9;
	height: auto;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	position: relative;
}
.camview .more {
	color: rgba(255, 255, 255, .7);
	font: 500 13px/1 system-ui, sans-serif;
}
.cam img {
	border-radius: inherit;
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}
.weather,
.tiles button,
.dock {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
}
.wmid b {
	font: 700 27px/1 system-ui, sans-serif;
	letter-spacing: -1px;
}
.wdeg {
	font: 600 15px/1 system-ui, sans-serif;
	opacity: .65;
}
.wcond {
	font: 500 11.5px/1 system-ui, sans-serif;
	opacity: .72;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wchips {
	display: flex;
	flex-shrink: 0;
	gap: 4px;
}
.chip {
	background: rgba(255, 255, 255, .13);
	border-radius: 8px;
	font: 600 10.5px/1 system-ui, sans-serif;
	padding: 5px 7px;
	white-space: nowrap;
}
.weather-card {
	color: #FFF;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wnow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.wnowicon {
	font-size: 44px;
	line-height: 1;
}
.wnow .wchips {
	flex-wrap: wrap;
}
.whours {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.whours::-webkit-scrollbar {
	display: none;
}
.wcol {
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border-radius: 11px;
	display: flex;
	flex: 1 0 44px;
	flex-direction: column;
	gap: 4px;
	padding: 8px 4px;
}
.whour {
	font: 600 10.5px/1 system-ui, sans-serif;
	opacity: .6;
}
.wsmall {
	font-size: 17px;
	line-height: 1;
}
.wtemp2 {
	font: 700 13px/1 system-ui, sans-serif;
}
.wdays {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wrow {
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border-radius: 11px;
	display: flex;
	gap: 10px;
	padding: 9px 12px;
}
.wday {
	flex: 1 1 auto;
	font: 600 12.5px/1 system-ui, sans-serif;
	text-transform: capitalize;
}
.wrange {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}
.wlow {
	font: 600 13px/1 system-ui, sans-serif;
	opacity: .55;
}
.whigh {
	font: 700 13px/1 system-ui, sans-serif;
}
.board {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}
.controls {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}
.tiles {
	display: grid;
	flex-shrink: 0;
	gap: 8px;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}
.tiles .device,
.tiles .device .actions {
	display: contents;
}
.tiles .device header,
.tiles .device div {
	display: none;
}
.tiles button {
	align-items: center;
	border-radius: 16px;
	color: #FFF;
	display: flex;
	flex-direction: column;
	font: 600 0/1 system-ui, sans-serif;
	gap: 5px;
	justify-content: center;
	min-height: 50px;
	padding: 6px 4px;
	position: relative;
	width: 100%;
}
.tiles button:not([data-label]) {
	font-size: 10px;
}
.tiles button[data-icon]::before {
	content: attr(data-icon);
	align-items: center;
	background: rgba(255, 255, 255, .15);
	border-radius: 9px;
	display: flex;
	font-size: 14px;
	height: 26px;
	justify-content: center;
	width: 26px;
}
.tiles button[data-label]::after {
	content: attr(data-label);
	font: 600 10px/1.1 system-ui, sans-serif;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiles .device.active button,
.tiles button.active {
	background: linear-gradient(140deg, rgba(122, 160, 255, .5), rgba(159, 107, 255, .6));
	border-color: rgba(190, 165, 255, .55);
}
.tiles .device.active button::before,
.tiles button.active::before {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
}
.tiles button[data-action="aan"],
.tiles button[data-action="uit"] {
	display: none;
}
.flashlight::before {
	content: '🔦';
}
.flashlight::after {
	content: 'Zaklamp';
}
.pane {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 5px;
}
.phead {
	align-items: center;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .55);
	display: flex;
	font: 600 10.5px/1 system-ui, sans-serif;
	gap: 6px;
	letter-spacing: .04em;
	min-height: 20px;
	padding: 0 2px;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
}
.pcap {
	color: rgba(255, 255, 255, .38);
	flex: 1;
	font-weight: 500;
	letter-spacing: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}
.parrow {
	flex: 0 0 auto;
	transition: transform .2s ease;
}
.pane.open .parrow {
	transform: rotate(180deg);
}
.pbody {
	display: none;
}
.pane.open .pbody {
	display: block;
}
.pbody button,
.phone button,
.mini {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	color: rgba(255, 255, 255, .72);
	font: 600 11px/1.1 system-ui, sans-serif;
	min-height: 38px;
	padding: 4px 6px;
	text-transform: capitalize;
}
.pbody button.active,
.phone .device.active button,
.phone button.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .55);
	color: #FFF;
}
.post,
.media {
	align-items: center;
	display: flex;
	gap: 6px;
}
.post span,
.quiet {
	color: rgba(255, 255, 255, .62);
	flex: 1;
	font: 500 12px/1.2 system-ui, sans-serif;
	min-width: 0;
}
.post button {
	flex: 0 0 auto;
	padding: 4px 12px;
	text-transform: none;
}
.light,
.heating,
.phone {
	display: flex;
	gap: 4px;
}
.heating .therm {
	align-items: center;
	display: flex;
	flex: 1;
	gap: 4px;
	min-width: 0;
}
.heating .temps {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 42px;
}
.heating .now {
	color: #fff;
	font: 700 13px/1 system-ui, sans-serif;
}
.heating .set {
	color: rgba(255, 255, 255, .62);
	font: 600 11px/1 system-ui, sans-serif;
}
.heating .temps.heats .set::before {
	content: '🔥 ';
}
.heating button[data-action="automaat"] {
	flex: 0 0 auto;
	font-size: 0;
	min-width: 42px;
}
.heating button[data-action="automaat"]::after {
	content: '⟳';
	font: 600 15px/1 system-ui, sans-serif;
}
.light .device,
.heating .device,
.phone .device {
	display: contents;
}
.light .device header,
.light .device > div:not(.actions),
.heating .device header,
.heating .device > div:not(.actions),
.phone .device header,
.phone .device > div:not(.actions) {
	display: none;
}
.light .device .actions,
.heating .device .actions,
.phone .device .actions {
	display: flex;
	flex: 1;
	gap: 4px;
	min-width: 0;
}
.light button,
.heating button,
.phone button {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.phone button[data-action="zoek"],
.phone button[data-action="ververs"] {
	display: none;
}
.phone button::before {
	display: block;
	font-size: 13px;
	margin-bottom: 3px;
}
.phone button[data-action="wifi"]::before {
	content: '📶';
}
.phone button[data-action="bluetooth"]::before {
	content: 'BT';
	font: 700 12px/1 system-ui, sans-serif;
}
.phone button[data-action="stil"]::before {
	content: '🔕';
}
.pbody input[type="range"] {
	-webkit-appearance: none;
	background: transparent;
	flex: 0 0 84px;
	height: 38px;
	margin: 0;
	min-width: 0;
	width: 84px;
}
.pbody input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, rgba(122, 160, 255, .75) 0 var(--fill, 50%), rgba(255, 255, 255, .09) var(--fill, 50%) 100%);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 10px;
	cursor: pointer;
	height: 38px;
	width: 100%;
}
.pbody input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: #FFF;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	cursor: pointer;
	height: 20px;
	margin-top: 9px;
	width: 20px;
}
.media .volume {
	align-items: center;
	display: flex;
	gap: 4px;
}
.media .vol {
	font: 600 11px/1 system-ui, sans-serif;
	min-width: 24px;
	text-align: center;
}
.media.idle {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.media.idle .playlist {
	display: flex;
	min-width: 0;
	position: relative;
}
.media.idle .pick {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 6px 4px;
}
.media.idle .cover {
	flex: 0 0 auto;
}
.media.idle .name {
	font: 600 10px/1.2 system-ui, sans-serif;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.media.idle .tv {
	background: rgba(0, 0, 0, .45);
	border-radius: 6px;
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1;
	min-width: 0;
	padding: 2px 3px;
	position: absolute;
	right: 3px;
	top: 3px;
}
.media.idle .quiet {
	grid-column: 1 / -1;
}
.rail {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 10px;
	flex: 0 0 34px;
	position: relative;
	touch-action: none;
}
.knob {
	background: rgba(255, 255, 255, .4);
	border-radius: 9px;
	bottom: 4px;
	left: 4px;
	position: absolute;
	right: 4px;
	top: 62%;
	transition: top .24s cubic-bezier(.4, 0, .2, 1), background .24s ease;
}
.knob::after {
	background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 1.4px, transparent 1.6px);
	background-position: center;
	background-repeat: repeat-y;
	background-size: 100% 7px;
	content: '';
	height: 21px;
	left: 0;
	position: absolute;
	right: 0;
	top: 11px;
}
.screen:not(.locked) .rail {
	background: rgba(122, 160, 255, .16);
	border-color: rgba(190, 165, 255, .5);
}
.screen:not(.locked) .knob {
	background: linear-gradient(180deg, #7AA0FF, #9F6BFF);
	top: 4px;
}
.screen.locked .tiles button:not(.flashlight),
.screen.locked .modes button,
.screen.locked .light button,
.screen.locked .light input,
.screen.locked .media button,
.screen.locked .media input,
.screen.locked .heating button,
.screen.locked .heating input,
.screen.locked .post button,
.screen.locked .phone button {
	opacity: .42;
	pointer-events: none;
}
.apps {
	align-content: start;
	display: grid;
	flex: 1 1 auto;
	gap: 0 4px;
	grid-auto-rows: 66px;
	grid-template-columns: repeat(4, 1fr);
	min-height: 0;
	overflow: hidden;
	touch-action: none;
}
.apps::-webkit-scrollbar {
	display: none;
}
.app {
	align-items: center;
	background: none;
	border: 0;
	color: #FFF;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
}
.app img {
	aspect-ratio: 1;
	border-radius: 14px;
	flex: 0 1 auto;
	height: 100%;
	max-height: 48px;
	min-height: 0;
	object-fit: contain;
	width: auto;
}
.app span {
	display: none;
	font: 400 10px/1.1 system-ui, sans-serif;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
	white-space: nowrap;
}
.app.held {
	opacity: .25;
	pointer-events: none;
}
.app.empty {
	border: 1px dashed transparent;
	border-radius: 16px;
}
.screen.dragging .app.empty {
	border-color: rgba(255, 255, 255, .22);
}
.app.target {
	background: rgba(122, 160, 255, .22);
	border-radius: 16px;
	box-shadow: inset 0 0 0 2px rgba(190, 165, 255, .75);
}
.app.ghost {
	left: 0;
	opacity: .92;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scale(1.12);
	z-index: 40;
}
.app.added::after {
	align-items: center;
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-radius: 50%;
	color: #FFF;
	content: '\2713';
	display: flex;
	font: 700 11px/1 system-ui, sans-serif;
	height: 17px;
	justify-content: center;
	position: absolute;
	right: 50%;
	top: 0;
	transform: translateX(26px);
	width: 17px;
}
.trash {
	align-items: center;
	backdrop-filter: blur(12px);
	background: rgba(60, 20, 30, .5);
	border: 1px dashed rgba(255, 140, 140, .55);
	border-radius: 12px;
	bottom: calc(10px + var(--bottom, 0px));
	color: rgba(255, 190, 190, .95);
	display: none;
	font: 600 10px/1 system-ui, sans-serif;
	justify-content: center;
	left: 12px;
	min-height: 40px;
	position: absolute;
	right: 12px;
	z-index: 30;
}
.screen.dragging .trash {
	display: flex;
}
.trash.over {
	background: rgba(255, 90, 90, .28);
	border-style: solid;
}
.dock {
	align-items: center;
	border-radius: 22px;
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
	padding: 4px 14px;
	touch-action: none;
}
.screen.searching .results {
	display: block;
}
.screen.searching .upper,
.screen.searching .board,
.screen.searching .apps {
	display: none;
}
.screen.drawer .top,
.screen.drawer .upper,
.screen.drawer .board,
.screen.drawer .dock {
	display: none;
}
.screen.drawer .apps {
	align-content: start;
	flex: 1 1 auto;
	grid-auto-rows: 66px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y;
}
.screen.drawer .app span {
	display: block;
}
.night {
	filter: brightness(.7) saturate(.85);
}
.bar {
	align-items: center;
	display: flex;
	gap: 10px;
	min-height: 40px;
}
.bar h1 {
	font: 600 19px/1 system-ui, sans-serif;
	margin: 0;
}
.back-link {
	align-items: center;
	color: #9CBAFF;
	display: flex;
	font-size: 30px;
	height: 40px;
	justify-content: center;
	text-decoration: none;
	width: 34px;
}
.rowname {
	align-items: center;
	color: #FFF;
	display: flex;
	flex: 1;
	font: 500 15px/1.2 system-ui, sans-serif;
	justify-content: space-between;
	padding: 0 8px 0 15px;
	text-decoration: none;
}
.state,
.count {
	color: rgba(255, 255, 255, .55);
	font: 400 12.5px/1 system-ui, sans-serif;
}
a.row {
	align-items: center;
	font: 500 15px/1.2 system-ui, sans-serif;
	justify-content: space-between;
	padding: 0 16px;
}
.mini {
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .14);
	border-radius: 0;
	color: #FFF;
	font: 500 13px/1 system-ui, sans-serif;
	min-width: 72px;
}
.mini.on {
	background: #4C8DFF;
	color: #06121F;
}
.sheet .device {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	padding: 14px 15px;
}
.sheet .device header {
	display: none;
}
.sheet .device div {
	color: rgba(255, 255, 255, .62);
	display: flex;
	font: 400 13.5px/1.6 system-ui, sans-serif;
	justify-content: space-between;
}
.sheet .device div b {
	color: #FFF;
	font-weight: 500;
}
.sheet .device .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.sheet .device button {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 11px;
	color: #FFF;
	font: 500 14px/1 system-ui, sans-serif;
	min-height: 46px;
	padding: 0 16px;
}
.sheet .device button.active {
	background: #4C8DFF;
	border-color: #4C8DFF;
	color: #06121F;
}
body.offline .cam img,
body.offline .weather {
	filter: grayscale(.65);
	opacity: .55;
}
body.offline .screen::after {
	background: rgba(255, 170, 90, .16);
	border: 1px solid rgba(255, 170, 90, .42);
	border-radius: 8px;
	color: #FFD9AE;
	content: 'offline';
	font: 600 10px/1 system-ui, sans-serif;
	left: 50%;
	padding: 3px 10px;
	pointer-events: none;
	position: absolute;
	top: calc(6px + var(--top, 0px));
	transform: translateX(-50%);
	z-index: 5;
}
body.portal {
	background: #0B0716 url(/phome.jpg) center center / cover fixed;
	color: #FFF;
	margin: 0;
	min-height: 100vh;
}
html.shell body.portal,
body.portal.shell {
	background: transparent;
}
html.shell body.portal::before,
body.portal.shell::before {
	display: none;
}
main.portal .card.media-card .media {
	display: flex;
	gap: 10px;
}
main.portal .card.media-card .media.idle {
	display: grid;
}
main.portal .cam-card .more {
	color: rgba(255, 255, 255, .7);
	display: inline-block;
	font: 500 13px/1 system-ui, sans-serif;
	margin-top: 10px;
}
body.portal::before {
	background: linear-gradient(165deg, rgba(58, 20, 98, .82) 0%, rgba(20, 12, 40, .74) 45%, rgba(10, 7, 22, .9) 100%);
	content: '';
	inset: 0;
	position: fixed;
	z-index: 0;
}
main.portal {
	margin: 0 auto;
	padding: max(12px, var(--top, 0px)) 14px calc(24px + var(--bottom, 0px));
	position: relative;
	z-index: 1;
}
main.portal:has(> .panel > .card:not(.scan)) {
	max-width: 1100px;
}
main.portal .find {
	margin-bottom: 12px;
}
main.portal .find input {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	color: #FFF;
	font: 600 14px/1 system-ui, sans-serif;
	padding: 11px 13px;
	width: 100%;
}
main.portal .head .leave {
	align-items: center;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	color: #FFF;
	display: flex;
	flex-shrink: 0;
	font: 400 26px/1 system-ui, sans-serif;
	height: 44px;
	justify-content: center;
	margin-left: auto;
	text-decoration: none;
	width: 44px;
}
main.portal .head .leave:hover {
	background: rgba(255, 255, 255, .2);
}
main.portal .head {
	align-items: center;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	padding: 14px 16px;
}
main.portal .head h1 {
	font: 700 19px/1.2 system-ui, sans-serif;
	margin: 0;
}
main.portal .titles {
	min-width: 0;
}
main.portal .glyph {
	flex: 0 0 auto;
	font-size: 26px;
	line-height: 1;
}
main.portal .sub {
	color: rgba(255, 255, 255, .58);
	display: block;
	font: 500 12px/1.35 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
main.portal .grid {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
main.portal .tile {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	color: #FFF;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 84px;
	overflow: hidden;
	padding: 12px;
	text-decoration: none;
}
main.portal .tile b {
	font: 600 13px/1.25 system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
main.portal .tile.on {
	border-color: rgba(255, 199, 107, .55);
}
main.portal .tile.has-shot {
	padding: 0;
	position: relative;
}
main.portal .tile.has-shot b,
main.portal .tile.has-shot .sub {
	padding: 0 10px;
}
main.portal .tile.has-shot b {
	padding-top: 8px;
}
main.portal .tile.has-shot .sub {
	padding-bottom: 10px;
}
main.portal .shot {
	aspect-ratio: 16 / 10;
	display: block;
	object-fit: cover;
	width: 100%;
}
main.portal .card {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	padding: 14px;
}
main.portal .big {
	border-radius: 12px;
	display: block;
	width: 100%;
}
main.portal .empty {
	color: rgba(255, 255, 255, .5);
	font: 500 13px/1 system-ui, sans-serif;
}
html.morph::view-transition-group(morph) {
	animation-duration: 340ms;
	animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
html.morph::view-transition-old(root) {
	animation: 120ms ease both portal-out;
}
html.morph::view-transition-new(root) {
	animation: 240ms ease both portal-in;
}
html.morph.forward::view-transition-old(morph) {
	animation: 100ms ease both portal-out;
}
html.morph.forward::view-transition-new(morph) {
	animation: 240ms ease both portal-in;
}
html.morph.back::view-transition-old(morph) {
	animation: 320ms cubic-bezier(.32, .72, 0, 1) both portal-collapse;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
	transform-origin: center;
}
html.morph.back::view-transition-new(morph) {
	animation: 320ms linear both portal-late;
}
.card.scan {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.card.scan p {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.card.scan p b {
	flex: 1 0 100%;
	font: 600 12px/1.2 system-ui, sans-serif;
	opacity: .7;
}
.card.scan .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.card.scan .act {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	color: #fff;
	font: 600 13px/1 system-ui, sans-serif;
	padding: 9px 14px;
}
.card.scan .act.on {
	background: rgba(86, 196, 122, .28);
	border-color: rgba(86, 196, 122, .7);
}
.card.scan .more {
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	margin-right: 12px;
}
.scanlog {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.clipview {
	align-items: center;
	background: rgba(6, 4, 14, .92);
	box-sizing: border-box;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 100;
}
.clipview video {
	background: #000;
	border-radius: 12px;
	max-height: 100%;
	max-width: 100%;
}
.clipview button {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 12px;
	color: #FFF;
	cursor: pointer;
	font: 600 16px/1 system-ui, sans-serif;
	padding: 10px 14px;
	position: absolute;
	right: 16px;
	top: 16px;
}
.scanlog .event {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	border-left: 3px solid transparent;
	border-radius: 10px;
	overflow: hidden;
}
.scanlog .event.alert {
	border-left-color: #56c47a;
}
.scanlog .event img {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
}
.scanlog .event.rated-yes {
	border-left-color: #56c47a;
}
.scanlog .meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font: 500 12px/1.2 system-ui, sans-serif;
	gap: 6px;
	padding: 6px 8px;
}
.scanlog .meta b {
	font-weight: 700;
}
.scanlog .meta .when {
	opacity: .7;
}
.scanlog .meta .flag {
	background: rgba(86, 196, 122, .25);
	border-radius: 6px;
	padding: 2px 6px;
}
.scanlog .meta .verdict {
	opacity: .7;
}
.scanlog .rate {
	display: flex;
	gap: 6px;
	padding: 0 8px 8px;
}
.scanlog .rate a {
	background: rgba(255, 255, 255, .08);
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	padding: 5px 9px;
	text-decoration: none;
}
.scanlog .rate a.on {
	background: rgba(86, 196, 122, .35);
}
body.camera {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	background: black;
	margin: 0;
	padding: 0;
	padding-bottom: var(--bottom, 0px);
	padding-top: var(--top, 0px);
}
body.camera img.camera {
	cursor: pointer;
	float: left;
	object-fit: cover;
	transition: 500ms;
	width: 100%;
}
body.devices {
	background: url(/background.jpg) fixed center center;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	background-size: cover;
	color: #CCC;
	min-height: 100vh;
	padding: 10px 20px;
	padding-bottom: max(10px, var(--bottom, 0px));
	padding-top: max(10px, var(--top, 0px));
	margin: 0;
}
body.devices h2 {
	margin: 6px 0;
	text-shadow: 2px 2px 1px black;
}
body.devices a {
	color: #CCC;
}
main.portal div.devices,
section.floors div.devices {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}
body.devices div.devices,
main.portal div.devices,
section.floors div.devices {
	display: grid;
	grid-gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
body.devices div.devices .device,
main.portal div.devices .device,
section.floors div.devices .device {
	background-color: rgba(0, 0, 0, .5);
	backdrop-filter: blur(3px);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	line-height: 160%;
	padding: 10px;
	position: relative;
}
body.devices div.devices .device div {
	white-space: nowrap;
}
main.portal div.devices .device div {
	white-space: nowrap;
}
section.floors div.devices .device div {
	white-space: nowrap;
}
body.devices div.devices .device header,
main.portal div.devices .device header,
section.floors div.devices .device header {
	border-bottom: 1px solid gray;
	font-weight: bold;
	margin-bottom: 4px;
	padding-bottom: 4px;
}
body.devices div.devices .device b,
main.portal div.devices .device b,
section.floors div.devices .device b {
	display: inline-block;
	font-size: 80%;
	margin: 0 10px 0 0;
	width: 40%;
}
body.devices div.devices .device.active,
main.portal div.devices .device.active,
section.floors div.devices .device.active {
	background-color: rgba(0, 128, 0, .75);
	color: white;
}
body.devices div.devices .device .tilecam,
main.portal div.devices .device .tilecam,
section.floors div.devices .device .tilecam {
	border-radius: 6px;
	margin: 4px 0;
}
body.devices div.devices .device select,
main.portal div.devices .device select,
section.floors div.devices .device select {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255, 255, 255, .12);
	border: 0;
	border-radius: 4px;
	color: inherit;
	font: inherit;
	max-width: 116px;
	padding: 0 6px;
}
body.devices div.devices .device select option {
	color: black;
}
main.portal div.devices .device select option {
	color: black;
}
section.floors div.devices .device select option {
	color: black;
}
body.devices div.devices .device .actions,
main.portal div.devices .device .actions,
section.floors div.devices .device .actions {
	display: flex;
	flex-wrap: wrap-reverse;
	margin: auto -7px -7px;
	padding-top: 8px;
}
body.devices div.devices .device .actions > *,
main.portal div.devices .device .actions > *,
section.floors div.devices .device .actions > * {
	flex: 1;
	margin: 1px;
	min-width: 20%;
	padding: 4px 0;
}
body.devices div.devices .device .actions button,
main.portal div.devices .device .actions button,
section.floors div.devices .device .actions button {
	background-color: #222;
	border: 0;
	border-radius: 3px;
	color: white;
	cursor: pointer;
}
body.devices div.devices .device.metstanden .actions,
main.portal div.devices .device.metstanden .actions,
section.floors div.devices .device.metstanden .actions {
	flex-wrap: wrap;
}
body.devices div.devices .device.metstanden .actions button[data-action^="stand/"],
main.portal div.devices .device.metstanden .actions button[data-action^="stand/"],
section.floors div.devices .device.metstanden .actions button[data-action^="stand/"] {
	min-width: 30%;
}
body.devices div.devices .device .actions button[data-action="switch"] {
	background-color: green;
}
main.portal div.devices .device .actions button[data-action="switch"] {
	background-color: green;
}
section.floors div.devices .device .actions button[data-action="switch"] {
	background-color: green;
}
body.devices div.devices .device .actions button.active {
	background-color: #A7223C;
}
main.portal div.devices .device .actions button.active {
	background-color: #A7223C;
}
section.floors div.devices .device .actions button.active {
	background-color: #A7223C;
}
body.devices div.devices .device .actions input.helderheid {
	min-width: 100px;
}
main.portal div.devices .device .actions input.helderheid {
	min-width: 100px;
}
section.floors div.devices .device .actions input.helderheid {
	min-width: 100px;
}
body.devices input[type="range"],
main.portal div.devices input[type="range"],
section.floors div.devices input[type="range"] {
	-webkit-appearance: none;
	background-color: transparent;
}
body.devices input[type="range"]::-webkit-slider-runnable-track,
main.portal div.devices input[type="range"]::-webkit-slider-runnable-track,
section.floors div.devices input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, black, yellow);
	border: 1px solid #000;
	border-radius: 5px;
	cursor: pointer;
	width: 100%;
	height: 10px;
}
body.devices input[type="range"]::-webkit-slider-thumb,
main.portal div.devices input[type="range"]::-webkit-slider-thumb,
section.floors div.devices input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: white;
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
	margin-top: -9px;
	width: 12px;
	height: 20px;
}
body.devices .views {
	background-color: #222;
	border-radius: 6px;
	bottom: 0;
	padding: 6px;
	position: fixed;
	right: 10px;
	text-align: center;
}
body.devices .views a {
	border-radius: 6px;
	padding: 6px;
}
body.devices .views a:hover {
	background-color: red;
	text-decoration: none;
}
body.devices div.devices .device.shake,
main.portal div.devices .device.shake,
section.floors div.devices .device.shake {
	animation: devices-shake 600ms 1;
}
body.scan.log {
	background-color: black;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	color: white;
	display: grid;
	font-size: 12px;
	grid-gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	margin: 0;
	padding: 10px;
	padding-bottom: max(10px, var(--bottom, 0px));
	padding-top: max(10px, var(--top, 0px));
}
body.scan.log .scanrow {
	border-left: 3px solid transparent;
	padding: 2px 2px 4px 5px;
}
body.scan.log .scanrow img {
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	display: block;
	width: 100%;
}
body.scan.log .scanrow .model {
	color: #eee;
}
body.scan.log .scanrow .noscore {
	color: #b45309;
}
body.scan.log .scanrow .vision {
	color: #93c5fd;
}
body.scan.log .scanrow small {
	color: #555;
	cursor: help;
}
body.scan.log .scanrow.alert {
	background-color: #14532d;
	border-left-color: #4ade80;
}
body.scan.log .scanrow.alert .model {
	color: #4ade80;
}
body.scan.log .scanrow .rate {
	margin-left: 4px;
	white-space: nowrap;
}
body.scan.log .scanrow .ratebtn {
	background-color: #1f1f1f;
	border: 1px solid #333;
	border-radius: 3px;
	color: #999;
	cursor: pointer;
	font-size: 10px;
	margin-left: 2px;
	padding: 1px 5px;
	text-decoration: none;
}
body.scan.log .scanrow .ratebtn:hover {
	background-color: #2a2a2a;
	color: #ddd;
}
body.scan.log .scanrow .ratebtn.on {
	background-color: #1d4ed8;
	border-color: #3b82f6;
	color: white;
}
body.scan.log .scanrow.rated-yes {
	box-shadow: inset 3px 0 0 #3b82f6;
}
body.scan.log .scanrow.rated-no {
	box-shadow: inset 3px 0 0 #52525b;
}
body.scan.judge {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	background-color: black;
	color: white;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	padding: 6px;
	padding-bottom: max(6px, var(--bottom, 0px));
	padding-top: max(6px, var(--top, 0px));
}
body.scan.judge .judgewrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}
body.scan.judge .pools {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 5px;
	padding-bottom: 6px;
}
body.scan.judge .pools .pool {
	background-color: #1f1f1f;
	border: 1px solid #333;
	border-radius: 4px;
	color: #aaa;
	font-size: 11px;
	padding: 3px 8px;
	text-decoration: none;
}
body.scan.judge .pools .pool.on {
	background-color: #1d4ed8;
	border-color: #3b82f6;
	color: white;
}
body.scan.judge .judgegrid {
	display: grid;
	flex: 1;
	gap: 6px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	min-height: 0;
}
body.scan.judge .card {
	border: 3px solid #222;
	border-radius: 5px;
	cursor: pointer;
	min-height: 0;
	overflow: hidden;
	position: relative;
}
body.scan.judge .card img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}
body.scan.judge .card .under {
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 3px;
	bottom: 3px;
	left: 3px;
	padding: 1px 6px;
	position: absolute;
}
body.scan.judge .card .clip {
	color: #93c5fd;
	margin-left: 6px;
}
body.scan.judge .card .model {
	color: #eee;
}
body.scan.judge .card .old {
	color: #999;
}
body.scan.judge .card .vision {
	color: #93c5fd;
}
body.scan.judge .card.chosen {
	border-color: #4ade80;
}
body.scan.judge .card.chosen .under {
	background-color: #14532d;
}
body.scan.judge .finish {
	flex: none;
	padding-top: 6px;
}
body.scan.judge .finish button {
	background-color: #1d4ed8;
	border: 1px solid #3b82f6;
	border-radius: 4px;
	color: white;
	cursor: pointer;
	font-size: 14px;
	padding: 8px 18px;
	width: 100%;
}
body.scan.judge .finish button:disabled {
	background-color: #333;
	border-color: #444;
	color: #888;
}
body.scan.judge .empty {
	color: #888;
}
body.scan.log .scanrow.narrow {
	box-shadow: inset 3px 0 0 #b45309;
}
body.talk {
	background: #0B0716 url(/phome.jpg) center center / cover fixed;
	margin: 0;
}
#talk {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	min-height: 100dvh;
	position: relative;
}
#talk::before {
	background: linear-gradient(165deg, rgba(58, 20, 98, .88) 0%, rgba(10, 7, 22, .94) 100%);
	content: '';
	inset: 0;
	position: fixed;
}
#figure {
	height: 260px;
	position: relative;
	transition: height .3s, width .3s;
	width: 260px;
}
#status {
	color: rgba(255, 255, 255, .72);
	font: 500 13px/1.4 system-ui, sans-serif;
	margin: 0;
	max-width: 80%;
	position: relative;
	text-align: center;
}
#talk .controls {
	display: flex;
	gap: 8px;
	position: relative;
}
#stop,
#look {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 16px;
	color: #FFF;
	cursor: pointer;
	font: 600 12px/1 system-ui, sans-serif;
	padding: 10px 18px;
	position: relative;
	text-decoration: none;
}
#look.on {
	background: rgba(159, 107, 255, .45);
	border-color: rgba(159, 107, 255, .8);
}
#eye {
	border-radius: 14px;
	display: none;
	max-height: 30vh;
	max-width: min(92%, 420px);
	position: relative;
}
#talk.seeing #eye {
	display: block;
}
#shown {
	color: #FFF;
	display: none;
	position: relative;
	width: 100%;
}
#talk.showing {
	justify-content: flex-start;
	padding-top: 14px;
}
#talk.showing #figure {
	height: 110px;
	width: 110px;
}
#talk.showing #shown {
	display: block;
}
#shown main.portal {
	padding-top: 0;
}
#shown .photogrid {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	margin-top: 12px;
}
#shown .photogrid .ph {
	aspect-ratio: 1;
	background: rgba(255, 255, 255, .06);
	border: 0;
	border-radius: 8px;
	cursor: zoom-in;
	overflow: hidden;
	padding: 0;
}
#shown .photogrid .ph img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
#shown .photogrid .more,
#shown .linkcard .act {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	color: #FFF;
	cursor: pointer;
	font: 600 13px/1 system-ui, sans-serif;
	grid-column: 1 / -1;
	padding: 12px;
	text-decoration: none;
}
#shown .linkcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: 500 14px/1.45 system-ui, sans-serif;
}
#shown .linkcard b {
	font-size: 17px;
}
#shown .linkcard p {
	color: rgba(255, 255, 255, .8);
	margin: 0;
}
#shown .linkcard .sub {
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
	word-break: break-all;
}
#shown .linkcard .take {
	display: flex;
}
#shown .errlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}
#shown .errrow {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	font: 500 13px/1.4 system-ui, sans-serif;
	gap: 3px;
	padding: 9px 12px;
}
#shown .errrow .path {
	color: rgba(255, 255, 255, .7);
	font: 12px/1.3 ui-monospace, "DejaVu Sans Mono", monospace;
	word-break: break-all;
}
#shown .errrow .sub {
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
}
#big {
	align-items: center;
	background: rgba(6, 4, 14, .94);
	display: flex;
	flex-direction: column;
	gap: 10px;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 50;
}
#big img {
	max-height: calc(100dvh - 90px);
	max-width: 100%;
	object-fit: contain;
}
#big .bar {
	align-items: center;
	color: rgba(255, 255, 255, .75);
	display: flex;
	font: 500 13px/1 system-ui, sans-serif;
	gap: 10px;
}
#big button {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	color: #FFF;
	cursor: pointer;
	font: 600 16px/1 system-ui, sans-serif;
	padding: 10px 16px;
}
body.launcher .talkpane #talk.showing {
	overflow-y: auto;
}
body.launcher.talking:has(#talk.showing) .lower {
	display: none;
}
body.launcher .talkpane #talk.showing #figure {
	flex: 0 0 auto;
	height: 80px;
	width: 80px;
}
body.tesla {
	background: #0B0716;
	color: #FFF;
	font: 400 17px/1.35 system-ui, sans-serif;
	margin: 0;
	overflow: hidden;
}
.road {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1.15fr 1fr;
	height: 100vh;
	padding: 14px;
}
.lane {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}
.card {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	padding: 14px 16px;
}
.card h2 {
	color: rgba(255, 255, 255, .5);
	font: 600 12px/1 system-ui, sans-serif;
	letter-spacing: .08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.road .weather {
	backdrop-filter: none;
	background: none;
	border: 0;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0;
}
.road .wicon {
	font-size: 52px;
}
.road .wmid b {
	font-size: 46px;
}
.road .wdeg {
	font-size: 22px;
}
.road .wcond {
	font-size: 18px;
}
.road .wchips {
	flex-basis: 100%;
	gap: 8px;
}
.road .chip {
	background: rgba(255, 255, 255, .09);
	border-radius: 999px;
	font: 600 13px/1 system-ui, sans-serif;
	opacity: .8;
	padding: 7px 11px;
}
.road .modes .device {
	display: contents;
}
.road .modes .device header,
.road .modes .device > div:not(.actions) {
	display: none;
}
.road .modes .actions {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.road .modes button {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 16px;
	color: #FFF;
	font: 600 16px/1.1 system-ui, sans-serif;
	min-height: 62px;
	padding: 8px;
	text-transform: capitalize;
}
.road .modes button.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .6);
}
.road .lane .card.wide {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}
.road .tiles {
	flex: 1;
	gap: 12px;
	grid-auto-flow: row;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	min-height: 0;
}
.road .tiles input[type="range"],
.road .tiles .stepper {
	display: none;
}
.road .tiles button:not([data-label]) {
	font-size: 17px;
	text-transform: capitalize;
}
.road .tiles button {
	backdrop-filter: none;
	border-radius: 18px;
	gap: 6px;
	min-height: 108px;
	padding: 10px;
}
.road .tiles button::before {
	background: none;
	font-size: 30px;
	height: auto;
	width: auto;
}
.road .tiles button::after {
	font: 600 17px/1.1 system-ui, sans-serif;
}
.road .tiles button.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
	border-color: rgba(190, 165, 255, .6);
}
.road .heating {
	flex-direction: column;
	gap: 12px;
}
.road .heating .therm {
	gap: 12px;
}
.road .heating .temps {
	flex: 1;
	gap: 4px;
	min-width: 0;
}
.road .heating .now {
	font-size: 24px;
}
.road .heating .set {
	font-size: 15px;
}
.road .heating button,
.road .stepper button {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	color: #FFF;
	flex: 0 0 auto;
	font: 600 22px/1 system-ui, sans-serif;
	min-height: 52px;
	width: 52px;
}
.road .heating button[data-action="automaat"] {
	font-size: 0;
}
.road .heating button[data-action="automaat"]::after {
	content: '⟳';
	font: 600 22px/1 system-ui, sans-serif;
}
.road .heating button.active {
	background: linear-gradient(135deg, #7AA0FF, #9F6BFF);
}
.road .warm {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}
.road .warmnaam {
	flex: 1;
	font: 600 16px/1 system-ui, sans-serif;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.road .warmrij {
	align-items: center;
	display: flex;
	gap: 8px;
}
.road .warmmid {
	min-width: 78px;
	text-align: center;
}
.road .warmmid b {
	display: block;
	font: 700 20px/1.1 system-ui, sans-serif;
}
.road .stap {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	color: #FFF;
	font: 600 22px/1 system-ui, sans-serif;
	min-height: 56px;
	width: 60px;
}
.road .cams {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}
.road .cam {
	border-radius: 14px;
	flex: 1;
	min-height: 0;
	aspect-ratio: auto;
}
.road .agentkaart {
	min-height: 0;
}
.road .agentkaart .agents {
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}
.road .agent {
	border-left-width: 4px;
	border-radius: 14px;
	padding: 10px 12px;
}
.road .agent b {
	font: 600 15px/1.25 system-ui, sans-serif;
}
.road .agent .meta span {
	font: 500 12px/1.4 system-ui, sans-serif;
}
.road .quiet {
	opacity: .6;
}
.road .stand[disabled] {
	opacity: 1;
}
main.portal .viewer {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
main.portal .viewer .view {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 0;
}
main.portal .viewer .view-image,
main.portal .viewer .view-media {
	border-radius: 10px;
	max-height: 75vh;
	max-width: 100%;
}
main.portal .viewer .view-audio {
	width: 100%;
}
main.portal .viewer .view-pdf {
	background: #fff;
	border: 0;
	border-radius: 10px;
	height: 75vh;
	width: 100%;
}
main.portal .viewer .view-text {
	background: rgba(0, 0, 0, .35);
	border-radius: 10px;
	font: 12px/1.5 ui-monospace, "DejaVu Sans Mono", monospace;
	margin: 0;
	max-height: 70vh;
	overflow: auto;
	padding: 12px 14px;
	white-space: pre-wrap;
	width: 100%;
	word-break: break-word;
}
main.portal .viewer .facts {
	color: rgba(255, 255, 255, .6);
	display: flex;
	font: 500 12px/1 system-ui, sans-serif;
	gap: 14px;
}
main.portal .viewer .take {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
main.portal .viewer .take .act {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	color: #fff;
	font: 600 13px/1 system-ui, sans-serif;
	padding: 10px 14px;
	text-decoration: none;
}
@media (max-width: 1000px){
	.columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 680px){
	.columns {
		grid-template-columns: 1fr;
	}
	.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.desk.guest {
		gap: 10px;
		padding: 14px 14px 28px;
	}
	.desk.guest .guesthead,
	.desk.guest:has(.columns > .col:only-child) .guesthead {
		gap: 8px;
		max-width: none;
		padding: 4px 4px 0;
	}
	.desk.guest .guesthead b {
		font-size: 17px;
	}
	.desk.guest .guesthead .dictate-open {
		padding: 8px 11px;
	}
	.desk.guest .columns {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: none;
	}
	.desk.guest .col {
		display: contents;
	}
	.desk.guest .block {
		border-radius: 18px;
		padding: 14px;
	}
	.desk.guest .block.floors {
		order: 1;
	}
	.desk.guest .block:has(.media) {
		order: 2;
	}
	.desk.guest .block:has(.weather) {
		backdrop-filter: none;
		background: none;
		border: 0;
		order: 3;
		padding: 0;
	}
	.desk.guest .block:has(.scan) {
		order: 4;
	}
	.desk.guest .weather {
		border-radius: 18px;
		flex-wrap: wrap;
		padding: 12px 14px;
	}
	.desk.guest .weather .wchips {
		flex-wrap: wrap;
	}
	.desk.guest .away-note {
		background: rgba(255, 255, 255, .07);
		border-radius: 10px;
		margin: 0 0 12px;
		padding: 8px 10px;
	}
	.desk.guest .floors .floor + .floor {
		margin-top: 14px;
	}
	.desk.guest .floors div.devices {
		grid-gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.desk.guest .card.scan .scanlog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.desk.guest .card.scan p.mine {
		flex-wrap: nowrap;
	}
	.desk.guest .card.scan p.mine b {
		flex: 1 1 auto;
	}
	.desk.resident .guesthead {
		flex-wrap: wrap;
	}
	.desk.resident .guesthead .modes .actions {
		flex: 0 0 100%;
		gap: 6px;
		margin-left: 0;
	}
	.desk.resident .guesthead .modes button {
		border-radius: 12px;
		flex: 1 1 0;
		font-size: 12px;
		padding: 11px 6px;
	}
	.desk.resident .home input[type="range"] {
		flex-basis: 96px;
		width: 96px;
	}
	.desk.resident .amp button[data-action="bluetooth"] {
		font-size: 0;
	}
	.desk.resident .amp button[data-action="bluetooth"]::after {
		content: 'BT';
		font: 600 11px/1.1 system-ui, sans-serif;
	}
	.desk.resident .card.scan .scanlog {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.desk.resident .block.home {
		order: 1;
	}
	.desk.resident .block:has(.media) {
		order: 2;
	}
	.desk.resident .block:has(.heating) {
		order: 3;
	}
	.desk.resident .block:has(.cam) {
		order: 4;
	}
	.desk.resident .block:has(.weather) {
		order: 5;
	}
	.desk.resident .block:has(.scan) {
		order: 6;
	}
}
@media (max-width: 380px){
	.desk.guest .media {
		flex-wrap: wrap;
	}
	.desk.guest .media .track {
		flex: 1 0 calc(100% - 50px);
	}
}
@media (max-width: 359px){
	.desk.guest .floors div.devices {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px){
	.camview {
		grid-template-columns: 1fr;
	}
}
@media (orientation: landscape) and (max-height: 560px){
	.upper,
	.board {
		display: none;
	}
	.apps {
		grid-template-columns: repeat(7, 1fr);
	}
}
@keyframes portal-late{
	0% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes portal-collapse{
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(.7);
	}
}
@keyframes portal-out{
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes portal-in{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media screen and (orientation: landscape){
	body.camera img.camera:not(.small) {
		height: 100vh;
	}
	body.camera img.camera.small {
		border: 1px solid white;
		left: 3px;
		position: fixed;
		top: 3px;
		width: 20%;
		z-index: 2;
	}
	body.camera img.camera.small.right {
		left: auto;
		right: 3px;
	}
}
@keyframes devices-shake{
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}
	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}
@media screen and (max-width: 600px){
	body.devices div.devices,
	main.portal div.devices,
	section.floors div.devices {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}
@media (max-width: 900px){
	.road {
		grid-template-columns: 1fr 1fr;
		height: auto;
		overflow-y: auto;
	}
}