/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

:focus {
  outline-color: transparent;
  outline-style: none;
}

.topcoat-select {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.topcoat-select {
  vertical-align: top;
  outline: none;
}

.topcoat-select {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.topcoat-select {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.topcoat-select {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.topcoat-select:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.topcoat-select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.topcoat-select::-ms-expand {
  display: none;
}

.topcoat-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  appearance: button;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 0.15rem 1rem 0.15rem 0.3rem;
  font-size: 12px;
  font-weight: 400;
  height: 1.4rem;
  letter-spacing: 1px;
  color: var(--button-text-color);
  text-shadow: 0 -1px var(--button-text-shadow-color);
  border-radius: 6px;
  background-color: var(--button-bg-color);
  box-shadow: inset 0 1px var(--button-shadow-color);
  border: 1px solid var(--button-border-color);
  background-image: url('../img/drop-down-triangle-dark.png');
  background-repeat: no-repeat;
  background-position: center right;
}

.topcoat-select:hover {
  background-color: var(--hover-button-bg-color);
}

.topcoat-select:active {
  background-color: var(--active-select-bg-color);
/* box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.05); */
}

.topcoat-select:focus {
  border: 1px solid hsla(227, 100%, 50%, 1);
/*  box-shadow: 0 0 0 2px hsla(208, 82%, 69%, 1); */
  outline: 0;
}
/*!
 * jQuery UI CSS Framework 1.14.2
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 *
 * https://api.jqueryui.com/category/theming/
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*!
 * jQuery UI Selectable 1.14.2
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 */
.ui-selectable {
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
/*!
 * jQuery UI Selectmenu 1.14.2
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 *
 * https://api.jqueryui.com/selectmenu/#theming
 */
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
/*!
 * jQuery UI Slider 1.14.2
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 *
 * https://api.jqueryui.com/slider/#theming
 */
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
/*! 
 * OverlayScrollbars
 * Version: 2.16.0
 * 
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 * 
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

.os-size-observer {
  z-index: -1;
  contain: strict;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: inherit;
  border: inherit;
  box-sizing: inherit;
  margin: -133px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0.1);
}
.os-size-observer::before {
  content: "";
  flex: none;
  box-sizing: inherit;
  padding: 10px;
  width: 10px;
  height: 10px;
}

.os-size-observer-appear {
  animation: os-size-observer-appear-animation 1ms forwards;
}

.os-size-observer-listener {
  box-sizing: border-box;
  position: relative;
  flex: auto;
  padding: inherit;
  border: inherit;
  margin: -133px;
  transform: scale(calc(1 / 0.1));
}
.os-size-observer-listener.ltr {
  margin-right: -266px;
  margin-left: 0;
}
.os-size-observer-listener.rtl {
  margin-left: -266px;
  margin-right: 0;
}
.os-size-observer-listener:empty::before {
  content: "";
  width: 100%;
  height: 100%;
}
.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
  display: block;
  position: relative;
  padding: inherit;
  border: inherit;
  box-sizing: content-box;
  flex: auto;
}

.os-size-observer-listener-scroll {
  box-sizing: border-box;
  display: flex;
}

.os-size-observer-listener-item {
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr;
  flex: none;
}

.os-size-observer-listener-item-final {
  transition: none;
}

@keyframes os-size-observer-appear-animation {
  from {
    cursor: auto;
  }
  to {
    cursor: none;
  }
}
.os-trinsic-observer {
  flex: none;
  box-sizing: border-box;
  position: relative;
  max-width: 0px;
  max-height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
  height: 0;
  top: calc(100% + 1px);
  contain: strict;
}
.os-trinsic-observer:not(:empty) {
  height: calc(100% + 1px);
  top: -1px;
}
.os-trinsic-observer:not(:empty) > .os-size-observer {
  width: 1000%;
  height: 1000%;
  min-height: 1px;
  min-width: 1px;
}

/**
 * hide native scrollbars
 * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
 */
/**
 * body element
 */
html[data-overlayscrollbars-body] {
  overflow: hidden;
}

html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html[data-overlayscrollbars-body] > body {
  overflow: visible;
  margin: 0;
}

/**
 * structure setup 
 */
[data-overlayscrollbars] {
  position: relative;
}

[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  display: flex;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  scroll-behavior: auto !important;
}

[data-overlayscrollbars-padding],
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  box-sizing: inherit;
  position: relative;
  flex: auto;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 0;
}

[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  --os-vaw: 0;
  --os-vah: 0;
  outline: none;
}
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus {
  outline: none;
}
[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  min-width: 1px;
  min-height: 1px;
  width: var(--os-vaw);
  height: var(--os-vah);
}

/**
 * wrapper elements overflow:
 */
[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  overflow: hidden !important;
}

[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],
[data-overlayscrollbars-padding~=noClipping] {
  overflow: visible !important;
}

/**
 * viewport overflow:
 */
[data-overlayscrollbars-viewport] {
  --os-viewport-overflow-x: hidden;
  --os-viewport-overflow-y: hidden;
  overflow-x: var(--os-viewport-overflow-x);
  overflow-y: var(--os-viewport-overflow-y);
}

[data-overlayscrollbars-viewport~=overflowXVisible] {
  --os-viewport-overflow-x: visible;
}

[data-overlayscrollbars-viewport~=overflowXHidden] {
  --os-viewport-overflow-x: hidden;
}

[data-overlayscrollbars-viewport~=overflowXScroll] {
  --os-viewport-overflow-x: scroll;
}

[data-overlayscrollbars-viewport~=overflowYVisible] {
  --os-viewport-overflow-y: visible;
}

[data-overlayscrollbars-viewport~=overflowYHidden] {
  --os-viewport-overflow-y: hidden;
}

[data-overlayscrollbars-viewport~=overflowYScroll] {
  --os-viewport-overflow-y: scroll;
}

[data-overlayscrollbars-viewport~=overflowImportant] {
  overflow-x: var(--os-viewport-overflow-x) !important;
  overflow-y: var(--os-viewport-overflow-y) !important;
}

/**
 * viewport state modifiers:
 */
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) {
  font-size: 0 !important;
  line-height: 0 !important;
}

[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) > *:not(#osFakeId) {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

[data-overlayscrollbars-viewport~=measuring],
[data-overlayscrollbars-viewport~=scrolling] {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible] {
  overflow-x: hidden !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible] {
  overflow-y: hidden !important;
}

/**
 * content element:
 */
[data-overlayscrollbars-content] {
  box-sizing: inherit;
}

/**
 * Display contents to bridge any flickering during deferred initialization.
 */
[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
  display: contents;
}

/**
 * optional & experimental grid mode
 */
[data-overlayscrollbars-grid],
[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
  display: grid;
  grid-template: 1fr/1fr;
}

[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
  height: auto !important;
  width: auto !important;
}

@property --os-scroll-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-viewport-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.os-scrollbar {
  --os-viewport-percent: 0;
  --os-scroll-percent: 0;
  --os-scroll-direction: 0;
  --os-scroll-percent-directional: calc(
    var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *
      var(--os-scroll-direction)
  );
}

.os-scrollbar {
  contain: size layout;
  contain: size layout style;
  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

body > .os-scrollbar {
  position: fixed;
  z-index: 99999;
}

.os-scrollbar-transitionless {
  transition: none !important;
}

.os-scrollbar-track {
  position: relative;
  padding: 0 !important;
  border: none !important;
}

.os-scrollbar-handle {
  position: absolute;
}

.os-scrollbar-track,
.os-scrollbar-handle {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
  pointer-events: auto;
  touch-action: none;
}

.os-scrollbar-horizontal {
  bottom: 0;
  left: 0;
}

.os-scrollbar-vertical {
  top: 0;
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-horizontal {
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical {
  right: auto;
  left: 0;
}

.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
  opacity: 0;
  visibility: hidden;
}

.os-scrollbar-interaction.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-unusable,
.os-scrollbar-unusable *,
.os-scrollbar-wheel,
.os-scrollbar-wheel * {
  pointer-events: none !important;
}

.os-scrollbar-unusable .os-scrollbar-handle {
  opacity: 0 !important;
  transition: none !important;
}

.os-scrollbar-horizontal .os-scrollbar-handle {
  bottom: 0;
  left: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateX(calc(var(--os-scroll-percent-directional) * -100%));
  width: calc(var(--os-viewport-percent) * 100%);
}

.os-scrollbar-vertical .os-scrollbar-handle {
  right: 0;
  top: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateY(calc(var(--os-scroll-percent-directional) * -100%));
  height: calc(var(--os-viewport-percent) * 100%);
}

@supports (container-type: size) {
  .os-scrollbar-track {
    container-type: size;
  }
  .os-scrollbar-horizontal .os-scrollbar-handle {
    left: auto;
    transform: translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-vertical .os-scrollbar-handle {
    top: auto;
    transform: translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle {
    right: auto;
    left: 0;
  }
}
.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
  right: auto;
  left: 0;
}

.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
  left: 0;
  right: 0;
}

.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
  top: 0;
  bottom: 0;
}

@media print {
  .os-scrollbar {
    display: none;
  }
}
.os-scrollbar {
  --os-size: 0;
  --os-padding-perpendicular: 0;
  --os-padding-axis: 0;
  --os-track-border-radius: 0;
  --os-track-bg: none;
  --os-track-bg-hover: none;
  --os-track-bg-active: none;
  --os-track-border: none;
  --os-track-border-hover: none;
  --os-track-border-active: none;
  --os-handle-border-radius: 0;
  --os-handle-bg: none;
  --os-handle-bg-hover: none;
  --os-handle-bg-active: none;
  --os-handle-border: none;
  --os-handle-border-hover: none;
  --os-handle-border-active: none;
  --os-handle-min-size: 33px;
  --os-handle-max-size: none;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0;
}

.os-scrollbar-track {
  border: var(--os-track-border);
  border-radius: var(--os-track-border-radius);
  background: var(--os-track-bg);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.os-scrollbar-track:hover {
  border: var(--os-track-border-hover);
  background: var(--os-track-bg-hover);
}
.os-scrollbar-track:active {
  border: var(--os-track-border-active);
  background: var(--os-track-bg-active);
}

.os-scrollbar-handle {
  border: var(--os-handle-border);
  border-radius: var(--os-handle-border-radius);
  background: var(--os-handle-bg);
}
.os-scrollbar-handle:hover {
  border: var(--os-handle-border-hover);
  background: var(--os-handle-bg-hover);
}
.os-scrollbar-handle:active {
  border: var(--os-handle-border-active);
  background: var(--os-handle-bg-active);
}

.os-scrollbar-track:before,
.os-scrollbar-handle:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
}

.os-scrollbar-horizontal {
  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
  right: var(--os-size);
  height: var(--os-size);
}
.os-scrollbar-horizontal.os-scrollbar-rtl {
  left: var(--os-size);
  right: 0;
}
.os-scrollbar-horizontal .os-scrollbar-track:before {
  top: calc(var(--os-padding-perpendicular) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal .os-scrollbar-handle {
  min-width: var(--os-handle-min-size);
  max-width: var(--os-handle-max-size);
  height: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
}
.os-scrollbar-horizontal .os-scrollbar-handle:before {
  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal:hover .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-horizontal:active .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-active);
}

.os-scrollbar-vertical {
  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
  bottom: var(--os-size);
  width: var(--os-size);
}
.os-scrollbar-vertical .os-scrollbar-track:before {
  left: calc(var(--os-padding-perpendicular) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical .os-scrollbar-handle {
  min-height: var(--os-handle-min-size);
  max-height: var(--os-handle-max-size);
  width: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
}
.os-scrollbar-vertical .os-scrollbar-handle:before {
  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  left: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical:hover .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-vertical:active .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-active);
}

/* NONE THEME: */
[data-overlayscrollbars-viewport~=measuring] > .os-scrollbar,
.os-theme-none.os-scrollbar {
  display: none !important;
}

/* DARK & LIGHT THEME: */
.os-theme-dark,
.os-theme-light {
  box-sizing: border-box;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 10px;
  --os-handle-interactive-area-offset: 4px;
  --os-handle-border-radius: 10px;
}

.os-theme-dark {
  --os-handle-bg: rgba(0, 0, 0, 0.44);
  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
}

.os-theme-light {
  --os-handle-bg: rgba(255, 255, 255, 0.44);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),
[data-overlayscrollbars-viewport~=scrollbarHidden],
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body {
  scrollbar-width: none !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
  overflow: auto;
}/*
os-theme-block-dark
*/

.os-theme-block-dark > .os-scrollbar {
    padding: 0;
}
.os-theme-block-dark > .os-scrollbar-horizontal {
    right: 16px;
    height: 16px;
}
.os-theme-block-dark > .os-scrollbar-vertical {
    bottom: 16px;
    width: 16px;
}
.os-theme-block-dark.os-host-rtl > .os-scrollbar-horizontal {
    left: 16px;
    right: 0;
}
.os-theme-block-dark > .os-scrollbar-corner {
    height: 16px;
    width: 16px;
    background-color: transparent;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
    left: 4px;
    right: 4px;
    height: 2px;
    top: 50%;
    margin-top: -1px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    top: 4px;
    bottom: 4px;
    width: 2px;
    left: 50%;
    margin-left: -1px;
}
.os-theme-block-dark > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    margin-top: 0;
}
.os-theme-block-dark > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
    top: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    margin-left: 0;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: transparent;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: 100px;
    max-width: 100px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: 100px;
    max-height: 100px;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: #6e6e6e;
}
.os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: #454545;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    background: #000;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    height: 100%;
    min-width: 16px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    width: 100%;
    min-height: 16px;
}
.os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: background 0.3s;
}
.os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
    transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
@charset "utf-8";
/* yarn gulp copy-css */

:root {
  --studio-header-height: 42px;
  overflow-anchor: none;
  scroll-behavior: smooth;
}

body.light-theme {
  --grid-line-color: 32 56 77;
  --grid-handle-color: 43 111 173;
  --grid-handle-pinned-color: 112 83 166;
  --grid-handle-active-color: 14 133 219;
  --grid-handle-selected-color: 255 179 31;
  --grid-cell-hover-fill: 91 180 231;
  --grid-cell-hover-border: 209 237 255;
  --point-cloud-accent: 27 111 183;
  --point-cloud-adaptive: 116 76 196;
  --point-cloud-origin: 30 49 65;
  --curve-readout-bg: rgb(247 251 255 / 96%);
  --curve-readout-border: rgb(31 91 139 / 42%);
  --curve-readout-text: #182332;
  --main-bg-color: #f0f0f0;
  --main-bg-color-deep: #8c8a8a;
  --main-bg-color-props: #dbdbdb;
  --main-text-color-deep: hsla(180, 2%, 20%, 1);
  --button-bg-color: #e5e9e8;
  --active-button-bg-color: #d2d6d6;
  --hover-button-bg-color: #eff1f1; /* #d2d6d6; */
  --props-text-color: #454545;
  --wheel-text-color: #151515;
  --props-header-text-color: #454545;
  --button-text-color: #000000;
  --button-text-inactive-color: #101010;
  --button-text-hover-color: #78d3f5; /* blue */
  --selected-control-text-color: #17344d;
  --button-border-color: #9daca9;
  --checked-bg-color: #d2d6d6;
  --button-text-shadow-color: #fff;
  --button-shadow-color: #fff;
  --tab-border-color: hsla(180, 1%, 45%, 0.3);

  --active-button-bg-color2: #908f8f;
  --button-menu-color-active: #ebedeb;

  --slider-side-color: #c0c0c0;
  --slider-mid-color: #d0d0d0;
  --menu-bg-color: #dddddd;
  --active-select-bg-color: #dddddd;
}
body.dark-theme {
  --grid-line-color: 32 56 77;
  --grid-handle-color: 141 200 255;
  --grid-handle-pinned-color: 194 169 255;
  --grid-handle-active-color: 103 183 255;
  --grid-handle-selected-color: 255 196 61;
  --grid-cell-hover-fill: 103 183 255;
  --grid-cell-hover-border: 218 240 255;
  --point-cloud-accent: 81 178 255;
  --point-cloud-adaptive: 174 137 255;
  --point-cloud-origin: 232 244 255;
  --curve-readout-bg: rgb(12 17 24 / 96%);
  --curve-readout-border: rgb(130 195 255 / 42%);
  --curve-readout-text: #f3f7ff;
  --main-bg-color: #7c7a7c;
  --main-bg-color-deep: #2c2c2c;
  --main-bg-color-props: #424242;
  --main-text-color-deep: hsla(180, 2%, 78%, 1);
  --button-bg-color: #585a5a /*hsla(180, 1%, 35%, 1)*/;
  --active-button-bg-color: #727474 /* hsla(180, 1%, 45%, 1) */;
  --hover-button-bg-color: hsla(200, 2%, 39%, 1);
  --props-text-color: hsla(180, 2%, 68%, 1);
  --wheel-text-color: #151515;
  --props-header-text-color: hsla(180, 2%, 78%, 1);
  --button-text-color: hsla(180, 2%, 78%, 1);
  --button-text-inactive-color: hsla(180, 2%, 50%, 1);
  --button-text-hover-color: #ddd;
  --selected-control-text-color: #e7f3ff;
  --button-border-color: hsla(180, 1%, 20%, 1);
  --active-select-bg-color: hsla(210, 2%, 25%, 1);
  --checked-bg-color: hsla(210,2%,25%,1);
  --button-text-shadow-color: hsla(0, 0%, 0%, 0.69);
  --button-shadow-color: hsla(0, 0%, 45%, 1);
  --tab-border-color: hsla(180, 1%, 45%, 0.3);
  --active-button-bg-color2: hsla(180, 1%, 60%, 0.3);
  --button-menu-color-active: hsla(180, 2%, 20%, 1);

  --slider-side-color: #8c8a8c;
  --slider-mid-color: #6c6a6c;
  --menu-bg-color: #2c2c2c;
}
/* false colors */
body.food-theme {
  --main-bg-color: cucumber;
  --main-bg-color-props: pink;
  --main-bg-color-deep: orange;
  --button-bg-color: tomato;
  --active-button-bg-color: salmon;
  --active-button-bg-color2: salmon;
  --hover-button-bg-color: mango;
  --props-text-color: #fff;
  --props-header-text-color: #ccc;
  --button-text-color: chocolate;
  --button-text-inactive-color: red;
  --button-text-hover-color: #fff;
  --selected-control-text-color: #fff;
  --button-border-color: sunflower;
  --checked-bg-color: blueberry;
  --button-text-shadow-color: eggplant;
  --button-shadow-color: olive;
  --button-menu-color-active: red;
}

body {
  -webkit-font-smoothing: antialiased;
  /* Shared semantic materials used by the optional Claire Noir theme. */
  --colorplane-paper: #f3f0e7;
  --colorplane-paper-deep: #e5e0d3;
  --colorplane-ink: #12120f;
  --colorplane-muted: #747269;
  --colorplane-line: #d2cec1;
  --colorplane-white: #fffdf7;
  --colorplane-accent: #f472b6;
  --colorplane-accent-strong: #db2777;
  --colorplane-accent-soft: #c084fc;
  --colorplane-accent-rgb: 244 114 182;
  --scale-factor-basic: 1;
  --scale-factor: calc(1.25 * var(--scale-factor-basic));
  --slider-thumb-size: 14px;
  --slider-track-size: 5px;
  --slider-thumb-track-offset: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
  --slider-thumb-fill: #f7fbff;
  --slider-thumb-stroke: #4f9cff;
  --slider-thumb-shadow:
    0 1px 3px rgb(0 0 0 / 38%),
    0 0 0 3px rgb(79 156 255 / 14%);
  --slider-thumb-shadow-active:
    0 1px 4px rgb(0 0 0 / 45%),
    0 0 0 4px rgb(79 156 255 / 24%);
  --info-text-size: calc(var(--scale-factor) * 9px);
  --tab-text-size: calc(var(--scale-factor) * 12px);
  --btn-size-t: calc(var(--scale-factor) * 13px);
  --btn-size-h: calc(var(--scale-factor) * 24px);
  --btn-size-w: calc(var(--scale-factor) * 26px);
  --btn-size-ts: calc(var(--scale-factor) * 9px);
  --menu-offset-top: calc(var(--scale-factor) * 24px);
  --menu-t: calc(var(--scale-factor) * 12px);

  --buy-text-size: calc(var(--scale-factor) * 16px);

  --angle-offset-tip-text-size: calc(var(--scale-factor) * 16px);

  /* also see getSampleBlockWidth */
  --sample-block-height: calc(min(max(30px, 6vw), 60px)); /* some % of viewport height */
  --sample-height: calc(var(--sample-block-height) * 0.9);
  --sample-font-size: calc(var(--sample-height) * 0.33); /* size of add and deselect buttons icons */
  --sample-remove-font-size: calc(var(--sample-height) * 0.2);

  --colors-block-height: var(--sample-block-height);
  --colors-block-font-size: calc(var(--colors-block-height) * 0.28);
  --slider--label-text-size: calc(var(--scale-factor) * 10px);
  --tippy-font-size: calc(var(--scale-factor) * 12px);
  font-size: calc(var(--scale-factor) * 12px);
}

body[data-accent-palette='claire-noir'] {
  --colorplane-accent: #a53827;
  --colorplane-accent-strong: #7f281d;
  --colorplane-accent-soft: #d98270;
  --colorplane-accent-rgb: 165 56 39;
}

body {
  --spectrogram-image-color: #99ffff; /* teal */
  --spectrogram-sample-color: #ff9977; /* orange */
  --wheel-border: 8px; /* should be even */
}

.grid-lines-svg {
  overflow: hidden;
  pointer-events: none;
}

.grid-lines-svg__line {
  fill: none;
  stroke: rgb(var(--grid-line-color) / 60%);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.grid-lines-svg__line--primary {
  stroke-width: 1.6px;
  stroke: rgb(var(--grid-line-color) / 95%);
}

.grid-lines-svg__line--secondary {
  stroke-width: 1.1px;
}

.grid-lines-svg__glow {
  fill: none;
  stroke: rgb(var(--grid-line-color) / 10%);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.grid-lines-svg__glow.grid-lines-svg__line--primary {
  stroke-width: 4.2px;
  stroke: rgb(var(--grid-line-color) / 16%);
}

.grid-lines-svg__glow.grid-lines-svg__line--secondary {
  stroke-width: 3px;
}

.remap-hover-svg {
  overflow: hidden;
  pointer-events: none;
}

.remap-hover-svg__connector,
.remap-hover-svg__node {
  display: none;
}

.remap-hover-svg__connector {
  fill: none;
  stroke: rgb(111 255 147 / 82%);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 70%));
  vector-effect: non-scaling-stroke;
}

.remap-hover-svg__arrowhead {
  fill: rgb(111 255 147);
}

.remap-hover-svg__node {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}

.remap-hover-svg__halo {
  fill: rgb(10 13 16 / 52%);
  stroke: rgb(255 255 255 / 15%);
  stroke-width: 1px;
}

.remap-hover-svg__ring {
  fill: rgb(15 19 23 / 88%);
  stroke-width: 2px;
}

.remap-hover-svg__node--source .remap-hover-svg__ring {
  stroke: rgb(255 255 255 / 95%);
}

.remap-hover-svg__node--source .remap-hover-svg__dot {
  fill: white;
}

.remap-hover-svg__node--target .remap-hover-svg__ring {
  stroke: rgb(111 255 147);
}

.remap-hover-svg__node--target.is-invalid .remap-hover-svg__ring {
  stroke: rgb(255 104 104);
}

.remap-hover-svg__check {
  fill: none;
  stroke: rgb(111 255 147);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remap-hover-svg__node--target.is-invalid .remap-hover-svg__check {
  stroke: rgb(255 104 104);
}

.grid-zoom-hud {
  position: absolute;
  z-index: 24;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 78px;
  height: 32px;
  padding: 3px;
  overflow: hidden;
  color: rgb(235 243 250 / 90%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 9px;
  background: rgb(15 20 27 / 62%);
  box-shadow: 0 3px 12px rgb(0 0 0 / 28%);
  backdrop-filter: blur(8px);
  opacity: 0.78;
  transform: translate(-100%, -100%);
  transition: width 140ms ease, opacity 140ms ease, background-color 140ms ease;
  pointer-events: auto;
}

.grid-zoom-hud:hover,
.grid-zoom-hud:focus-within {
  width: 168px;
  opacity: 1;
  background: rgb(15 20 27 / 82%);
}

.grid-zoom-hud:focus-visible {
  outline: 1px solid rgb(129 202 255 / 78%);
  outline-offset: 2px;
}

.grid-zoom-hud--active {
  border-color: rgb(125 197 255 / 32%);
  opacity: 0.92;
}

.grid-zoom-hud__ratio {
  min-width: 43px;
  padding: 0 3px;
  color: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

.grid-zoom-hud__slider {
  --slider-track-size: 3px;

  flex: 0 0 0;
  width: 0;
  min-width: 0;
  height: 20px;
  margin: 0;
  opacity: 0;
  appearance: none;
  background: transparent;
  transition: flex-basis 140ms ease, width 140ms ease, opacity 100ms ease;
}

.grid-zoom-hud:hover .grid-zoom-hud__slider,
.grid-zoom-hud:focus-within .grid-zoom-hud__slider {
  flex-basis: 86px;
  width: 86px;
  opacity: 1;
}

.grid-zoom-hud__slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: rgb(169 211 244 / 38%);
}

.grid-zoom-hud__slider::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-track-offset);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
  appearance: none;
}

.grid-zoom-hud__slider::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
}

.grid-zoom-hud__slider:hover::-webkit-slider-thumb,
.grid-zoom-hud__slider:focus-visible::-webkit-slider-thumb,
.grid-zoom-hud__slider:hover::-moz-range-thumb,
.grid-zoom-hud__slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--slider-thumb-shadow-active);
}

.grid-zoom-hud__slider:focus-visible {
  outline: 1px solid rgb(129 202 255 / 78%);
  outline-offset: 2px;
}

.grid-zoom-hud__reset {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  padding: 0;
  color: rgb(218 234 246 / 82%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  place-items: center;
}

.grid-zoom-hud__reset:hover:not(:disabled),
.grid-zoom-hud__reset:focus-visible {
  color: white;
  background: rgb(123 192 246 / 22%);
}

.grid-zoom-hud__reset:disabled {
  color: rgb(218 234 246 / 28%);
}

.grid-zoom-hud__reset svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.point-cloud-hud {
  --point-cloud-hud-accent: var(--point-cloud-accent);

  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  width: min(238px, calc(100vw - 24px));
  padding: 9px;
  border: 1px solid rgb(var(--point-cloud-hud-accent) / 32%);
  border-radius: 9px;
  color: rgb(232 242 250 / 92%);
  background:
    linear-gradient(150deg, rgb(var(--point-cloud-hud-accent) / 13%), transparent 55%),
    rgb(12 18 25 / 88%);
  box-shadow:
    0 9px 26px rgb(0 0 0 / 24%),
    inset 0 1px rgb(255 255 255 / 5%);
  backdrop-filter: blur(9px) saturate(1.2);
  transform: translateX(-100%);
  user-select: none;
}

.light-theme .point-cloud-hud {
  color: rgb(25 42 56 / 94%);
  background:
    linear-gradient(150deg, rgb(var(--point-cloud-hud-accent) / 13%), transparent 55%),
    rgb(247 251 254 / 91%);
  box-shadow:
    0 9px 26px rgb(27 49 66 / 16%),
    inset 0 1px rgb(255 255 255 / 78%);
}

.point-cloud-hud--adaptive {
  --point-cloud-hud-accent: var(--point-cloud-adaptive);
}

.point-cloud-hud__header,
.point-cloud-hud__mode,
.point-cloud-hud__slider,
.point-cloud-hud__actions {
  display: flex;
  align-items: center;
}

.point-cloud-hud__header {
  justify-content: space-between;
  min-height: 18px;
  margin-bottom: 7px;
  border-radius: 5px;
  outline: 0;
  cursor: grab;
  touch-action: none;
}

.point-cloud-hud__header:hover,
.point-cloud-hud__header:focus-visible {
  background: rgb(var(--point-cloud-hud-accent) / 9%);
  box-shadow: 0 0 0 3px rgb(var(--point-cloud-hud-accent) / 9%);
}

.point-cloud-hud--dragging .point-cloud-hud__header {
  cursor: grabbing;
}

.point-cloud-hud__drag-mark {
  margin-right: -2px;
  color: currentcolor;
  font-size: 11px;
  line-height: 1;
  opacity: 0.38;
}

.point-cloud-hud__mode {
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.point-cloud-hud__mode-mark {
  width: 7px;
  height: 7px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  background: rgb(var(--point-cloud-hud-accent));
  box-shadow: 0 0 7px rgb(var(--point-cloud-hud-accent) / 72%);
}

.point-cloud-hud--adaptive .point-cloud-hud__mode-mark {
  border-radius: 1px;
  transform: rotate(45deg);
}

.point-cloud-hud__count {
  color: currentcolor;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  opacity: 0.58;
}

.point-cloud-hud__slider {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 35px;
  gap: 6px;
  min-height: 24px;
  font-size: 10px;
}

.point-cloud-hud__slider input {
  --slider-track-size: 3px;

  width: 100%;
  height: 18px;
  margin: 0;
  pointer-events: auto;
  appearance: none;
  background: transparent;
}

.point-cloud-hud__slider input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgb(var(--point-cloud-hud-accent) / 72%),
    rgb(var(--point-cloud-hud-accent) / 18%)
  );
}

.point-cloud-hud__slider input::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-track-offset);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
  appearance: none;
}

.point-cloud-hud__slider input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
}

.point-cloud-hud__slider input:hover::-webkit-slider-thumb,
.point-cloud-hud__slider input:focus-visible::-webkit-slider-thumb,
.point-cloud-hud__slider input:hover::-moz-range-thumb,
.point-cloud-hud__slider input:focus-visible::-moz-range-thumb {
  box-shadow: var(--slider-thumb-shadow-active);
}

.point-cloud-hud__slider input:focus-visible {
  outline: 1px solid rgb(var(--point-cloud-hud-accent) / 82%);
  outline-offset: 1px;
}

.point-cloud-hud__slider output {
  color: currentcolor;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  opacity: 0.7;
}

.point-cloud-hud__actions {
  gap: 5px;
  margin-top: 6px;
}

.point-cloud-hud__actions button {
  min-width: 0;
  height: 23px;
  padding: 0 8px;
  border: 1px solid rgb(var(--point-cloud-hud-accent) / 28%);
  border-radius: 5px;
  color: inherit;
  font: inherit;
  font-size: 9px;
  background: rgb(var(--point-cloud-hud-accent) / 10%);
}

.point-cloud-hud__actions button:hover:not(:disabled),
.point-cloud-hud__actions button:focus-visible {
  border-color: rgb(var(--point-cloud-hud-accent) / 58%);
  background: rgb(var(--point-cloud-hud-accent) / 21%);
}

.point-cloud-hud__actions button:disabled {
  opacity: 0.32;
}

.point-cloud-hud__actions .point-cloud-hud__clear {
  margin-left: auto;
  border-color: rgb(243 111 111 / 25%);
  background: rgb(243 111 111 / 7%);
}

.point-cloud-hud__hint {
  margin: 7px 0 0;
  color: currentcolor;
  font-size: 8px;
  line-height: 1.35;
  opacity: 0.52;
}

body { /* sample-on-bottom */
  --spectrogram-top-color: var(--spectrogram-image-color);
  --spectrogram-bottom-color: var(--spectrogram-sample-color);
}

body.sample-on-top {
  --spectrogram-top-color: var(--spectrogram-sample-color);
  --spectrogram-bottom-color: var(--spectrogram-image-color);
}

html {
    height: 100%;
    overflow:hidden;
    -webkit-app-region: no-drag;
}

body {
    -webkit-app-region: no-drag;
}



#index_body {
    cursor: default !important;
    background-color: var(--main-bg-color);
    margin: 0;
    padding: 0;

    /* disable scrolling */
    height: 100%;
    overflow: hidden;
}

table.ui-menu {
    margin-top: 0px;
}

.selectmenu-wrapper-custom {
    position: relative; /* needed to be used as a position starter for our menu */
    display: inline-block;
    vertical-align: top;
}

#buttons_panel, #curve_buttons_panel {
    padding-bottom: 1px;
}

#buttons_panel {
    justify-content: space-between;
    display: flex;
    min-height: 36px;
    padding: 4px 8px 2px;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 68%, transparent);
    background: color-mix(in srgb, var(--main-bg-color) 70%, transparent);
}

#buttons_panel.grid-toolbar-panel--empty {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background: transparent;
    overflow: visible;
}

.grid-toolbar-panel--empty #left-grouped-buttons,
.grid-toolbar-panel--empty #left-buttons {
    width: 100%;
    height: 0;
}

#left-grouped-buttons,
#left-buttons,
.grid-toolbar-dock,
.grid-toolbar-run {
    display: inline-flex;
    align-items: center;
}

#left-grouped-buttons,
#left-buttons {
    width: 100%;
    min-width: 0;
}

#left-grouped-buttons {
    flex: 1 1 auto;
}

.grid-toolbar-dock {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color 120ms ease, background 120ms ease;
}

.grid-toolbar-dock--empty {
    position: relative;
    width: 100%;
    height: 0;
    min-height: 0;
    border: 0;
}

.grid-toolbar-dock--empty::before {
    position: absolute;
    top: -24px;
    right: 0;
    left: 0;
    height: 96px;
    content: '';
    pointer-events: none;
}

.grid-toolbar-dock--empty.grid-toolbar-dock--drag-active::before {
    pointer-events: auto;
}

.grid-toolbar-dock--empty.grid-toolbar-dock--drop-target::after {
    position: absolute;
    z-index: 2;
    top: -3px;
    right: 0;
    left: 0;
    height: 6px;
    border-radius: 3px;
    background: #448ee4;
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 24%),
        0 0 12px 2px rgb(68 142 228 / 72%);
    content: '';
    pointer-events: none;
}

.grid-toolbar-run--action {
    gap: 4px;
}

.grid-toolbar-run--tool {
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 2px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--button-bg-color) 45%, transparent);
    box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.grid-toolbar-dock .grid-toolbar-run {
    min-width: 0;
    flex-wrap: nowrap;
}

.grid-toolbar-overflow {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
}

.grid-toolbar-overflow__trigger {
    display: inline-flex;
    width: 38px;
    height: 27px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 82%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--button-bg-color) 76%, #111);
    color: var(--button-text-color);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.grid-toolbar-overflow__current-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.grid-toolbar-overflow__current-icon > svg {
    width: 18px;
    height: 18px;
}

.grid-toolbar-overflow__chevron {
    width: 0;
    height: 0;
    border-top: 4px solid currentcolor;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    opacity: .82;
}

.grid-toolbar-overflow__trigger:hover,
.grid-toolbar-overflow__trigger[aria-expanded='true'] {
    border-color: color-mix(in srgb, var(--button-border-hover-color) 80%, transparent);
    background: var(--button-bg-hover-color);
    color: var(--button-text-hover-color);
}

.grid-toolbar-overflow__trigger:focus-visible {
    outline: 2px solid #5da7ff;
    outline-offset: 2px;
}

.grid-toolbar-overflow__menu {
    position: fixed;
    z-index: 2147483646;
    display: grid;
    min-width: 176px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 90%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--main-bg-color) 94%, #080808);
    box-shadow: 0 10px 26px rgb(0 0 0 / 45%);
}

.grid-toolbar-overflow__section-label {
    padding: 5px 6px 3px;
    color: var(--button-text-inactive-color);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grid-toolbar-overflow__item {
    display: grid;
    min-height: 34px;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 2px 5px;
    border-radius: 6px;
    color: var(--button-text-color);
    cursor: pointer;
}

.grid-toolbar-overflow__item:hover {
    background: var(--button-bg-hover-color);
    color: var(--button-text-hover-color);
}

.grid-toolbar-overflow__item--selected {
    background: color-mix(in srgb, var(--selected-color, #448ee4) 18%, transparent);
    color: var(--button-text-hover-color);
}

.grid-toolbar-overflow__label {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-toolbar-run--tool .grid-toolbar-button {
    border-radius: 5px;
}

.grid-toolbar-item {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.grid-toolbar-run__grip {
    width: 8px;
    height: 12px;
    flex: 0 0 8px;
    border-radius: 3px;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1.35px);
    background-position: 1px 1px;
    background-size: 4px 4px;
    color: var(--button-text-inactive-color);
    cursor: grab;
    opacity: 0.72;
    touch-action: none;
}

.grid-toolbar-run:hover > .grid-toolbar-run__grip {
    color: var(--props-text-color);
    opacity: 1;
}

.grid-toolbar-run__grip:active {
    cursor: grabbing;
}

.grid-toolbar-run--dragging {
    opacity: 0.35;
}

.grid-toolbar-item--drop-before::before,
.grid-toolbar-item--drop-after::after {
    position: absolute;
    z-index: 2;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: #448ee4;
    box-shadow: 0 0 5px rgb(68 142 228 / 55%);
    content: '';
    pointer-events: none;
}

.grid-toolbar-item--drop-before::before {
    left: -2px;
}

.grid-toolbar-item--drop-after::after {
    right: -2px;
}

.grid-toolbar-dock--drop-target {
    border-color: color-mix(in srgb, #448ee4 55%, var(--button-border-color));
    background: rgb(68 142 228 / 9%);
}

.grid-toolbar-dock--empty.grid-toolbar-dock--drop-target {
    border: 0;
    background: transparent;
}

.grid-toolbar-dock--dragging-all > .grid-toolbar-run {
    display: none;
}

.grid-toolbar-button {
    width: 27px;
    height: 27px;
    padding: 0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--props-text-color);
    cursor: pointer;
}

.grid-toolbar-button:hover {
    border-color: color-mix(in srgb, var(--button-border-color) 68%, transparent);
    background: var(--hover-button-bg-color);
    color: var(--button-text-color);
}

.grid-toolbar-button--checked {
    border-color: color-mix(in srgb, #448ee4 55%, var(--button-border-color));
    background: rgb(68 142 228 / 16%);
    color: var(--button-text-color);
}

.grid-toolbar-button:focus-visible {
    outline: 2px solid #448ee4;
    outline-offset: 2px;
}

.grid-toolbar-icon {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.grid-projection-control {
    position: relative;
    z-index: 40;
    display: inline-flex;
    flex: 0 0 auto;
}

.grid-projection-badge {
    width: 45px;
    height: 27px;
    padding: 0 7px 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    border: 1px solid #3979bd;
    border-radius: 6px;
    background: linear-gradient(180deg, #174f82, #0b3158);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 12%),
        0 1px 3px rgb(0 0 0 / 28%);
    color: #e9f5ff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.055em;
    cursor: pointer;
}

.grid-projection-badge:hover,
.grid-projection-badge--open {
    border-color: #5ca8ee;
    background: linear-gradient(180deg, #21679f, #10426f);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 16%),
        0 0 0 1px rgb(76 158 231 / 18%),
        0 2px 6px rgb(0 0 0 / 32%);
}

.grid-projection-badge:focus-visible {
    outline: 2px solid #6bb8ff;
    outline-offset: 2px;
}

.grid-projection-badge svg {
    width: 8px;
    height: 5px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    opacity: 0.82;
    transition: transform 120ms ease;
}

.grid-projection-badge--open svg {
    transform: rotate(180deg);
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  :is(.preset-group-controls, .settings-panel-action-row)
  .grid-projection-control > .grid-projection-badge {
    display: inline-flex;
    width: 36px;
    height: 25px;
    justify-content: space-between;
    gap: 2px;
    padding: 0 4px;
    color: #e9f5ff;
    border: 1px solid #3979bd;
    border-radius: 6px;
    background: linear-gradient(180deg, #174f82, #0b3158);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 12%),
        0 1px 3px rgb(0 0 0 / 28%);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.055em;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  :is(.preset-group-controls, .settings-panel-action-row)
  .grid-projection-control > .grid-projection-badge:hover,
:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  :is(.preset-group-controls, .settings-panel-action-row)
  .grid-projection-control > .grid-projection-badge--open {
    color: #fff;
    border-color: #5ca8ee;
    background: linear-gradient(180deg, #21679f, #10426f);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 16%),
        0 0 0 1px rgb(76 158 231 / 18%),
        0 2px 6px rgb(0 0 0 / 32%);
}

.grid-projection-menu {
    position: fixed;
    z-index: 2147483646;
    box-sizing: border-box;
    width: min(322px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    padding: 13px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, #4c91cf 52%, var(--button-border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--main-bg-color) 96%, #102c47);
    box-shadow:
        0 16px 34px rgb(0 0 0 / 42%),
        0 3px 10px rgb(0 0 0 / 28%),
        inset 0 1px rgb(255 255 255 / 5%);
    color: var(--props-text-color);
}

.grid-projection-menu--grid {
    padding: 0;
}

.grid-projection-menu__scroll {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 13px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.grid-projection-menu::before {
    position: absolute;
    top: -5px;
    left: var(--grid-projection-menu-arrow-left, 20px);
    width: 9px;
    height: 9px;
    border-top: 1px solid color-mix(in srgb, #4c91cf 52%, var(--button-border-color));
    border-left: 1px solid color-mix(in srgb, #4c91cf 52%, var(--button-border-color));
    background: color-mix(in srgb, var(--main-bg-color) 96%, #102c47);
    content: '';
    transform: rotate(45deg);
}

.grid-projection-menu--above::before {
    top: auto;
    bottom: -5px;
    transform: rotate(225deg);
}

.grid-projection-menu section + section {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--button-border-color) 55%, transparent);
}

.grid-projection-menu h3 {
    margin: 0 0 7px;
    color: color-mix(in srgb, var(--props-text-color) 82%, #8fc9ff);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1;
    text-transform: uppercase;
}

.grid-projection-menu__choices {
    display: grid;
    gap: 5px;
}

.grid-projection-menu__choices--grid {
    grid-template-columns: repeat(3, 1fr);
}

.grid-projection-menu__choices--projection {
    grid-template-columns: repeat(7, 1fr);
}

.grid-projection-menu__choices--two-color {
    grid-template-columns: repeat(3, 1fr);
}

.grid-projection-menu__choices button {
    min-width: 0;
    height: 27px;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--button-bg-color) 54%, transparent);
    color: var(--props-text-color);
    font-size: 10px;
    cursor: pointer;
}

.grid-projection-menu__choices button:hover {
    border-color: color-mix(in srgb, #559ee1 54%, var(--button-border-color));
    background: var(--hover-button-bg-color);
    color: var(--button-text-color);
}

.grid-projection-menu__choices button.is-selected {
    border-color: #4d9adf;
    background: linear-gradient(180deg, rgb(38 108 166 / 72%), rgb(17 67 111 / 78%));
    box-shadow: inset 0 1px rgb(255 255 255 / 9%);
    color: #f1f8ff;
}

.grid-projection-menu__choices button:focus-visible {
    outline: 2px solid #63adf0;
    outline-offset: 1px;
}

.grid-projection-menu__slider {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 29px;
    font-size: 11px;
}

.grid-projection-menu__slider .inline-slider {
    min-width: 0;
}

.grid-projection-menu__slider .inline-slider input {
    min-width: 0;
}

.grid-projection-menu__note {
    max-width: 255px;
    margin: 0;
    color: color-mix(in srgb, var(--props-text-color) 78%, #a8d8ff);
    font-size: 10px;
    line-height: 1.45;
}

.grid-density-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.grid-density-choices button,
.adaptive-image-seed button {
  min-height: 30px;
  border: 1px solid rgb(var(--grid-line-color) / 42%);
  border-radius: 6px;
  background: rgb(var(--grid-line-color) / 10%);
  color: inherit;
  cursor: pointer;
}

.grid-density-choices button:hover:not(:disabled),
.adaptive-image-seed button:hover:not(:disabled),
.grid-density-choices button:focus-visible,
.adaptive-image-seed button:focus-visible {
  border-color: rgb(var(--grid-handle-active-color) / 80%);
  background: rgb(var(--grid-handle-active-color) / 16%);
}

.grid-density-choices button.is-selected {
  border-color: rgb(var(--grid-handle-active-color) / 90%);
  background: rgb(var(--grid-handle-active-color) / 22%);
}

.adaptive-image-seed {
  display: grid;
  gap: 5px;
}

.adaptive-image-seed button {
  width: 100%;
}

.adaptive-image-seed button:disabled {
  cursor: default;
  opacity: .55;
}

.adaptive-image-seed small {
  line-height: 1.35;
  opacity: .72;
}

.adaptive-image-seed__error {
  color: var(--error-text, #ff9b9b);
  opacity: 1 !important;
}

.grid-header-menu {
    position: fixed;
    z-index: 2147483646;
    box-sizing: border-box;
    width: min(280px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow: auto;
    color: var(--button-text-color);
    border: 1px solid var(--tab-border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--main-bg-color-props) 96%, var(--main-bg-color-deep));
    box-shadow: 0 16px 38px rgb(0 0 0 / 44%);
    backdrop-filter: blur(16px) saturate(125%);
}

.grid-header-menu > header {
    padding: 9px 11px 8px;
    color: var(--button-text-inactive-color);
    border-bottom: 1px solid var(--tab-border-color);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.grid-header-menu > button {
    display: grid;
    width: 100%;
    min-height: 52px;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    color: inherit;
    border: 0;
    border-bottom: 1px solid var(--tab-border-color);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.grid-header-menu > button:last-child {
    border-bottom: 0;
}

.grid-header-menu > button:hover,
.grid-header-menu > button:focus-visible,
.grid-header-menu > button[aria-checked='true'] {
    outline: 0;
    background: color-mix(in srgb, var(--colorplane-ui-accent) 12%, transparent);
}

.grid-header-menu > button > svg {
    width: 19px;
    height: 19px;
    color: var(--colorplane-ui-accent);
}

.grid-header-menu > button > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.grid-header-menu > button strong {
    font-size: 11px;
    font-weight: 680;
}

.grid-header-menu > button small {
    color: var(--button-text-inactive-color);
    font-size: 9px;
    line-height: 1.35;
}

.grid-header-menu > button > i {
    color: var(--colorplane-ui-accent);
    font-size: 12px;
    font-style: normal;
    text-align: center;
}

.grid-floating-toolbar {
    position: fixed;
    min-width: 104px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 82%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--main-bg-color) 92%, var(--button-bg-color));
    box-shadow: 0 10px 28px rgb(0 0 0 / 26%), 0 2px 8px rgb(0 0 0 / 18%);
    color: var(--button-text-color);
    pointer-events: auto;
}

.grid-toolbar-drag-preview {
    position: fixed;
    z-index: 99935;
    display: inline-flex;
    min-height: 38px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, #448ee4 62%, var(--button-border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--main-bg-color) 94%, var(--button-bg-color));
    box-shadow: 0 12px 30px rgb(0 0 0 / 34%), 0 0 0 1px rgb(68 142 228 / 12%);
    color: var(--button-text-color);
    opacity: 0.94;
    pointer-events: none;
}

.grid-toolbar-drag-preview .grid-toolbar-run {
    opacity: 1;
}

.grid-toolbar-drag-preview .grid-toolbar-run__grip {
    color: var(--props-text-color);
    opacity: 1;
}

.grid-floating-toolbar__header {
    height: 24px;
    padding: 0 3px 0 7px;
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 68%, transparent);
    background: color-mix(in srgb, var(--button-bg-color) 52%, transparent);
    color: var(--button-text-inactive-color);
    cursor: grab;
}

.grid-floating-toolbar__header:active {
    cursor: grabbing;
}

.grid-floating-toolbar__grip {
    font-size: 13px;
    line-height: 1;
}

.grid-floating-toolbar__title {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.grid-floating-toolbar__attach {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--props-text-color);
    cursor: pointer;
}

.grid-floating-toolbar__attach:hover {
    background: var(--hover-button-bg-color);
    color: var(--button-text-color);
}

.grid-floating-toolbar__attach:focus-visible {
    outline: 2px solid #448ee4;
    outline-offset: -1px;
}

.grid-floating-toolbar__items {
    min-height: 38px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dual-projection-label {
    position: absolute;
    top: 8px;
    z-index: 32;
    padding: 4px 9px;
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    font-size: 12px;
    pointer-events: none;
}

.dual-projection-label.active {
    border-color: #58a6ff;
    box-shadow: 0 0 0 1px #58a6ff inset;
}

.dual-projection-label-al {
    left: 8px;
}

.dual-projection-label-bl {
    left: calc(50% + 8px);
}

.dual-projection-preview {
    position: absolute;
    z-index: 30;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--main-bg-color);
    color: var(--button-text-color);
    cursor: pointer;
}

.dual-projection-preview:hover {
    box-shadow: 0 0 0 2px #58a6ff inset;
}

.dual-projection-preview img {
    display: block;
    width: 100%;
    height: 100%;
}

.dual-projection-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 31;
    width: 1px;
    background: var(--button-border-color);
    pointer-events: none;
}

#right-buttons {
    text-align: right;
    font-size: 0.1rem; /* no space between buttons */
}

#left-buttons {
    font-size: 0.1rem; /* no space between buttons */
}

/* class="ui-selectmenu-button ui-button ui-widget topcoat-select ui-selectmenu-button-closed ui-corner-all" */

.ui-selectmenu-text {
    padding-top: 0.2rem;
}

.ui-selectmenu-menu {
    position: absolute;
    top: var(--menu-offset-top);
    left: 0;
}

.selectmenu-wrapper-custom {
    /* Position relative creates a new block.
     * This causes z-order of the popup menu to be ignored.
     * So, sometimes, canvas could be on top of menu (at least from mouse point of view).
     */
    position: relative;
    /*z-index: 50;*/
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--button-border-color);
}

.ui-menu {
  background-color: var(--button-bg-color);
  border: 0.1px solid var(--button-border-color) !important;
  margin-top: 0.1rem;
  /* spacing between cells */
  border-collapse: separate;
  border-spacing: 0px;
}

.ui-menu tr, .ui-menu td {
  padding: 0px 0px 0px 0px !important;
  margin: 0px !important;
  border: 0px !important;
}

.ui-menu-item {
  /* we need all menu items of the same size to avoid menu jumping between two elements
   * when mouse is on the edge */
  background-color: var(--button-bg-color);
  padding: 0px 0px 0px 0px !important;
  margin: 0px !important;
  line-height: 1.6em;
  border: 0px !important;
}

.ui-selectmenu-menu .ui-menu {
    overflow: hidden; /* remove scrollbar on Windows, if ui-menu-item is fixed height */
}

.ui-menu-item-wrapper {
  line-height: 1.6em;
  background-color: var(--button-bg-color);
  position: static !important;
  padding: 0px 0.3em 0px 0.3em !important;
  margin: 0px !important;
}

.menu-active-row div {
  background-color: var(--active-button-bg-color2);
}

.ui-menu-item-wrapper.ui-state-active {
  border: 0px !important;
  background-color: var(--active-button-bg-color);
}

.ui-selectmenu-text {
overflow: visible;
text-overflow: unset;
margin-right: 0px;
}

.ui-selectmenu-button {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;

  vertical-align: top;
  outline: none;

  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: relative;
  display: inline-block;
  vertical-align: top;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 0.15rem 1rem 0.15rem 0.3rem;
  font-size: 12px;
  font-weight: 400;
  height: 1rem;
  letter-spacing: 1px;
  color: var(--button-text-color);
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.69);
  border-radius: 6px;
  background-color: var(--button-bg-color);
  box-shadow: inset 0 1px var(--button-shadow-color);
  border: 1px solid var(--button-border-color);
  background-image: url('../img/drop-down-triangle-dark.png') !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  vertical-align: top;
  display: inline-block;
}

.ui-selectmenu-button,
.ui-selectmenu-button:focus,
.ui-selectmenu-button:hover,
.ui-selectmenu-button-open,
.ui-selectmenu-button-open:focus
 {
  background-color: var(--button-bg-color);
  border: 1px solid var(--button-border-color);
  vertical-align: top;
  display: inline-block;
  height: 1.35em;
}

.ui-selectmenu-text
{
  vertical-align: middle;
  display: inline-block;
}



.topcoat-icon-button:focus {
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 0px #6fb5f1;
  border: 1px solid var(--button-border-color);
}

.topcoat-button-bar__item:focus {
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 0px #6fb5f1;
  border: 1px solid var(--button-border-color);
}

.topcoat-button-bar__button {
  width: 2rem;
  padding: 0;
}

/* square */
.cp-button
{
  height: var(--btn-size-h);
  width: var(--btn-size-w);
  font-size: var(--btn-size-t);
  vertical-align: top;
  display: inline-block;
}

.cp-button2 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button2 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button3 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button6 { /* cp-button3 without display: flex */
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    justify-content: center;
    align-items: center;
}

.cp-button4 { /* big */
  height: calc(2 * var(--btn-size-h));
  width: calc(2 * var(--btn-size-w));
  font-size: calc(2 * var(--btn-size-t));
  display: inline-block;
}

.cp-button5 {
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* XXX should it be cp-button6 ? */
.cp-button5 { /* small */
  font-size: var(--btn-size-ts);
  height: calc(2 * var(--btn-size-ts));
  vertical-align: top;
  display: inline-block;
}

.cp-button7 { /* big cp-button5 */
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    display: flex;
    justify-content: center;
    align-items: center;
}


#lut_add_button_container {
    padding: 0.5em;
}

.topcoat-button-bar {
    vertical-align: top;
}

/* disables text selection */
/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#4407335 */
body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.curve_type_default {
    color: #999;
}


#custom-handle-left,
#custom-handle-right,
#custom-handle-leftMask,
#custom-handle-rightMask {
  box-sizing: border-box;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  top: 50%;
  margin-top: calc(var(--slider-thumb-size) / -2);
  margin-left: calc(var(--slider-thumb-size) / -2);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
  cursor: ew-resize;
}

.ui-slider-region {
    position: absolute;
    height: 100%;
    padding-left: 0.05em;
    padding-right: 0.05em;

    padding-top: 0.05em;
    padding-bottom: 0.05em;
    top: -0.5px; /* get border into account */
}

.ui-mask-region-mid {
  background-color: var(--slider-mid-color);
}

.ui-mask-region-side {
  background-color: var(--slider-side-color);
}

.ui-slider-horizontal {
    /* rest of slider */
    height: 10px;
    border-color: var(--button-border-color) !important;
    background-color: var(--button-bg-color);
}

.ui-widget-header {
    /* beginning of slider */
    background-color: inherit;
}


.lut-projection-type .topcoat-button {
    width: 2.4rem;
    padding: 0;
    text-align: center;
}

.settings-grid-type .topcoat-button {
    width: 2.4rem;
}

input {
pointer-events: none;
}


/* This is for Tobcoat Select Bar (the one that is radio) */
:checked+.topcoat-button {
    background-color: var(--checked-bg-color);
    box-shadow:inset 0 1px hsla(0,0%,0%,.05)
}
.topcoat-button-bar__item:not(:last-child)>.topcoat-button {
    margin-right:-1px
}
.topcoat-button-bar__item>.topcoat-button {
    border-radius:inherit
}

body.click_propagation_disabled div.grid-direct-adjust input:checked+.topcoat-button,
body.click_propagation_disabled div.curve-mouse-type input:checked+.topcoat-button {
    color: #4fb354 !important; /* green */
}

#color_space_react select.topcoat-select {
    width: 5.3em;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  vertical-align: middle;
  display: inline-block;
}

.topcoat-select {
    height: var(--btn-size-h);
    font-size: var(--menu-t);
}

/* for selected menu element */
.cp-state-active {
    color: var(--button-menu-color-active);
    /* glow */
    box-shadow:
      inset 0px  5px 3px -5px #4195fc,
      inset 0px -5px 3px -5px #4195fc,
      inset 5px  0px 3px -5px #4195fc,
      inset 0px  5px 3px -5px #4195fc,
      inset 0px -5px 3px -5px #4195fc,
      inset -5px 0px 3px -5px #4195fc; 
}


/* slider */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background-color: var(--button-bg-color) !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: var(--button-text-color) !important;
    text-shadow: 0 -1px var(--button-text-shadow-color);
    font: inherit;
    font-size: 12px;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    color: var(--button-text-color) !important;
    background-color: var(--hover-button-bg-color) !important;
    text-shadow: 0 -1px var(--button-text-shadow-color);
    font: inherit;
    font-size: 12px;
}

.ui-widget {
    font: inherit;
    font-family: inherit;
}

.ui-selectmenu-text {
    text-shadow: 0 -1px var(--button-text-shadow-color);
}

.ui-widget-content {
    color: var(--button-text-color);
}


#sample_block {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--main-bg-color);
    white-space: normal;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#sample_block img {
    height: var(--sample-height);
    width: var(--sample-height);
}



#colors_block {
    background-color: var(--main-bg-color);
    height: var(--colors-block-height);
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow-x: auto;
    position: absolute;
    z-index: 11;
    font-size: var(--colors-block-font-size);
}

#colors_block::-webkit-scrollbar {
    display: none;
}

.sample-button {
    text-align: center;
    line-height: var(--sample-height);
    padding: 0px;
    width: var(--sample-height);
    height: var(--sample-height);
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    /*display: inline-block; */
    font-size: var(--sample-font-size);
    margin: auto;
    margin-top: 3px;
}

.sample-button:hover {
    background-color: var(--checked-bg-color);
}

.sample-preview {
    position: relative; /* allows for children to set absolute coordinates relative to the parent */
}

.preset-preview {
    position: relative; /* allows for children to set absolute coordinates relative to the parent */
    display: inline-block;
}

/* canvasWidth */
.sample-preview img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

.preset-preview img {
    max-width: 100%;        /* Scale the image to fit the parent */
    max-height: 100%;       /* Scale the image to fit the parent */
    height: auto;           /* Maintain aspect ratio */
    width: auto;            /* Maintain aspect ratio */
    position: absolute;     /* COL-075 to avoid jumping when loading */
}

.preset-button {
    text-align: center;
    line-height: var(--sample-height);
    padding: 0px;
    width: calc(2 * var(--sample-height));
    height: calc(2 * var(--sample-height));
    border: 1px solid var(--tab-border-color);
    color: var(--button-text-color);
    /*display: inline-block; */
    font-size: var(--sample-font-size);
    margin: auto;
    margin-top: 3px;
    margin-left: 3px;

    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    overflow: hidden;       /* Optional: to hide any overflow */
    background-color: var(--checked-bg-color);
}

.preset-group-header {
    font-size: calc(1.2 * var(--menu-t));
    color: var(--button-text-color);
    margin-top: 8px;
    border-bottom: 0.1px solid var(--tab-border-color);
    border-top: 0.1px solid var(--tab-border-color);
    background-color: var(--checked-bg-color);
}

.preset-group-header.icon-up-dir span,
.preset-group-header.icon-down-dir span {
    font-size: calc(0.8 * var(--menu-t));
    position: absolute;
    right: 10px;
    margin-top: calc((1.2 * var(--menu-t) - 0.8 * var(--menu-t)) / 2);
}

.preset-group-header-hidden {
  color: var(--button-text-inactive-color);
}

.preset-group-header:hover,
.preset-group-header-hidden:hover {
  color: var(--button-text-hover-color);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container {
  position: relative;
  margin: 0 8px 7px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(0 0 0 / 8%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 3%) inset;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 7px 69px 7px 9px;
  color: var(--button-text-color);
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
  text-align: left;
  cursor: pointer;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-controls {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 7px;
  display: flex;
  gap: 2px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--panel-actions > .preset-group-header {
  padding-right: 164px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-control {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-control:hover {
  color: var(--button-text-color);
  background: rgb(255 255 255 / 10%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-control:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: -1px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-control--defaults {
  width: 25px;
  min-width: 25px;
}

.panel-defaults-button--restore {
  color: #8fc3ff;
}

.panel-defaults-button:disabled {
  color: var(--button-text-inactive-color);
  background: transparent;
  cursor: default;
  opacity: 1;
}

.panel-defaults-button:disabled:hover {
  color: var(--button-text-inactive-color);
  background: transparent;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  :is(.preset-group-controls, .settings-panel-action-row)
  > .grid-header-menu-trigger {
  display: inline-flex;
  width: 28px;
  height: 25px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 3px;
}

.grid-header-menu-trigger__icon {
  display: grid;
  place-items: center;
}

.grid-header-menu-trigger__caret {
  width: 0;
  height: 0;
  border-top: 3px solid currentColor;
  border-right: 2.5px solid transparent;
  border-left: 2.5px solid transparent;
  opacity: 0.72;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .grid-header-menu-trigger[aria-expanded='true'] {
  color: var(--colorplane-ui-accent);
  background: rgb(var(--colorplane-ui-accent-rgb) / 12%);
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-container:has(> .preset-group-controls > .grid-header-menu-trigger)
  > :is(.preset-group-header, .floating-panel-tabs) {
  padding-right: 176px;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-container.preset-group-container--header-controls-below
  > .floating-panel-tabs {
  padding-right: 4px;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-container.preset-group-container--header-controls-below
  > .preset-group-controls {
  position: static;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 34px;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 4px 6px 5px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%));
}

.preset-group-title-action {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 51px;
  display: inline-flex;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-container--title-action > .preset-group-header .preset-group-heading {
  margin-left: 53px;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-title-action .grid-projection-badge {
  display: inline-flex;
  width: 48px;
  height: 28px;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px;
  color: #e9f5ff;
  border: 1px solid #3979bd;
  border-radius: 6px;
  background: linear-gradient(180deg, #174f82, #0b3158);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 12%),
    0 1px 3px rgb(0 0 0 / 28%);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.055em;
}

:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-title-action .grid-projection-badge:hover,
:is(#props_container, #scopes, #floating_panels, #main_tabs_react)
  .preset-group-title-action .grid-projection-badge--open {
  color: #fff;
  border-color: #5ca8ee;
  background: linear-gradient(180deg, #21679f, #10426f);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 0 0 1px rgb(76 158 231 / 18%),
    0 2px 6px rgb(0 0 0 / 32%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-grip {
  cursor: grab;
  touch-action: none;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-grip:active {
  cursor: grabbing;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--detached {
  position: fixed;
  z-index: 4200;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 16px);
  margin: 0;
  overflow: hidden;
  background: var(--main-bg-color, #292929);
  box-shadow: 0 14px 38px rgb(0 0 0 / 48%);
  pointer-events: auto;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--docked {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--docked-left {
  border-left: 0;
  border-right-color: rgb(255 255 255 / 18%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--docked-right {
  border-right: 0;
  border-left-color: rgb(255 255 255 / 18%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--docked-bottom {
  border-right-color: rgb(255 255 255 / 12%);
  border-bottom: 0;
  border-left-color: rgb(255 255 255 / 12%);
  border-top: 1px solid rgb(255 255 255 / 18%);
}

.preset-group-container--page-split,
.center-panel--docked {
  transition:
    left 360ms cubic-bezier(.22, 1, .36, 1),
    right 360ms cubic-bezier(.22, 1, .36, 1),
    width 360ms cubic-bezier(.22, 1, .36, 1),
    height 360ms cubic-bezier(.22, 1, .36, 1);
}

.preset-group-container--dock-opening {
  will-change: transform;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}

.preset-group-container--dock-opening-left {
  animation-name: dock-panel-roll-in-left;
}

.preset-group-container--dock-opening-right {
  animation-name: dock-panel-roll-in-right;
}

.preset-group-container--dock-opening-bottom,
#scopes.scopes-dock--opening {
  animation-name: dock-panel-roll-in-bottom;
}

#scopes.scopes-dock--opening {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: backwards;
}

@keyframes dock-panel-roll-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes dock-panel-roll-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes dock-panel-roll-in-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preset-group-container--page-split,
  .center-panel--docked {
    transition: none;
  }

  .panel-tab-drag-preview {
    transition: none;
  }

  .preset-group-container--dock-opening,
  #scopes.scopes-dock--opening {
    animation: none;
  }
}

.bottom-panel-separator {
  position: absolute;
  z-index: 4;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.bottom-panel-separator::after {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  width: 2px;
  content: '';
  background: rgb(255 255 255 / 20%);
  transition: background-color 90ms ease, box-shadow 90ms ease;
}

.bottom-panel-separator:hover::after,
.bottom-panel-separator:active::after {
  background: rgb(98 168 255 / 88%);
  box-shadow: 0 0 7px rgb(98 168 255 / 48%);
}

.collapsed-dock-launcher,
.bottom-dock-launcher {
  position: fixed;
  z-index: 2147483600;
  display: grid;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 7px;
  place-items: center;
  color: #9bcfff;
  border: 1px solid rgb(145 202 255 / 48%);
  border-radius: 50%;
  background: rgb(25 37 50 / 82%);
  box-shadow:
    0 6px 20px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  backdrop-filter: blur(9px) saturate(125%);
  cursor: pointer !important;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.collapsed-dock-launcher:active,
.bottom-dock-launcher:active {
  cursor: pointer !important;
  transform: translate(-50%, -50%) scale(.96);
}

.collapsed-dock-launcher:hover,
.bottom-dock-launcher:hover {
  border-color: rgb(155 207 255 / 78%);
  background: rgb(40 60 80 / 90%);
  box-shadow:
    0 8px 24px rgb(0 0 0 / 32%),
    0 0 0 3px rgb(98 168 255 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 14%);
}

.collapsed-dock-launcher--open,
.bottom-dock-launcher--open,
.collapsed-dock-launcher--open:hover,
.bottom-dock-launcher--open:hover {
  color: #d9efff;
  border-color: rgb(155 207 255 / 86%);
  background: rgb(48 72 96 / 92%);
  box-shadow:
    0 8px 26px rgb(0 0 0 / 36%),
    0 0 0 3px rgb(98 168 255 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
}

.collapsed-dock-launcher--open .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon),
.bottom-dock-launcher--open .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon) {
  color: #d9efff !important;
  filter: drop-shadow(0 0 5px rgb(98 168 255 / 48%));
}

.collapsed-dock-launcher--open::after,
.bottom-dock-launcher--open::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 9px;
  height: 9px;
  content: '';
  border: 2px solid rgb(31 47 63 / 96%);
  border-radius: 50%;
  background: #74baff;
  box-shadow: 0 0 8px rgb(98 168 255 / 90%);
}

.collapsed-dock-launcher:focus-visible,
.bottom-dock-launcher:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: 2px;
}

.panel-launcher-icons {
  display: grid;
  width: 32px;
  height: 32px;
  gap: 2px;
  place-items: center;
  pointer-events: none;
}

.panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon) {
  width: 100%;
  min-width: 8px;
  max-width: 28px;
  height: 100%;
  min-height: 8px;
  max-height: 28px;
  color: #9bcfff !important;
  filter: drop-shadow(0 0 3px rgb(98 168 255 / 24%));
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.scopes-dock-launcher-cluster {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}

.scopes-dock-launcher-cluster > .scopes-dock-launcher {
  position: absolute;
  pointer-events: auto;
}

.scopes-dock-launcher[aria-disabled='true'] {
  color: #91a0ae;
  border-color: rgb(165 180 194 / 35%);
  background: rgb(32 38 44 / 82%);
}

.scopes-visibility-trigger {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 11px;
  display: grid;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  padding: 4px;
  place-items: center;
  color: #c6d1dc;
  border: 1px solid rgb(255 255 255 / 19%);
  border-radius: 50%;
  outline: none;
  background: rgb(24 31 39 / 96%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 42%);
  cursor: pointer;
  pointer-events: auto;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.scopes-visibility-trigger:hover,
.scopes-visibility-trigger.is-active {
  color: #ddecff;
  border-color: rgb(145 202 255 / 62%);
  background: #294159;
  transform: scale(1.06);
}

.scopes-visibility-trigger:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: 2px;
}

.scopes-visibility-trigger svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.scopes-visibility-popover {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  width: min(326px, calc(100vw - 24px));
  padding: 12px;
  color: #d8e0e8;
  border: 1px solid rgb(145 202 255 / 27%);
  border-radius: 12px;
  background:
    linear-gradient(155deg, rgb(34 42 51 / 98%), rgb(15 20 26 / 98%));
  box-shadow:
    0 22px 56px rgb(0 0 0 / 58%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
  backdrop-filter: blur(18px) saturate(125%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.scopes-visibility-popover:active {
  cursor: grabbing;
}

.scopes-visibility-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.scopes-visibility-popover__header:active {
  cursor: grabbing;
}

.scopes-visibility-popover__header > span:first-child {
  display: grid;
  gap: 2px;
}

.scopes-visibility-popover__header small {
  color: #83bfff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.scopes-visibility-popover__header strong {
  color: #f1f5f8;
  font-size: 13px;
  font-weight: 650;
}

.scopes-visibility-popover__count {
  min-width: 32px;
  padding: 4px 7px;
  color: #a9c7e5;
  border: 1px solid rgb(145 202 255 / 20%);
  border-radius: 999px;
  background: rgb(98 168 255 / 9%);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.scopes-visibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.scopes-visibility-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  padding: 9px 5px 7px;
  place-items: center;
  gap: 4px;
  color: #7f8a95;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  outline: none;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.scopes-visibility-tile:hover {
  color: #d6e5f4;
  border-color: rgb(145 202 255 / 32%);
  background: rgb(98 168 255 / 8%);
  transform: translateY(-1px);
}

.scopes-visibility-tile:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: 1px;
}

.scopes-visibility-tile.is-visible {
  color: #edf7ff;
  border-color: rgb(145 202 255 / 48%);
  background:
    linear-gradient(150deg, rgb(69 125 177 / 28%), rgb(39 73 105 / 18%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 0 0 1px rgb(98 168 255 / 5%);
}

.scopes-visibility-tile .scope-panel-icon {
  width: 31px;
  height: 31px;
  filter: grayscale(.35) brightness(.72);
  fill: none;
  opacity: .62;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.scopes-visibility-tile.is-visible .scope-panel-icon {
  filter: brightness(1.2) drop-shadow(0 0 3px currentColor);
  opacity: 1;
  transform: scale(1.04);
}

.scopes-visibility-tile > span:not(.scopes-visibility-tile__state) {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scopes-visibility-tile__state {
  position: absolute;
  top: 5px;
  right: 6px;
  color: #69737d;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scopes-visibility-tile.is-visible .scopes-visibility-tile__state {
  color: #8ecaff;
}

.panel-drop-zones {
  position: fixed;
  /* Keep drag targets above floating/docked panels, but below their launchers. */
  z-index: 2147483646;
  inset: 0;
  pointer-events: none;
}

.panel-drop-zone {
  position: fixed;
  box-sizing: border-box;
  opacity: 0.34;
  border: 1px dashed rgb(143 195 255 / 78%);
  background: rgb(74 151 240 / 13%);
  box-shadow: inset 0 0 18px rgb(98 168 255 / 8%);
  transition:
    opacity 90ms ease,
    border-color 90ms ease,
    background-color 90ms ease,
    box-shadow 90ms ease,
    transform 90ms ease;
}

.panel-drop-zone--window-left,
.panel-drop-zone--window-right {
  top: 0;
  bottom: 0;
  width: 40px;
}

.panel-drop-zone--window-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.panel-drop-zone--window-left {
  left: 0;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.panel-drop-zone--window-right {
  right: 0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.panel-drop-zone--group {
  border-color: rgb(143 195 255 / 68%);
  border-radius: 8px;
  background: rgb(74 151 240 / 10%);
  box-shadow: inset 0 0 14px rgb(98 168 255 / 7%);
}

.panel-drop-zone--dock-border {
  border-top: 0;
  border-bottom: 0;
  background: linear-gradient(90deg, transparent, rgb(74 151 240 / 22%), transparent);
}

.panel-drop-zone--bottom-insert {
  border-color: rgb(255 191 105 / 82%);
  background: rgb(234 145 55 / 16%);
  box-shadow: inset 0 0 18px rgb(234 145 55 / 10%);
}

.panel-drop-zone--accordion-insert {
  opacity: 0.58;
  border: 1px dashed rgb(143 195 255 / 74%);
  border-radius: 5px;
  background:
    linear-gradient(
      180deg,
      transparent 7px,
      rgb(98 168 255 / 40%) 7px,
      rgb(98 168 255 / 40%) 10px,
      transparent 10px
    );
  box-shadow: none;
}

.panel-drop-zone--accordion-insert.panel-drop-zone--active {
  border-color: rgb(155 255 203 / 96%);
  background:
    linear-gradient(
      180deg,
      rgb(70 190 130 / 10%) 6px,
      rgb(155 255 203 / 96%) 6px,
      rgb(155 255 203 / 96%) 11px,
      rgb(70 190 130 / 10%) 11px
    );
  box-shadow:
    0 0 0 3px rgb(70 190 130 / 14%),
    0 0 18px rgb(70 190 130 / 34%);
  transform: scaleX(1.02);
}

.panel-drop-zone--bottom-insert.panel-drop-zone--active {
  background-color: rgb(234 145 55 / 30%);
  box-shadow: inset 0 0 24px rgb(234 145 55 / 24%), 0 0 14px rgb(234 145 55 / 22%);
}

.panel-drop-zone--active {
  opacity: 1;
  border-style: solid;
  border-width: 2px;
  background-color: rgb(74 151 240 / 28%);
  box-shadow: inset 0 0 28px rgb(98 168 255 / 24%), 0 0 16px rgb(98 168 255 / 24%);
  transform: scale(1.025);
}

.panel-drop-zone--group.panel-drop-zone--active {
  border-color: rgb(155 255 203 / 98%);
  background-color: rgb(70 190 130 / 34%);
  box-shadow:
    inset 0 0 28px rgb(70 190 130 / 30%),
    0 0 0 3px rgb(70 190 130 / 16%),
    0 0 22px rgb(70 190 130 / 34%);
}

.panel-drop-zone--active::after {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 3px 7px;
  color: #f3f7fb;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 4px;
  background: rgb(20 28 38 / 88%);
  content: attr(data-label);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.preset-group-container--drag-origin {
  opacity: 0.28;
  filter: saturate(0.45);
  transition: opacity 100ms ease, filter 100ms ease;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .panel-drop-zone--active {
    animation: panel-drop-zone-pulse 900ms ease-in-out infinite alternate;
  }

  @keyframes panel-drop-zone-pulse {
    from { filter: brightness(0.94); }
    to { filter: brightness(1.16); }
  }
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--detached > .preset-group-header {
  flex: 0 0 auto;
}

.floating-panel-tabs {
  box-sizing: border-box;
  display: flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 2px;
  padding: 5px 66px 0 4px;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%));
}

.floating-panel-tab-viewport {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.floating-panel-tab-scroll {
  display: flex;
  height: 100%;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
}

.floating-panel-tabs--beginner {
  min-height: 54px;
  gap: 6px;
  padding: 6px;
  border-bottom-color: rgb(var(--colorplane-accent-rgb) / 22%);
  background: color-mix(in srgb, var(--main-bg-color) 92%, var(--colorplane-accent-soft));
}

.floating-panel-tabs--beginner .floating-panel-tab-scroll {
  align-items: stretch;
  gap: 6px;
}

.floating-panel-tabs--beginner .floating-panel-tab {
  min-width: 104px;
  height: 42px;
  flex: 1 1 104px;
  justify-content: flex-start;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 14%);
  border-radius: 10px;
  background: rgb(255 255 255 / 4%);
  cursor: pointer;
}

.floating-panel-tabs--beginner .floating-panel-tab:active {
  cursor: pointer;
}

.floating-panel-tabs--beginner .floating-panel-tab:hover,
.floating-panel-tabs--beginner .floating-panel-tab:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 45%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
}

.floating-panel-tabs--beginner .floating-panel-tab--active {
  color: var(--button-text-color);
  border-color: rgb(var(--colorplane-accent-rgb) / 62%);
  background: rgb(var(--colorplane-accent-rgb) / 18%);
  box-shadow: none;
}

.floating-panel-tabs--beginner .floating-panel-tab > span {
  font-size: 12px;
  font-weight: 700;
}

.beginner-workflow-step {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 28%);
  border-radius: 50%;
  background: rgb(var(--colorplane-accent-rgb) / 8%);
  font-size: 10px;
  line-height: 1;
}

.floating-panel-tabs--beginner .floating-panel-tab--active .beginner-workflow-step {
  color: #fff;
  border-color: var(--colorplane-accent-strong);
  background: var(--colorplane-accent-strong);
}

.floating-panel-collapse {
  display: grid;
  width: 28px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.floating-panel-view-toggle {
  display: grid;
  width: 28px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.floating-panel-view-toggle:hover {
  color: var(--button-text-color);
  background: rgb(255 255 255 / 7%);
}

.floating-panel-accordion-nav {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: flex-start;
  gap: 2px;
  padding: 0 1px 7px;
  overflow: auto hidden;
  scrollbar-color: rgb(118 178 239 / 44%) transparent;
  scrollbar-width: thin;
}

.floating-panel-accordion-nav::-webkit-scrollbar {
  height: 5px;
}

.floating-panel-accordion-nav::-webkit-scrollbar-track {
  margin-inline: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 3%);
}

.floating-panel-accordion-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(118 178 239 / 34%);
}

.floating-panel-accordion-nav:hover::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 6%);
}

.floating-panel-accordion-nav:hover::-webkit-scrollbar-thumb {
  background: rgb(118 178 239 / 62%);
}

.floating-panel-accordion-nav-item {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.floating-panel-accordion-nav-item > .preset-group-icon {
  width: 18px;
  height: 18px;
}

.floating-panel-accordion-nav-item:hover {
  color: var(--button-text-color);
  background: rgb(255 255 255 / 7%);
}

.floating-panel-accordion-nav-item--active {
  color: #f2f7ff;
  border-color: rgb(98 168 255 / 42%);
  background: rgb(98 168 255 / 18%);
  box-shadow: inset 0 -2px #62a8ff;
}

.floating-panel-accordion-nav-item--active > .preset-group-icon {
  color: #8fc3ff;
}

.floating-panel-accordion-nav-item--dragging {
  color: #fff;
  background: rgb(98 168 255 / 28%);
  box-shadow: 0 0 0 2px #62a8ff inset;
}

.floating-panel-collapse:hover {
  color: var(--button-text-color);
  background: rgb(255 255 255 / 7%);
}

.floating-panel-collapse > .preset-group-chevron {
  width: 7px;
  height: 7px;
}

.floating-panel-collapse[aria-expanded='false'] > .preset-group-chevron {
  transform: rotate(-45deg);
}

.floating-panel-tab {
  box-sizing: border-box;
  display: flex;
  min-width: 58px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: transparent;
  font: inherit;
  cursor: grab;
}

.floating-panel-tab:active {
  cursor: grabbing;
}

.floating-panel-tab > .preset-group-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.floating-panel-tab > span {
  flex: 0 0 auto;
  font-size: calc(0.78 * var(--menu-t));
  white-space: nowrap;
}

.panel-tab-drag-preview {
  position: fixed;
  z-index: 2147483647;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid rgb(120 185 248 / 62%);
  background: color-mix(in srgb, var(--main-bg-color, #292929) 94%, #254d74);
  box-shadow:
    0 18px 46px rgb(0 0 0 / 42%),
    0 0 0 2px rgb(98 168 255 / 13%);
  opacity: .96;
  pointer-events: none;
  transition:
    left 90ms cubic-bezier(.22, 1, .36, 1),
    top 90ms cubic-bezier(.22, 1, .36, 1),
    width 140ms cubic-bezier(.22, 1, .36, 1),
    height 140ms cubic-bezier(.22, 1, .36, 1),
    border-radius 140ms ease,
    box-shadow 140ms ease;
}

.panel-tab-drag-preview--tab {
  display: flex;
  padding: 0 11px;
  align-items: center;
  gap: 7px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgb(61 94 130 / 98%), rgb(35 55 77 / 98%));
  box-shadow:
    0 10px 24px rgb(0 0 0 / 35%),
    inset 0 -3px #62a8ff;
  font-size: calc(0.78 * var(--menu-t));
  font-weight: 650;
}

.panel-tab-drag-preview--tab > .preset-group-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #9bcfff;
}

.panel-tab-drag-preview--tab > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-tab-drag-preview--panel {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}

.panel-tab-drag-preview--accordion {
  border-radius: 6px;
  box-shadow:
    0 10px 26px rgb(0 0 0 / 36%),
    0 0 0 2px rgb(98 168 255 / 16%);
}

.panel-tab-drag-preview__header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 46px;
  flex: 0 0 46px;
  padding: 7px 10px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%));
}

.panel-tab-drag-preview__header > .preset-group-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #9bcfff;
}

.panel-tab-drag-preview__header > .preset-group-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  transform: rotate(-45deg);
}

.panel-tab-drag-preview__heading {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.panel-tab-drag-preview__heading strong,
.panel-tab-drag-preview__heading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-tab-drag-preview__heading strong {
  font-size: 12px;
}

.panel-tab-drag-preview__heading small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.panel-tab-drag-preview__detach {
  margin-left: auto;
  color: #9bcfff;
  font-size: 15px;
}

.panel-tab-drag-preview__body {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px;
  place-content: center;
  place-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color);
  background:
    linear-gradient(rgb(255 255 255 / 2%), rgb(0 0 0 / 7%)),
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      rgb(255 255 255 / 1.5%) 11px 12px
    );
  text-align: center;
}

.panel-tab-drag-preview__body > .preset-group-icon {
  width: 34px;
  height: 34px;
  color: #82baf5;
  opacity: .82;
}

.panel-tab-drag-preview__body strong {
  color: var(--button-text-color);
  font-size: 13px;
}

.panel-tab-drag-preview__body span {
  font-size: 10px;
}

.floating-panel-tab[data-icon-only='true'] {
  width: var(--compact-tab-width, 36px);
  min-width: var(--compact-tab-width, 36px);
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}

.floating-panel-tab[data-icon-only='true'] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.panel-library-trigger {
  position: fixed;
  z-index: 99940;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  opacity: 0.5;
  color: rgb(225 235 246 / 88%);
  border: 1px solid rgb(156 196 236 / 24%);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgb(49 59 70 / 94%), rgb(24 29 35 / 94%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    0 7px 22px rgb(0 0 0 / 32%);
  font: inherit;
  text-align: left;
  transition:
    opacity 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
  cursor: grab;
  touch-action: none;
  backdrop-filter: blur(12px) saturate(130%);
  user-select: none;
}

.panel-library-trigger:hover,
.panel-library-trigger:focus-visible,
.panel-library-trigger--dragging {
  opacity: 1;
  color: var(--button-text-color);
  border-color: rgb(98 168 255 / 58%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 13%),
    0 0 0 1px rgb(98 168 255 / 10%),
    0 9px 28px rgb(0 0 0 / 42%);
}

.panel-library-trigger:hover {
  transform: translateY(-1px);
}

.panel-library-trigger--dragging {
  transform: scale(1.015);
  cursor: grabbing;
}

.panel-library-theme-trigger {
  cursor: pointer;
}

.panel-library-settings-trigger {
  cursor: pointer;
}

.panel-library-theme-trigger[aria-disabled='true'] {
  opacity: 0.3;
  color: var(--button-text-inactive-color);
}

.panel-library-theme-trigger[aria-disabled='true']:hover {
  transform: none;
  border-color: rgb(255 255 255 / 13%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    0 7px 22px rgb(0 0 0 / 32%);
}

.panel-library-trigger-icon,
.panel-library-search-icon {
  display: grid;
  place-items: center;
  color: #8fc3ff;
}

.panel-library-trigger-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.panel-library-settings-menu,
.panel-library-theme-menu {
  position: fixed;
  z-index: 99945;
  box-sizing: border-box;
  width: min(244px, calc(100vw - 16px));
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgb(51 58 67 / 98%), rgb(31 35 41 / 98%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 7%),
    0 18px 48px rgb(0 0 0 / 52%);
  backdrop-filter: blur(12px) saturate(130%);
}

.panel-library-theme-menu {
  width: min(284px, calc(100vw - 16px));
}

.panel-library-settings-menu {
  color: var(--button-text-color);
}

.panel-library-settings-menu header {
  color: color-mix(in srgb, var(--button-text-color) 72%, transparent);
}

.panel-library-settings-menu header,
.panel-library-theme-menu header {
  padding: 9px 11px 8px;
  color: color-mix(in srgb, var(--button-text-color) 72%, transparent);
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-library-theme-menu button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-library-theme-menu button:last-child {
  border-bottom: 0;
}

.panel-library-theme-menu button:hover,
.panel-library-theme-menu button:focus-visible,
.panel-library-theme-menu button[aria-checked='true'] {
  outline: 0;
  background: rgb(var(--colorplane-ui-accent-rgb) / 13%);
}

.panel-library-theme-menu button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.panel-library-theme-menu strong {
  font-size: 12px;
  font-weight: 650;
}

.panel-library-theme-menu small {
  color: color-mix(in srgb, var(--button-text-color) 68%, transparent);
  font-size: 9.5px;
}

.panel-library-theme-menu button > i {
  color: var(--colorplane-ui-accent);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.panel-library-theme-menu__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--colorplane-ui-accent);
  border: 1px solid rgb(var(--colorplane-ui-accent-rgb) / 28%);
  border-radius: 50%;
  background: rgb(var(--colorplane-ui-accent-rgb) / 8%);
}

.panel-library-theme-menu__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}

.panel-library-settings-menu button {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-library-settings-menu button:last-child {
  border-bottom: 0;
}

.panel-library-settings-menu button:hover,
.panel-library-settings-menu button:focus-visible {
  outline: 0;
  background: rgb(98 168 255 / 14%);
}

.panel-library-settings-menu button span {
  font-size: 12px;
  font-weight: 600;
}

.panel-library-settings-menu button small {
  color: color-mix(in srgb, var(--button-text-color) 68%, transparent);
  font-size: 10px;
}

.panel-library-settings-menu .panel-library-settings-danger span {
  color: #ffb6a5;
}

.panel-library-settings-menu .panel-library-settings-danger:hover,
.panel-library-settings-menu .panel-library-settings-danger:focus-visible {
  background: rgb(255 101 78 / 11%);
}

.workspace-settings-backdrop {
  position: fixed;
  z-index: 100000;
  display: grid;
  padding: 28px;
  place-items: center;
  background: rgb(5 7 10 / 76%);
  backdrop-filter: blur(10px);
  inset: 0;
}

.workspace-settings-dialog {
  box-sizing: border-box;
  display: flex;
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  flex-direction: column;
  color: #eef1f7;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgb(114 94 255 / 15%), transparent 30%),
    radial-gradient(circle at 92% 5%, rgb(49 154 255 / 11%), transparent 32%),
    #1b1e23;
  box-shadow:
    0 28px 90px rgb(0 0 0 / 62%),
    0 1px 0 rgb(255 255 255 / 8%) inset;
}

.workspace-settings-dialog--clean-state {
  width: min(560px, calc(100vw - 40px));
}

.workspace-settings-header {
  display: flex;
  padding: 22px 24px 17px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.workspace-settings-header > div {
  min-width: 0;
}

.workspace-settings-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #9c90ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-settings-header h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 21px;
  font-weight: 670;
  letter-spacing: -0.02em;
}

.workspace-settings-header p {
  margin: 5px 0 0;
  color: rgb(230 234 242 / 58%);
  font-size: 11px;
  line-height: 1.45;
}

.workspace-settings-close {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: rgb(255 255 255 / 70%);
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.workspace-settings-close:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 10%);
}

.workspace-settings-content {
  overflow: hidden auto;
  padding: 22px 24px 26px;
}

.workspace-settings-section {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 11px;
  background: rgb(255 255 255 / 3%);
}

.workspace-settings-section + .workspace-settings-section {
  margin-top: 14px;
}

.workspace-settings-section-heading {
  padding: 15px 16px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.workspace-settings-section-heading h3 {
  margin: 0;
  color: #f1f4fa;
  font-size: 13px;
  font-weight: 650;
}

.workspace-settings-section-heading p {
  margin: 4px 0 0;
  color: rgb(230 234 242 / 52%);
  font-size: 10px;
  line-height: 1.4;
}

.workspace-layout-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  gap: 8px;
}

.workspace-layout-preset {
  display: flex;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-align: left;
  background: rgb(0 0 0 / 14%);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.workspace-layout-preset:hover {
  border-color: rgb(79 156 255 / 46%);
  background: rgb(79 156 255 / 9%);
  transform: translateY(-1px);
}

.workspace-layout-preset:focus-visible {
  outline: 2px solid #4f9cff;
  outline-offset: 2px;
}

.workspace-layout-preset.is-active {
  border-color: rgb(79 156 255 / 62%);
  background: linear-gradient(135deg, rgb(45 114 200 / 18%), rgb(48 145 166 / 10%));
}

.workspace-layout-preset > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.workspace-layout-preset strong {
  color: #eef3fb;
  font-size: 11px;
  font-weight: 650;
}

.workspace-layout-preset small {
  color: rgb(230 234 242 / 54%);
  font-size: 9px;
  line-height: 1.35;
}

.workspace-layout-preset i {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  place-items: center;
  color: rgb(196 218 248 / 72%);
  font-size: 12px;
  font-style: normal;
  background: rgb(255 255 255 / 6%);
}

.workspace-layout-preset.is-active i {
  color: #fff;
  background: #357fce;
}

.workspace-layout-note {
  margin: 0;
  padding: 0 16px 14px;
  color: rgb(230 234 242 / 46%);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .workspace-layout-presets {
    grid-template-columns: 1fr;
  }
}

.zcam-settings .settings-section-heading td {
  padding-top: 16px;
  color: var(--props-text-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zcam-settings .settings-section-note td {
  padding: 2px 8px 8px;
  color: var(--props-text-color);
  font-size: 10px;
  line-height: 1.4;
}

.zcam-settings .settings-panel-note {
  margin: 8px 10px 12px;
  padding: 9px 10px;
  border: 1px solid rgb(128 128 128 / 25%);
  border-radius: 6px;
  color: rgb(128 128 128);
  font-size: 11px;
}

.zcam-settings--inactive table {
  opacity: 0.55;
}

.sliders-group-panel .settings-panel-note {
  margin: 8px 10px 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--props-text-color) 28%, transparent);
  border-radius: 6px;
  color: var(--props-text-color);
  font-size: 11px;
  line-height: 1.45;
}

.sliders-group-panel td:first-child {
  display: grid;
  min-width: 118px;
  gap: 2px;
}

.sliders-group-panel td:first-child strong {
  color: var(--button-text-color);
  font-size: calc(0.5 * var(--menu-t));
}

.sliders-group-panel td:first-child small {
  color: var(--button-text-inactive-color);
  font-size: calc(0.36 * var(--menu-t));
  line-height: 1.3;
}

.sliders-group-panel tr + tr td {
  padding-top: 10px;
}

.sliders-group-panel tr:nth-child(2) input[type='range'] {
  accent-color: #a865a0;
}

.sliders-group-panel tr:nth-child(3) input[type='range'] {
  accent-color: #67a8c8;
}

.sliders-group-panel tr:nth-child(4) input[type='range'] {
  accent-color: #9a84d2;
}

.sliders-group-panel tr:nth-child(5) input[type='range'] {
  accent-color: #c08d51;
}

.workspace-settings-toggle {
  position: relative;
  display: flex;
  min-height: 66px;
  padding: 13px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
}

.workspace-settings-toggle:hover {
  background: rgb(79 156 255 / 7%);
}

.workspace-settings-toggle-copy {
  display: grid;
  gap: 4px;
}

.workspace-settings-toggle-copy strong {
  color: #eef2f8;
  font-size: 12px;
  font-weight: 630;
}

.workspace-settings-toggle-copy small {
  max-width: 430px;
  color: rgb(230 234 242 / 54%);
  font-size: 10px;
  line-height: 1.4;
}

.workspace-settings-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
  opacity: 0;
}

.workspace-settings-toggle-track {
  box-sizing: border-box;
  contain: paint;
  width: 34px;
  height: 19px;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 99px;
  background: rgb(0 0 0 / 24%);
  transition: background 140ms ease, border-color 140ms ease;
}

.workspace-settings-toggle-track > span {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #bdc1c5;
  box-shadow: 0 1px 3px rgb(0 0 0 / 38%);
  transition: transform 140ms ease, background 140ms ease;
}

.workspace-settings-toggle > input:checked + .workspace-settings-toggle-track {
  border-color: #3b8ff3;
  background: linear-gradient(135deg, #398bea, #55b8d6);
}

.workspace-settings-toggle > input:checked + .workspace-settings-toggle-track > span {
  background: #fff;
  transform: translateX(15px);
}

.workspace-settings-toggle > input:focus-visible + .workspace-settings-toggle-track,
.workspace-settings-close:focus-visible {
  outline: 2px solid #4f9cff;
  outline-offset: 2px;
}

.clean-state-content {
  display: grid;
  padding: 20px 24px;
  gap: 12px;
}

.clean-state-content p {
  margin: 0;
  color: rgb(238 241 247 / 72%);
  font-size: 12px;
  line-height: 1.55;
}

.clean-state-content .clean-state-warning {
  padding: 11px 12px;
  color: rgb(255 222 211 / 88%);
  border: 1px solid rgb(255 126 94 / 24%);
  border-radius: 8px;
  background: rgb(185 65 43 / 10%);
}

.clean-state-content .clean-state-remote {
  color: rgb(194 221 255 / 76%);
}

.clean-state-content .clean-state-error {
  color: #ffc1b3;
}

.clean-state-actions {
  display: flex;
  padding: 0 24px 22px;
  justify-content: flex-end;
  gap: 9px;
}

.clean-state-actions button {
  min-height: 34px;
  padding: 7px 13px;
  color: #e8edf5;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 8px;
  background: rgb(255 255 255 / 6%);
  font: inherit;
  font-size: 11px;
  font-weight: 620;
  cursor: pointer;
}

.clean-state-actions button:hover:not(:disabled),
.clean-state-actions button:focus-visible {
  outline: 0;
  border-color: rgb(255 255 255 / 25%);
  background: rgb(255 255 255 / 11%);
}

.clean-state-actions .clean-state-confirm {
  color: #fff6f2;
  border-color: rgb(255 126 94 / 38%);
  background: rgb(185 65 43 / 58%);
}

.clean-state-actions .clean-state-confirm:hover:not(:disabled),
.clean-state-actions .clean-state-confirm:focus-visible {
  border-color: rgb(255 148 120 / 66%);
  background: rgb(204 72 48 / 78%);
}

.clean-state-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.panel-library-backdrop {
  position: fixed;
  z-index: 100000;
  display: grid;
  padding: 14px;
  place-items: center;
  inset: 0;
  background: rgb(6 9 13 / 68%);
  backdrop-filter: blur(5px);
}

.panel-library-dialog {
  box-sizing: border-box;
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden auto;
  color: #edf5ff;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgb(51 58 67 / 98%), rgb(31 35 41 / 98%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 7%),
    0 24px 76px rgb(0 0 0 / 62%);
}

.panel-library-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  background: rgb(29 34 41 / 98%);
}

.panel-library-search-icon {
  width: 22px;
  height: 22px;
}

.panel-library-search-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.panel-library-header input {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  padding: 0;
  color: #edf5ff;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.panel-library-header input::placeholder {
  color: rgb(205 218 232 / 58%);
}

.panel-library-header kbd {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: rgb(215 228 241 / 70%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 4px;
  background: rgb(0 0 0 / 18%);
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
}

.panel-library-header button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: rgb(210 223 237 / 68%);
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.panel-library-header button:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

.panel-library-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 10px;
}

.panel-library-group {
  min-width: 0;
}

.panel-library-group h2 {
  margin: 0 0 6px;
  color: rgb(174 195 217 / 76%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-library-results {
  display: grid;
  gap: 2px;
}

.panel-library-result {
  display: grid;
  min-width: 0;
  min-height: 43px;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  color: #edf5ff;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-library-result:hover,
.panel-library-result:focus-visible {
  border-color: rgb(98 168 255 / 38%);
  outline: 0;
  background: rgb(98 168 255 / 13%);
}

.panel-library-result .preset-group-icon {
  width: 22px;
  height: 22px;
  color: #8fc3ff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-library-result > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.panel-library-result-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.panel-library-result strong,
.panel-library-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-library-result strong {
  font-size: 12px;
}

.panel-library-result small {
  color: rgb(191 207 223 / 68%);
  font-size: 10px;
}

.panel-library-result-match span {
  color: #8fc3ff;
  font-weight: 700;
}

.panel-library-open {
  color: transparent;
}

.panel-library-result:hover .panel-library-open,
.panel-library-result:focus-visible .panel-library-open {
  color: #8fc3ff;
}

.panel-library-empty {
  padding: 38px 20px;
  color: rgb(191 207 223 / 68%);
  text-align: center;
}

.panel-search-reveal {
  position: relative;
  z-index: 1;
  border-radius: 6px;
  outline: 2px solid rgb(77 166 255 / 88%);
  outline-offset: 3px;
  animation: panel-search-reveal-pulse 900ms ease-out 2;
}

@keyframes panel-search-reveal-pulse {
  0% {
    background-color: rgb(77 166 255 / 28%);
    box-shadow: 0 0 0 0 rgb(77 166 255 / 42%);
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 9px transparent;
  }
}

.help-wiki-backdrop {
  z-index: 2147483646;
}

.help-wiki-dialog {
  --help-wiki-surface: #252c34;
  --help-wiki-surface-sunken: #191f27;
  --help-wiki-toolbar: #10151d;
  --help-wiki-text: #e8eef5;
  --help-wiki-heading: #f4f8fd;
  --help-wiki-muted: #b8c5d2;
  --help-wiki-subtle: #9eafc0;
  --help-wiki-accent: #8fc3ff;
  display: flex;
  height: min(680px, calc(100vh - 28px));
  overflow: hidden;
  color: var(--help-wiki-text);
  background: var(--help-wiki-surface);
  flex-direction: column;
}

.help-wiki-article,
.help-wiki-index {
  -webkit-user-select: text;
  user-select: text;
}

.help-wiki-dialog button {
  -webkit-user-select: none;
  user-select: none;
}

.help-wiki-dialog button:disabled {
  opacity: 1;
}

.help-wiki-header {
  flex: 0 0 auto;
}

.help-wiki-mobile-nav {
  display: none;
}

.help-wiki-count {
  flex: 0 0 auto;
  color: var(--help-wiki-subtle);
  font-size: 10px;
  white-space: nowrap;
}

.help-wiki-layout {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--help-wiki-surface);
  grid-template-columns: minmax(230px, 0.38fr) minmax(320px, 0.62fr);
}

.help-wiki-index {
  min-width: 0;
  overflow: hidden auto;
  padding: 10px;
  border-right: 1px solid rgb(255 255 255 / 9%);
  background: var(--help-wiki-surface-sunken);
}

.help-wiki-filters {
  position: sticky;
  z-index: 2;
  top: -10px;
  margin: -10px -10px 11px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: var(--help-wiki-toolbar);
}

.help-wiki-kinds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.help-wiki-kinds button {
  min-width: 0;
  padding: 6px 3px;
  color: var(--help-wiki-muted);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 5px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.help-wiki-kinds button:hover,
.help-wiki-kinds button:focus-visible,
.help-wiki-kinds button.is-selected {
  color: #eef6ff;
  border-color: rgb(98 168 255 / 45%);
  outline: 0;
  background: rgb(98 168 255 / 15%);
}

.help-wiki-section-picker {
  display: grid;
  margin-top: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--help-wiki-subtle);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.help-wiki-section-picker select {
  width: 100%;
  min-width: 0;
  padding: 5px 25px 5px 8px;
  color: #e5effa;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 5px;
  outline: 0;
  background-color: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

.help-wiki-section-picker select:focus-visible {
  border-color: rgb(98 168 255 / 58%);
  box-shadow: 0 0 0 2px rgb(98 168 255 / 12%);
}

.help-wiki-group + .help-wiki-group {
  margin-top: 13px;
}

.help-wiki-group h2 {
  margin: 0 7px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--help-wiki-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-wiki-group h2 small {
  min-width: 17px;
  padding: 1px 5px;
  color: var(--help-wiki-subtle);
  border-radius: 99px;
  background: rgb(255 255 255 / 6%);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
}

.help-wiki-group > div {
  display: grid;
  gap: 2px;
}

.help-wiki-featured-lab {
  position: relative;
  min-width: 0;
  margin: 10px 10px 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  color: #ecfbf8;
  border: 1px solid rgb(116 213 195 / 34%);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 0%, rgb(116 213 195 / 19%), transparent 48%),
    linear-gradient(145deg, rgb(32 66 70 / 72%), rgb(20 29 42 / 94%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 8px 20px rgb(0 0 0 / 16%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-wiki-featured-lab:hover,
.help-wiki-featured-lab:focus-visible {
  border-color: rgb(116 213 195 / 70%);
  outline: 0;
  background:
    radial-gradient(circle at 10% 0%, rgb(116 213 195 / 27%), transparent 50%),
    linear-gradient(145deg, rgb(35 75 77 / 82%), rgb(22 33 47 / 98%));
}

.help-wiki-featured-lab__visual {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 9px;
  background: conic-gradient(from 22deg, #ef5a50, #eec65c, #62ce9c, #5fb5e4, #866ee2, #de669f, #ef5a50);
  box-shadow: inset 0 0 14px rgb(4 10 15 / 40%);
}

.help-wiki-featured-lab__visual::after {
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(9 17 24 / 20%);
  content: '';
}

.help-wiki-featured-lab__visual i {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 8px;
  width: 34px;
  height: 1px;
  background: rgb(255 255 255 / 75%);
  transform-origin: center;
}

.help-wiki-featured-lab__visual i:nth-child(2) { transform: rotate(60deg); }
.help-wiki-featured-lab__visual i:nth-child(3) { transform: rotate(120deg); }

.help-wiki-featured-lab__copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.help-wiki-featured-lab__copy small {
  color: #74d5c3;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.help-wiki-featured-lab__copy strong {
  font-size: 13px;
  letter-spacing: -.01em;
}

.help-wiki-featured-lab__copy > span {
  color: #c1d5d5;
  font-size: 9px;
  line-height: 1.4;
}

.help-wiki-featured-lab__open {
  grid-column: 2;
  color: #9ce9db;
  font-size: 9px;
  font-weight: 650;
}

.help-wiki-featured-lab:hover .help-wiki-featured-lab__open i,
.help-wiki-featured-lab:focus-visible .help-wiki-featured-lab__open i {
  display: inline-block;
  transform: translateX(2px);
}

.help-wiki-group button {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  color: var(--help-wiki-heading);
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-wiki-group--course button {
  grid-template-columns: 24px minmax(0, 1fr) 12px;
}

.help-wiki-group button:hover,
.help-wiki-group button:focus-visible,
.help-wiki-group button.is-selected {
  border-color: rgb(98 168 255 / 38%);
  outline: 0;
  background: rgb(98 168 255 / 13%);
}

.help-wiki-group button.is-selected {
  box-shadow: inset 3px 0 #62a8ff;
}

.help-wiki-group button > span:not(.help-wiki-open, .help-wiki-lesson-number) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.help-wiki-lesson-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--help-wiki-accent);
  border: 1px solid rgb(98 168 255 / 24%);
  border-radius: 6px;
  background: rgb(98 168 255 / 7%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.help-wiki-group button strong,
.help-wiki-group button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-wiki-group button strong {
  font-size: 11px;
  font-weight: 650;
}

.help-wiki-group button small {
  color: var(--help-wiki-muted);
  font-size: 9px;
}

.help-wiki-open {
  color: transparent;
  font-size: 17px;
  line-height: 1;
}

.help-wiki-group button:hover .help-wiki-open,
.help-wiki-group button:focus-visible .help-wiki-open,
.help-wiki-group button.is-selected .help-wiki-open {
  color: #8fc3ff;
}

.help-wiki-article {
  min-width: 0;
  overflow: hidden auto;
  padding: 32px 38px 44px;
  color: var(--help-wiki-text);
  background: var(--help-wiki-surface);
  font-size: 12px;
  line-height: 1.65;
}

.help-wiki-breadcrumbs {
  display: flex;
  margin: -16px 0 20px;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--help-wiki-subtle);
  font-size: 9px;
  white-space: nowrap;
}

.help-wiki-breadcrumbs button {
  padding: 0;
  color: #9ac9ff;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.help-wiki-breadcrumbs button:hover,
.help-wiki-breadcrumbs button:focus-visible {
  color: #d9ebff;
  outline: 0;
  text-decoration: underline;
}

.help-wiki-breadcrumbs strong {
  overflow: hidden;
  color: var(--help-wiki-muted);
  font-weight: 600;
  text-overflow: ellipsis;
}

.help-wiki-page-nav {
  position: sticky;
  z-index: 1;
  top: -32px;
  display: flex;
  margin: 14px -8px 18px;
  overflow: auto hidden;
  padding: 7px 8px;
  gap: 5px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  background: var(--help-wiki-toolbar);
  backdrop-filter: blur(10px);
  scrollbar-width: thin;
}

.help-wiki-page-nav button {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--help-wiki-muted);
  border: 1px solid transparent;
  border-radius: 99px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.help-wiki-page-nav button:hover,
.help-wiki-page-nav button:focus-visible {
  color: #eef6ff;
  border-color: rgb(98 168 255 / 38%);
  outline: 0;
  background: rgb(98 168 255 / 13%);
}

.help-wiki-color-science-lab {
  margin: 18px 0 28px;
  overflow: hidden;
  border: 1px solid rgb(116 213 195 / 24%);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 22%);
  container-name: help-color-science;
  container-type: inline-size;
}

.help-wiki-article section[id] {
  scroll-margin-top: 44px;
}

.help-wiki-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--help-wiki-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.help-wiki-article h1 {
  margin: 0;
  color: var(--help-wiki-heading);
  font-size: 23px;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.help-wiki-summary {
  margin: 0;
  color: #e7f2ff;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.58;
}

.help-wiki-gallery-sources {
  margin: 18px 0 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 12px;
  background: #101820;
}

.help-wiki-gallery-sources__tabs {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: #17222d;
}

.help-wiki-gallery-sources__tabs button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--help-wiki-subtle);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.help-wiki-gallery-sources__tabs button:hover,
.help-wiki-gallery-sources__tabs button:focus-visible {
  color: #f4f8fd;
  background: rgb(255 255 255 / 7%);
}

.help-wiki-gallery-sources__tabs button[aria-selected='true'] {
  border-color: rgb(68 142 228 / 58%);
  background: rgb(68 142 228 / 17%);
  color: #f4f8fd;
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}

.help-wiki-gallery-sources__panel {
  padding: 18px;
  display: grid;
  gap: 15px;
}

.help-wiki-gallery-sources__panel header > span {
  color: #69aefc;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.help-wiki-gallery-sources__panel header h2 {
  margin: 5px 0 4px;
  color: #f4f8fd;
  font-size: 17px;
}

.help-wiki-gallery-sources__panel header p,
.help-wiki-gallery-sources__panel > aside {
  margin: 0;
  color: #aab9c8;
  font-size: 11px;
  line-height: 1.55;
}

.help-wiki-gallery-sources__panel > ul,
.help-wiki-gallery-sources__panel ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  color: #dce8f4;
  font-size: 11px;
  line-height: 1.5;
}

.help-wiki-gallery-sources__panel h3 {
  margin: 0 0 8px;
  color: #f4f8fd;
  font-size: 11px;
}

.help-wiki-gallery-sources__panel > aside {
  padding: 10px 12px;
  border-left: 3px solid #448ee4;
  border-radius: 0 7px 7px 0;
  background: rgb(68 142 228 / 10%);
}

.help-wiki-color-models {
  margin: 18px 0 22px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 12px;
  background: #101820;
}

.help-wiki-color-models > header > span {
  color: #69aefc;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.help-wiki-color-models > header h2 {
  margin: 4px 0 3px;
  color: #f4f8fd;
  font-size: 16px;
}

.help-wiki-color-models > header p {
  margin: 0;
  color: #aab9c8;
  font-size: 10px;
  line-height: 1.5;
}

.help-wiki-color-models__grid {
  display: grid;
  margin-top: 13px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.help-wiki-color-models__grid button {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 3px;
  color: var(--model-name-color, #fff);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 7px;
  background-color: #27313b;
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 3%) 15%, rgb(0 0 0 / 12%) 48%, rgb(0 0 0 / 78%) 100%),
    var(--model-image);
  background-position: center;
  background-size: cover;
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-wiki-color-models__grid button:hover,
.help-wiki-color-models__grid button:focus-visible {
  border-color: rgb(105 174 252 / 72%);
  outline: 0;
  box-shadow:
    0 0 0 1px rgb(105 174 252 / 24%) inset,
    0 5px 14px rgb(0 0 0 / 24%);
  transform: translateY(-1px);
}

.help-wiki-color-models__grid button.is-selected {
  border-color: rgb(105 174 252 / 78%);
  box-shadow:
    0 0 0 1px rgb(105 174 252 / 30%) inset,
    0 0 12px rgb(68 142 228 / 20%);
}

.help-wiki-color-models__grid button:disabled {
  cursor: default;
  filter: saturate(0.5);
}

.help-wiki-color-models__grid button > span {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  text-shadow: 0 1px 3px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-wiki-color-models__grid button > small {
  color: #c6d2de;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px #000;
  text-transform: uppercase;
}

.help-book-experiment {
  margin: 20px 0 30px;
  overflow: hidden;
  color: var(--help-wiki-text);
  border: 1px solid rgb(120 174 224 / 20%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgb(98 168 255 / 10%), transparent 34%),
    rgb(14 20 29 / 88%);
  box-shadow: 0 16px 34px rgb(0 0 0 / 18%);
}

.help-book-experiment > header {
  min-height: 34px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: rgb(255 255 255 / 3%);
}

.help-book-experiment > header > span {
  color: #8fc3ff;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.help-book-experiment > header > strong {
  color: #f1f7ff;
  font-size: 10px;
}

.help-book-experiment > header > small {
  margin-left: auto;
  color: var(--help-wiki-subtle);
  font-size: 8px;
}

.help-book-vision {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 88px;
  gap: 14px;
}

.help-book-vision__spectrum {
  min-width: 0;
}

.help-book-vision__spectrum > div {
  position: relative;
  height: 24px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 6px;
  background: linear-gradient(90deg, #681698, #315bde 19%, #14a5d2 34%, #16b76b 48%, #d0cb35 63%, #e77b26 76%, #d82f32 88%, #63121c);
}

.help-book-vision__spectrum > div i {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--wavelength-position);
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 65%), 0 0 9px rgb(255 255 255 / 85%);
}

.help-book-vision__spectrum label {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 10px;
  color: var(--help-wiki-muted);
  font-size: 9px;
}

.help-book-vision__spectrum output {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.help-book-vision__spectrum input {
  width: 100%;
  margin: 0;
  grid-column: 1 / -1;
  accent-color: #8fc3ff;
}

.help-book-vision__sample {
  min-height: 72px;
  display: grid;
  place-items: end center;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 9px;
  box-shadow: inset 0 0 24px rgb(255 255 255 / 9%);
}

.help-book-vision__sample span {
  margin-bottom: 7px;
  padding: 2px 6px;
  color: #fff;
  border-radius: 99px;
  background: rgb(0 0 0 / 58%);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.help-book-vision__responses {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
}

.help-book-vision__responses > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 35px;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}

.help-book-vision__responses > div > span {
  color: var(--help-wiki-muted);
}

.help-book-vision__responses > div > i {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 7%);
}

.help-book-vision__responses b {
  height: 100%;
  display: block;
  border-radius: inherit;
  transition: width 80ms linear;
}

.help-book-vision__responses .is-s b { background: #7588ff; }
.help-book-vision__responses .is-m b { background: #51d090; }
.help-book-vision__responses .is-l b { background: #f26e6e; }

.help-book-vision__responses output {
  color: #fff;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.help-book-vision__opponents {
  padding: 10px;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  background: rgb(255 255 255 / 3%);
}

.help-book-vision__opponents > span {
  grid-column: 1 / -1;
  color: #8fc3ff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.help-book-vision__opponents > div {
  padding: 7px;
  display: grid;
  gap: 3px;
  border-radius: 6px;
  background: rgb(0 0 0 / 18%);
}

.help-book-vision__opponents small {
  color: var(--help-wiki-subtle);
  font-size: 8px;
}

.help-book-vision__opponents output {
  color: #eff7ff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.help-book-vision > p,
.help-book-maps__rule {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--help-wiki-subtle);
  font-size: 8px;
  line-height: 1.5;
}

.help-book-maps {
  padding: 14px;
}

.help-book-maps__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.help-book-maps__tabs button {
  min-width: 0;
  padding: 6px;
  overflow: hidden;
  color: var(--help-wiki-muted);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.help-book-maps__tabs button:hover,
.help-book-maps__tabs button:focus-visible,
.help-book-maps__tabs button[aria-selected='true'] {
  color: #edf7ff;
  border-color: rgb(98 168 255 / 42%);
  outline: 0;
  background: rgb(98 168 255 / 13%);
}

.help-book-maps__stage {
  min-height: 190px;
  padding: 22px 12px 18px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.help-book-maps__stage > div:last-child > span {
  color: #8fc3ff;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.help-book-maps__stage h3 {
  margin: 5px 0 7px;
  color: #f3f8ff;
  font-size: 17px;
  line-height: 1.15;
}

.help-book-maps__stage p {
  margin: 0;
  color: var(--help-wiki-muted);
  font-size: 10px;
  line-height: 1.55;
}

.help-book-map-shape {
  position: relative;
  width: 150px;
  height: 150px;
  margin: auto;
}

.help-book-map-shape--wheel {
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  background: conic-gradient(#ef5e5e, #efca57, #5bd18d, #55b6e9, #7769e4, #df67aa, #ef5e5e);
  box-shadow: inset 0 0 34px rgb(8 13 20 / 45%);
}

.help-book-map-shape--wheel::after {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background: #84909c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 24%);
  content: '';
}

.help-book-map-shape--cube {
  width: 118px;
  height: 118px;
  border: 1px solid rgb(255 255 255 / 23%);
  background: linear-gradient(135deg, #fff, #ea445d 48%, #190e35);
  box-shadow: 28px -22px 0 -1px rgb(47 133 224 / 72%), 29px -23px 0 rgb(255 255 255 / 23%);
  transform: skewY(10deg) rotate(-8deg);
}

.help-book-map-shape--cube::after {
  position: absolute;
  inset: 20px;
  border: 1px solid rgb(255 255 255 / 38%);
  background: linear-gradient(45deg, #24243c, #4bcf8b 55%, #e6df53);
  content: '';
}

.help-book-map-shape--xy {
  background: conic-gradient(from 210deg at 52% 62%, #7258e9, #4eabe6, #57d58a, #d7d652, #f16556, #7258e9);
  clip-path: polygon(46% 0, 64% 5%, 78% 20%, 89% 39%, 91% 62%, 77% 74%, 53% 82%, 25% 99%, 10% 79%, 16% 54%, 26% 26%);
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 50%));
}

.help-book-map-shape--xy::after {
  position: absolute;
  inset: 42px 33px 35px;
  border: 1px solid rgb(255 255 255 / 82%);
  clip-path: polygon(50% 0, 100% 100%, 0 82%);
  content: '';
}

.help-book-map-shape--perceptual {
  border-radius: 50%;
  background: radial-gradient(circle at 44% 38%, #f7f5f0 0 6%, #d7d44a 20%, #49b58a 42%, #477fd0 67%, #5d255f 100%);
  box-shadow: inset -17px -20px 30px rgb(4 9 17 / 48%), 0 0 0 1px rgb(255 255 255 / 20%);
}

.help-book-map-shape--perceptual i {
  position: absolute;
  inset: 22px;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
}

.help-book-map-shape--perceptual i:nth-child(2) { inset: 44px; }
.help-book-map-shape--perceptual i:nth-child(3) { inset: 65px; }

.help-book-maps__rule {
  padding: 9px 11px;
  border-left: 2px solid #62a8ff;
  background: rgb(98 168 255 / 7%);
}

.help-book-people {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
  gap: 12px;
}

.help-book-people__timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.help-book-people__timeline button {
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  gap: 1px;
  color: var(--help-wiki-muted);
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-book-people__timeline button:hover,
.help-book-people__timeline button:focus-visible,
.help-book-people__timeline button.is-selected {
  color: #f3f8ff;
  border-color: rgb(116 213 195 / 38%);
  outline: 0;
  background: rgb(116 213 195 / 9%);
}

.help-book-people__timeline span,
.help-book-people__card > span {
  color: #74d5c3;
  font-size: 7px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.help-book-people__timeline strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-book-people__card {
  padding: 17px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(116 213 195 / 20%);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgb(116 213 195 / 13%), transparent 47%),
    rgb(255 255 255 / 3%);
}

.help-book-people__card h3 {
  margin: 6px 0 10px;
  color: #f4fbfa;
  font-size: 18px;
  line-height: 1.1;
}

.help-book-people__card p {
  margin: 0;
  color: #c3d2d1;
  font-size: 10px;
  line-height: 1.6;
}

.help-book-people__card small {
  margin-top: auto;
  padding-top: 18px;
  color: #9fb7b4;
  font-size: 8px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .help-book-experiment > header > small {
    display: none;
  }

  .help-book-maps__tabs,
  .help-book-people__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-book-maps__stage,
  .help-book-people {
    grid-template-columns: 1fr;
  }

  .help-book-maps__stage {
    gap: 14px;
  }

  .help-book-vision__opponents {
    grid-template-columns: 1fr;
  }
}

.help-book-transfer-curve,
.help-book-scopes,
.help-book-lut,
.help-book-illuminants,
.help-book-models,
.help-book-pipeline {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.help-book-transfer-curve__modes,
.help-book-scopes__tabs,
.help-book-scopes__signals,
.help-book-lut__tabs,
.help-book-lut__interp,
.help-book-illuminants__presets,
.help-book-models__tabs,
.help-book-pipeline__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.help-book-transfer-curve__modes button,
.help-book-scopes__tabs button,
.help-book-scopes__signals button,
.help-book-lut__tabs button,
.help-book-lut__interp button,
.help-book-illuminants__presets button,
.help-book-models__tabs button,
.help-book-pipeline__steps button {
  min-width: 0;
  padding: 6px 10px;
  color: var(--help-wiki-muted);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  font-size: 8.5px;
  cursor: pointer;
  white-space: nowrap;
}

.help-book-transfer-curve__modes button:hover,
.help-book-transfer-curve__modes button[aria-selected='true'],
.help-book-scopes__tabs button[aria-selected='true'],
.help-book-scopes__signals button[aria-selected='true'],
.help-book-lut__tabs button[aria-selected='true'],
.help-book-lut__interp button[aria-selected='true'],
.help-book-illuminants__presets button[aria-selected='true'],
.help-book-models__tabs button[aria-selected='true'],
.help-book-pipeline__steps button[aria-selected='true'] {
  color: #edf7ff;
  border-color: rgb(98 168 255 / 45%);
  outline: 0;
  background: rgb(98 168 255 / 15%);
}

.help-book-transfer-curve__sliders,
.help-book-illuminants__sliders,
.help-book-models__slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  background: rgb(255 255 255 / 2.5%);
}

.help-book-transfer-curve__sliders label,
.help-book-illuminants__sliders label,
.help-book-models__slider label {
  flex: 1 1 180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  color: var(--help-wiki-muted);
  font-size: 9px;
}

.help-book-transfer-curve__sliders label input,
.help-book-illuminants__sliders label input,
.help-book-models__slider label input {
  grid-column: 1 / -1;
  width: 100%;
}

.help-book-transfer-curve__sliders output,
.help-book-illuminants__sliders output,
.help-book-models__slider output {
  color: #8fc3ff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.help-book-reset-btn {
  padding: 5px 10px;
  color: var(--help-wiki-subtle);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 5px;
  background: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 8.5px;
  cursor: pointer;
}

.help-book-reset-btn:hover {
  color: #fff;
  background: rgb(255 255 255 / 12%);
}

.help-book-transfer-curve__chart,
.help-book-scopes__stage,
.help-book-lut__stage {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  overflow: hidden;
  background: #0d151d;
}

.help-book-transfer-curve__swatches {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
}

.help-book-transfer-curve__swatches > div {
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.help-book-transfer-curve__takeaway,
.help-book-scopes__takeaway,
.help-book-lut__takeaway,
.help-book-illuminants__takeaway,
.help-book-models__takeaway,
.help-book-pipeline__rule {
  margin: 0;
  padding: 9px 12px;
  border-left: 2px solid #62a8ff;
  background: rgb(98 168 255 / 7%);
  color: var(--help-wiki-muted);
  font-size: 8.5px;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}

.help-book-lut__controls,
.help-book-scopes__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-book-lut__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.help-book-lut__metrics > div {
  padding: 10px;
  display: grid;
  gap: 3px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.help-book-lut__metrics span {
  color: var(--help-wiki-subtle);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.help-book-lut__metrics strong {
  color: #eef6ff;
  font-size: 11px;
}

.help-book-illuminants__display {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.help-book-illuminants__swatch {
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
}

.help-book-illuminants__swatch span {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.help-book-illuminants__details h4 {
  margin: 0 0 6px;
  color: #8fc3ff;
  font-size: 10px;
  font-weight: 700;
}

.help-book-illuminants__details ul {
  margin: 0;
  padding-left: 16px;
  color: var(--help-wiki-muted);
  font-size: 9px;
  line-height: 1.5;
}

.help-book-models__card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  background: rgb(255 255 255 / 2.5%);
}

.help-book-models__visual {
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  overflow: hidden;
  background: #0d151d;
}

.help-book-models__info p {
  margin: 4px 0;
  font-size: 9.5px;
  color: var(--help-wiki-muted);
}

.help-book-models__info strong {
  color: #eef6ff;
}

.help-book-pipeline__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.help-book-pipeline__steps button {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
}

.help-book-pipeline__steps button span {
  color: #8fc3ff;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.help-book-pipeline__steps button strong {
  font-size: 9.5px;
  white-space: normal;
  line-height: 1.25;
}

.help-book-pipeline__card {
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 8px;
  background: rgb(255 255 255 / 3%);
}

.help-book-pipeline__card h3 {
  margin: 0;
  color: #f3f8ff;
  font-size: 14px;
}

.help-book-pipeline__card p {
  margin: 0;
  color: var(--help-wiki-muted);
  font-size: 9.5px;
  line-height: 1.55;
}

.help-book-pipeline__alert {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1.5;
}

.help-book-pipeline__alert--warning {
  border: 1px solid rgb(240 100 115 / 30%);
  background: rgb(240 100 115 / 8%);
  color: #f7b2b8;
}

.help-book-pipeline__alert--tip {
  border: 1px solid rgb(80 200 120 / 30%);
  background: rgb(80 200 120 / 8%);
  color: #b0f0cc;
}

.help-visual-chart-bg {
  fill: #0c141d;
}

.help-visual-grid-subtle {
  stroke: rgb(255 255 255 / 7%);
  stroke-width: 1;
}

.help-visual-chart-label {
  fill: #7c93a8;
  font-size: 7.5px;
  font-variant-numeric: tabular-nums;
}

.help-visual-axis-name {
  fill: #8fc3ff;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.help-visual-scope-box {
  fill: #0b1219;
  stroke: rgb(255 255 255 / 10%);
}

.help-visual-scope-limit {
  stroke: #ef5a6a;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.help-visual-scope-grid {
  stroke: rgb(255 255 255 / 10%);
  stroke-width: 1;
}

.help-visual-scope-text {
  fill: #7c93a8;
  font-size: 7.5px;
  font-weight: 600;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}

.help-visual-scope-trace-bright {
  stroke: #ffffff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 40%));
}

.help-visual-parade-column {
  fill: #0d151e;
  stroke: rgb(255 255 255 / 8%);
}

@media (max-width: 680px) {
  .help-book-pipeline__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-book-lut__metrics {
    grid-template-columns: 1fr;
  }
  .help-book-illuminants__display {
    grid-template-columns: 1fr;
  }
}

.help-wiki-visual {
  margin: 18px 0 0;

  overflow: hidden;
  color: #dfeeff;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 10px;
  background: #101820;
}

.help-wiki-visual__chrome {
  display: flex;
  min-height: 34px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: #17222d;
}

.help-wiki-visual__chrome > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62a8ff;
  box-shadow: 0 0 9px rgb(98 168 255 / 60%);
}

.help-wiki-visual__chrome strong {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.help-wiki-visual__chrome small {
  margin-left: auto;
  color: var(--help-wiki-subtle);
  font-size: 9px;
  text-transform: uppercase;
}

.help-wiki-visual__canvas {
  min-height: 148px;
  padding: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgb(64 104 148 / 14%), transparent 42%),
    #101820;
}

.help-wiki-visual svg {
  display: block;
  width: 100%;
  max-height: 220px;
}

.help-wiki-visual svg text {
  fill: #d8e8f8;
  font-size: 12px;
  font-weight: 600;
}

.help-wiki-visual svg .help-visual-subtext {
  fill: #adbdcc;
  font-size: 10px;
  font-weight: 500;
}

.help-visual-plane {
  opacity: 0.88;
  stroke: rgb(255 255 255 / 24%);
}

.help-visual-grid-line {
  fill: none;
  stroke: rgb(245 250 255 / 42%);
  stroke-width: 1;
}

.help-visual-axis {
  fill: none;
  stroke: rgb(222 237 252 / 58%);
  stroke-width: 1.25;
}

.help-visual-faint {
  stroke: rgb(255 255 255 / 7%);
}

.help-visual-reference {
  fill: none;
  stroke: rgb(255 255 255 / 18%);
  stroke-dasharray: 4 4;
}

.help-visual-curve {
  fill: none;
  stroke: #74b6ff;
  stroke-linecap: round;
  stroke-width: 3;
}

.help-visual-move {
  fill: none;
  stroke: #8ac3ff;
  stroke-width: 2;
  marker-end: none;
}

.help-visual-origin {
  fill: #17222d;
  stroke: #b9c8d7;
  stroke-width: 2;
}

.help-visual-active {
  fill: #62a8ff;
  stroke: #e5f3ff;
  stroke-width: 2;
}

.help-visual-pin {
  fill: #edb765;
  stroke: #fff0ce;
  stroke-width: 2;
}

.help-wiki-visual svg .help-visual-blue {
  fill: #85bfff;
  font-size: 10px;
}

.help-wiki-visual svg .help-visual-gold {
  fill: #eac078;
  font-size: 10px;
}

.help-wiki-visual svg .help-visual-axis-label {
  fill: #9eafc0;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.help-visual-histogram {
  fill: rgb(158 188 220 / 24%);
  stroke: rgb(196 220 244 / 48%);
}

.help-visual-level-black {
  fill: #202832;
  stroke: #aebdcb;
}

.help-visual-level-mid {
  fill: #7b8793;
  stroke: #dce8f2;
}

.help-visual-level-white {
  fill: #f4f7fa;
  stroke: #fff;
}

.help-visual-hsl {
  display: grid;
  min-height: 188px;
  padding: 24px 28px 12px;
  align-content: center;
}

.help-visual-hue-strip {
  height: 28px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 6px;
  background: linear-gradient(90deg, #e34452, #e0ad43, #5eb75d, #43b5b4, #4c78d7, #ae62cd, #e34452);
}

.help-visual-range {
  position: relative;
  height: 42px;
  margin: 5px 8px 0;
}

.help-visual-range__selected,
.help-visual-range__fade {
  position: absolute;
  top: 0;
  height: 7px;
  background: #75b7ff;
}

.help-visual-range__selected {
  left: 38%;
  width: 24%;
}

.help-visual-range__fade--left {
  left: 25%;
  width: 13%;
  background: linear-gradient(90deg, transparent, #75b7ff);
}

.help-visual-range__fade--right {
  left: 62%;
  width: 13%;
  background: linear-gradient(90deg, #75b7ff, transparent);
}

.help-visual-range__handle {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 17px;
  background: #eef7ff;
}

.help-visual-range__handle::after {
  position: absolute;
  top: 14px;
  left: -3px;
  width: 8px;
  height: 8px;
  border: 1px solid #9ccaff;
  border-radius: 50%;
  background: #17222d;
  content: '';
}

.help-visual-range__handle--one { left: 25%; }
.help-visual-range__handle--two { left: 38%; }
.help-visual-range__handle--three { left: 62%; }
.help-visual-range__handle--four { left: 75%; }

.help-visual-hsl__labels {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  color: var(--help-wiki-subtle);
  font-size: 9px;
  text-align: center;
}

.help-visual-hsl__labels strong {
  color: #b9dcff;
}

.help-visual-hsl p {
  margin: 18px 0 0;
  color: var(--help-wiki-muted);
  font-size: 10px;
  text-align: center;
}

.help-visual-wheel-wrap {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.help-visual-wheel {
  position: relative;
  width: 142px;
  height: 142px;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #879099 0 7%, transparent 8%),
    conic-gradient(#e14d58, #d6b84f, #5db868, #49b7c5, #557bdd, #b65ac7, #e14d58);
  box-shadow: inset 0 0 35px rgb(0 0 0 / 38%);
}

.help-visual-wheel::after {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: rgb(119 129 139 / 72%);
  content: '';
  filter: blur(8px);
}

.help-visual-wheel i {
  position: absolute;
  z-index: 1;
  top: 37px;
  left: 93px;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  border-radius: 50%;
  background: #62a8ff;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 28%);
}

.help-visual-wheel-copy {
  display: grid;
  max-width: 190px;
  gap: 4px;
}

.help-visual-wheel-copy strong {
  margin-top: 7px;
  color: #b9dcff;
  font-size: 11px;
}

.help-visual-wheel-copy span {
  color: var(--help-wiki-muted);
  font-size: 10px;
  line-height: 1.4;
}

.help-visual-mask {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.help-visual-mask__plane {
  position: relative;
  width: 180px;
  height: 150px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 19%);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 52%, #a9a2a8, transparent 24%),
    conic-gradient(from 20deg, #c76465, #c2ad62, #65ae75, #5fa4bd, #696dc4, #bd6eb4, #c76465);
}

.help-visual-mask__shape,
.help-visual-mask__falloff {
  position: absolute;
  border-radius: 48% 52% 55% 45%;
  transform: rotate(-14deg);
}

.help-visual-mask__falloff {
  inset: 25px 34px;
  border: 2px dashed rgb(255 255 255 / 68%);
}

.help-visual-mask__shape {
  inset: 42px 50px;
  border: 2px solid white;
  background: rgb(255 255 255 / 13%);
}

.help-visual-mask__sample {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid white;
  border-radius: 50%;
}

.help-visual-mask__sample--inside { top: 72px; left: 88px; background: #7bce8d; }
.help-visual-mask__sample--edge { top: 45px; left: 127px; background: #e2ba65; }
.help-visual-mask__sample--outside { top: 118px; left: 25px; background: #d16576; }

.help-visual-mask > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 10px;
  font-size: 10px;
}

.help-visual-mask strong { color: #cde5ff; }
.help-visual-mask span { color: var(--help-wiki-muted); }

.help-visual-volume-face {
  fill: rgb(98 168 255 / 18%);
  stroke: rgb(156 203 255 / 62%);
}

.help-visual-volume-face--side { fill: rgb(170 91 201 / 20%); }
.help-visual-volume-face--front { fill: rgb(69 184 150 / 17%); }

.help-visual-lut-lines {
  fill: none;
  stroke: rgb(220 237 255 / 32%);
  stroke-width: 1;
}

.help-visual-lut-node {
  fill: #b9dcff;
  stroke: #17222d;
  stroke-width: 1;
}

.help-visual-rgb-circles {
  opacity: 0.8;
  mix-blend-mode: screen;
}

.help-wiki-visual svg .help-visual-dark-label {
  fill: #18212b;
  font-size: 10px;
  font-weight: 800;
}

.help-visual-space-wide {
  opacity: 0.78;
  stroke: rgb(255 255 255 / 35%);
}

.help-visual-space-output {
  fill: rgb(11 20 29 / 33%);
  stroke: #f0c778;
  stroke-width: 2;
}

.help-visual-space-white {
  fill: #f5f7f9;
  stroke: #17222d;
  stroke-width: 2;
}

.help-visual-scope-box {
  fill: rgb(5 11 16 / 56%);
  stroke: rgb(255 255 255 / 12%);
}

.help-visual-scope-trace {
  fill: rgb(194 220 247 / 22%);
  stroke: #9ac9f7;
}

.help-visual-wave {
  fill: none;
  stroke: #75d49c;
  stroke-width: 2;
}

.help-visual-wave--two {
  stroke: #75aef0;
}

.help-visual-scope-ring {
  fill: none;
  stroke: rgb(255 255 255 / 24%);
}

.help-visual-vector {
  fill: none;
  stroke: #d985c9;
  stroke-linecap: round;
  stroke-width: 4;
}

.help-visual-workflow {
  display: grid;
  min-height: 180px;
  padding: 18px 36px;
  align-content: center;
  gap: 9px;
}

.help-visual-workflow > div {
  display: flex;
  min-height: 38px;
  padding: 0 13px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 7px;
  background: linear-gradient(90deg, rgb(98 168 255 / 10%), rgb(255 255 255 / 3%));
}

.help-visual-workflow > div > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #d9ecff;
  border: 1px solid rgb(98 168 255 / 35%);
  border-radius: 5px;
  background: rgb(98 168 255 / 12%);
  font-size: 9px;
  font-weight: 750;
}

.help-visual-workflow > div > strong {
  font-size: 10px;
  font-weight: 600;
}

.help-visual-workflow--gallery > div:first-child,
.help-visual-workflow--gallery > div:nth-child(2) {
  display: inline-flex;
  width: fit-content;
  margin-bottom: -5px;
  border-color: transparent;
  background: transparent;
}

.help-visual-workflow--export > div:last-child,
.help-visual-workflow--matching > div:last-child {
  color: #e9f5ff;
  border-color: rgb(98 168 255 / 35%);
  background: rgb(98 168 255 / 15%);
}

.help-wiki-article > section {
  margin-top: 27px;
  padding-top: 21px;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.help-wiki-article > .help-wiki-overview {
  position: relative;
  margin-top: 22px;
  padding: 16px 18px 17px 20px;
  overflow: hidden;
  border: 1px solid rgb(98 168 255 / 24%);
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgb(98 168 255 / 14%), rgb(98 168 255 / 5%));
}

.help-wiki-article > .help-wiki-overview::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #62a8ff;
  content: '';
}

.help-wiki-article h2 {
  display: flex;
  margin: 0 0 11px;
  align-items: center;
  gap: 9px;
  color: #edf5ff;
  font-size: 13px;
  font-weight: 700;
}

.help-wiki-article p {
  margin: 9px 0 0;
}

.help-wiki-section-number {
  color: #73b4ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.help-wiki-article > .help-wiki-benefit {
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px solid rgb(98 168 255 / 20%);
  border-radius: 9px;
  background:
    linear-gradient(120deg, rgb(98 168 255 / 10%), rgb(30 46 67 / 18%));
}

.help-wiki-article > .help-wiki-basics {
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 9px;
  background: rgb(255 255 255 / 3%);
}

.help-wiki-basics h2 {
  margin-bottom: 7px;
}

.help-wiki-basics p:first-of-type {
  margin-top: 0;
}

.help-wiki-confusions {
  margin-top: 18px;
  padding: 14px 16px;
  color: #ece4d5;
  border: 1px solid rgb(241 184 111 / 24%);
  border-radius: 9px;
  background: linear-gradient(120deg, rgb(241 184 111 / 9%), rgb(104 70 34 / 5%));
}

.help-wiki-confusions strong {
  color: #f1c17f;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.help-wiki-confusions p {
  position: relative;
  padding-left: 18px;
}

.help-wiki-confusions p::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #efb66d;
  content: '?';
  font-weight: 850;
}

.help-wiki-glossary {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-wiki-glossary > div {
  padding: 10px 11px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.help-wiki-glossary dt {
  color: #b9dcff;
  font-size: 10px;
  font-weight: 750;
}

.help-wiki-glossary dd {
  margin: 3px 0 0;
  color: var(--help-wiki-muted);
  font-size: 10px;
  line-height: 1.45;
}

.help-wiki-comparison > div {
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
}

.help-wiki-comparison table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--help-wiki-text);
  font-size: 10px;
  line-height: 1.45;
}

.help-wiki-comparison th,
.help-wiki-comparison td {
  padding: 9px 11px;
  border-right: 1px solid rgb(255 255 255 / 7%);
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  text-align: left;
  vertical-align: top;
}

.help-wiki-comparison tr > :last-child {
  border-right: 0;
}

.help-wiki-comparison tbody tr:last-child > * {
  border-bottom: 0;
}

.help-wiki-comparison thead th {
  color: #9fcbfa;
  background: rgb(98 168 255 / 10%);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.help-wiki-comparison tbody th {
  width: 22%;
  color: #d8ebff;
  background: rgb(255 255 255 / 3%);
  font-weight: 720;
}

.help-wiki-comparison tbody tr:hover {
  background: rgb(98 168 255 / 5%);
}

.help-wiki-benefit h2 {
  margin-bottom: 7px;
  color: #dcecff;
}

.help-wiki-benefit p {
  margin: 0;
  color: #e1eefc;
  line-height: 1.55;
}

.help-wiki-use-cases,
.help-wiki-steps,
.help-wiki-mistakes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-wiki-mistakes {
  display: grid;
  gap: 8px;
}

.help-wiki-mistakes li {
  position: relative;
  padding: 9px 11px 9px 29px;
  border: 1px solid rgb(255 190 112 / 14%);
  border-radius: 7px;
  background: rgb(255 190 112 / 4%);
}

.help-wiki-mistakes li::before {
  position: absolute;
  top: 9px;
  left: 11px;
  color: #f1b86f;
  content: '!';
  font-weight: 850;
}

.help-wiki-use-cases {
  display: grid;
  gap: 8px;
}

.help-wiki-use-cases li {
  position: relative;
  padding: 9px 11px 9px 29px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.help-wiki-use-cases li::before {
  position: absolute;
  top: 9px;
  left: 11px;
  color: #73b4ff;
  content: '✓';
  font-weight: 800;
}

.help-wiki-steps {
  display: grid;
  gap: 11px;
  counter-reset: help-step;
}

.help-wiki-steps li {
  position: relative;
  min-height: 28px;
  padding-left: 40px;
  counter-increment: help-step;
}

.help-wiki-steps li::before {
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #cfe6ff;
  border: 1px solid rgb(98 168 255 / 34%);
  border-radius: 50%;
  background: rgb(98 168 255 / 11%);
  content: counter(help-step);
  font-size: 10px;
  font-weight: 750;
}

.help-wiki-article > .help-wiki-practice {
  padding: 17px;
  border: 1px solid rgb(119 210 177 / 24%);
  border-radius: 10px;
  background:
    linear-gradient(125deg, rgb(69 174 138 / 10%), rgb(45 96 86 / 4%));
}

.help-wiki-practice header > span {
  color: #9ddfc5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.help-wiki-practice header h2 {
  margin: 3px 0 12px;
  color: #e4f8f0;
  font-size: 14px;
}

.help-wiki-practice > p {
  color: #def0ea;
}

.help-wiki-practice > ol {
  display: grid;
  margin: 13px 0;
  padding-left: 24px;
  gap: 8px;
}

.help-wiki-practice > ol li::marker {
  color: #78ceb0;
  font-weight: 750;
}

.help-wiki-practice-result {
  display: grid;
  padding: 10px 12px;
  gap: 8px;
  border: 1px solid rgb(119 210 177 / 14%);
  border-radius: 7px;
  background: rgb(9 29 25 / 22%);
}

.help-wiki-practice-result p {
  margin: 0;
}

.help-wiki-practice-result strong,
.help-wiki-practice > p strong {
  color: #b8ead7;
}

.help-wiki-note {
  margin-top: 27px;
  padding: 13px 15px;
  color: #e0ecf9;
  border: 1px solid rgb(111 196 160 / 23%);
  border-radius: 8px;
  background: rgb(70 173 129 / 7%);
}

.help-wiki-note strong {
  color: #a9e3ca;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.help-wiki-note p {
  margin-top: 4px;
}

.help-wiki-related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.help-wiki-lesson-nav {
  display: grid;
  margin-top: 27px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.help-wiki-lesson-nav button {
  display: grid;
  min-height: 58px;
  padding: 10px 12px;
  align-content: center;
  gap: 3px;
  color: #dceeff;
  border: 1px solid rgb(98 168 255 / 24%);
  border-radius: 8px;
  background: rgb(98 168 255 / 7%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-wiki-lesson-nav button:last-of-type {
  text-align: right;
}

.help-wiki-lesson-nav button:hover,
.help-wiki-lesson-nav button:focus-visible {
  border-color: rgb(98 168 255 / 48%);
  outline: 0;
  background: rgb(98 168 255 / 14%);
}

.help-wiki-lesson-nav small {
  color: var(--help-wiki-subtle);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.help-wiki-lesson-nav strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-wiki-references > div {
  display: grid;
  gap: 6px;
}

.help-wiki-references a {
  display: flex;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  color: #a9d2ff;
  border: 1px solid rgb(98 168 255 / 18%);
  border-radius: 7px;
  background: rgb(98 168 255 / 5%);
  text-decoration: none;
}

.help-wiki-references a:hover,
.help-wiki-references a:focus-visible {
  border-color: rgb(98 168 255 / 40%);
  outline: 0;
  background: rgb(98 168 255 / 11%);
}

.help-wiki-related button {
  padding: 5px 8px;
  color: #b9d9ff;
  border: 1px solid rgb(98 168 255 / 28%);
  border-radius: 6px;
  background: rgb(98 168 255 / 8%);
  font: inherit;
  cursor: pointer;
}

.help-wiki-related button:hover,
.help-wiki-related button:focus-visible {
  border-color: rgb(98 168 255 / 58%);
  outline: 0;
  background: rgb(98 168 255 / 16%);
}

.help-wiki-empty {
  padding: 34px 14px;
  color: var(--help-wiki-subtle);
  text-align: center;
}

@media (max-width: 700px) {
  .help-wiki-dialog {
    width: min(100vw - 16px, 980px);
    height: calc(100vh - 16px);
  }

  .help-wiki-count {
    display: none;
  }

  .help-wiki-mobile-nav {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 5px;
    border-bottom: 1px solid rgb(255 255 255 / 9%);
    background: rgb(10 14 20 / 78%);
  }

  .help-wiki-mobile-nav button {
    padding: 7px;
    color: rgb(197 214 232 / 68%);
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .help-wiki-mobile-nav button.is-selected {
    color: #f0f7ff;
    border-color: rgb(98 168 255 / 34%);
    background: rgb(98 168 255 / 14%);
  }

  .help-wiki-layout {
    display: block;
  }

  .help-wiki-layout--topics .help-wiki-article,
  .help-wiki-layout--article .help-wiki-index {
    display: none;
  }

  .help-wiki-index,
  .help-wiki-article {
    height: 100%;
    border-right: 0;
  }

  .help-wiki-article {
    padding: 22px 20px 28px;
  }

  .help-wiki-breadcrumbs {
    margin-top: -6px;
  }
}

.floating-panel-tab:hover {
  color: var(--button-text-color);
  background: rgb(255 255 255 / 7%);
}

.floating-panel-tab--active {
  color: #f2f7ff;
  border-color: rgb(98 168 255 / 42%);
  background: rgb(98 168 255 / 18%);
  box-shadow: inset 0 -3px #62a8ff;
  font-weight: 650;
}

.floating-panel-tab--active > .preset-group-icon {
  color: #8fc3ff;
}

.floating-panel-tab--dragging {
  color: #fff;
  background: linear-gradient(180deg, rgb(98 168 255 / 34%), rgb(98 168 255 / 16%));
  box-shadow: 0 0 0 2px #62a8ff inset;
}

.floating-panel-tab:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: -2px;
}

.preset-group-container--detached:has(> .floating-panel-tabs) > .preset-group-controls {
  top: 7px;
}

.floating-panel-accordion-body {
  background: rgb(0 0 0 / 8%);
}

.floating-panel-tab-content {
  display: none;
}

.floating-panel-tab-content--active {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.floating-panel-accordion {
  box-sizing: border-box;
  min-height: 100%;
  height: auto;
  padding: 7px;
}

.floating-panel-accordion:has(> .floating-panel-accordion-section--fill) {
  height: 100%;
}

.floating-panel-accordion--drag-targeting .preset-group-body {
  transition: none;
}

.floating-panel-accordion-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  background: rgb(0 0 0 / 8%);
}

.settings-panel-action-row {
  display: flex;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 4px 6px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: rgb(255 255 255 / 2%);
}

.settings-panel-header-actions {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 7px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.settings-panel-group-action-row {
  min-height: 34px;
}

.settings-panel-header-action {
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  place-items: center;
  color: rgb(225 233 244 / 72%);
  background: transparent;
  cursor: pointer;
}

.settings-panel-header-action:hover {
  color: #fff;
  background: rgb(255 255 255 / 10%);
}

.settings-panel-header-action:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: -2px;
}

.settings-panel-header-action[aria-pressed='false'] {
  color: rgb(225 233 244 / 42%);
}

.settings-panel-header-defaults {
  width: 28px;
  min-width: 28px;
}

.floating-panel-accordion-section--disabled > .preset-group-body {
  opacity: 0.42;
  filter: saturate(0.4);
}

.preset-group-container--panel-disabled > .preset-group-body {
  opacity: 0.42;
  filter: saturate(0.4);
}

.floating-panel-accordion-section:has(> .settings-panel-header-actions) > .preset-group-header {
  padding-right: 80px;
}

.floating-panel-accordion-section + .floating-panel-accordion-section {
  margin-top: 7px;
}

.floating-panel-accordion-section--drop-before {
  box-shadow: 0 -3px #62a8ff;
}

.floating-panel-accordion-section--drop-after {
  box-shadow: 0 3px #62a8ff;
}

.floating-panel-accordion-section > .preset-group-header {
  margin: 0;
  cursor: grab;
}

.floating-panel-accordion-section > .preset-group-header:active {
  cursor: grabbing;
}

#props_container .floating-panel-accordion-section > .floating-panel-accordion-header--dragging {
  color: #fff;
  background: linear-gradient(180deg, rgb(98 168 255 / 34%), rgb(98 168 255 / 16%));
  box-shadow: 0 0 0 2px #62a8ff inset;
}

.floating-panel-accordion-section > .preset-group-body {
  overflow: visible;
}

.floating-panel-accordion-section--fill {
  display: flex;
  height: calc(100% - 7px);
  min-height: 220px;
  flex-direction: column;
}

.floating-panel-accordion-section--fill > .preset-group-header {
  flex: 0 0 auto;
}

.floating-panel-accordion-section--fill > .preset-group-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--detached > .preset-group-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--button-text-inactive-color);
  border-bottom: 2px solid var(--button-text-inactive-color);
  content: '';
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle:hover::after {
  border-color: var(--button-text-color);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--docked {
  top: 0;
  bottom: 0;
  width: 10px;
  height: auto;
  cursor: ew-resize;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--left {
  right: -5px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--right {
  right: auto;
  left: -5px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--bottom {
  top: -5px;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 10px;
  cursor: ns-resize;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--docked::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 4px;
  width: 1px;
  height: 44px;
  border: 0;
  border-left: 2px solid var(--button-text-inactive-color);
  transform: translateY(-50%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--page-split::after {
  top: 0;
  height: 100%;
  transform: none;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-resize-handle--bottom::after {
  top: 4px;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 44px;
  height: 1px;
  border: 0;
  border-top: 2px solid var(--button-text-inactive-color);
  transform: translateX(-50%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header-hidden {
  color: var(--button-text-color);
  border-bottom-color: transparent;
  background: rgb(255 255 255 / 3%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header:hover,
:is(#props_container, #scopes, #floating_panels) .preset-group-header-hidden:hover {
  color: var(--button-text-hover-color);
  background: rgb(255 255 255 / 8%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: -2px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header-hidden .preset-group-chevron {
  transform: rotate(-45deg);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: rgb(130 190 255 / 88%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header-hidden .preset-group-icon {
  color: var(--button-text-inactive-color);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header:hover .preset-group-icon {
  color: rgb(158 208 255);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-heading,
:is(#props_container, #scopes, #floating_panels) .preset-group-title,
:is(#props_container, #scopes, #floating_panels) .preset-group-description {
  display: block;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-heading {
  min-width: 0;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-title {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: calc(0.92 * var(--menu-t));
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #scopes, #floating_panels) .panel-output-impact,
.panel-library-result .panel-output-impact {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: calc(0.48 * var(--menu-t));
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  opacity: 0.78;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-library-result .panel-output-impact {
  max-width: 80px;
  padding: 2px 4px;
  font-size: 8px;
}

.panel-output-impact--lut {
  color: #7ec2ff;
  background: rgb(77 159 238 / 9%);
}

.panel-output-impact--preview {
  color: #d0a5ff;
  background: rgb(176 114 235 / 9%);
}

.panel-output-impact--image {
  color: #62dfc4;
  background: rgb(67 207 177 / 9%);
}

.panel-output-impact--workspace {
  color: #9faab5;
  background: rgb(159 170 181 / 7%);
}

body.light-theme :is(#props_container, #scopes, #floating_panels) .panel-output-impact--lut {
  color: #245f98;
  background: rgb(36 95 152 / 9%);
}

body.light-theme :is(#props_container, #scopes, #floating_panels) .panel-output-impact--preview {
  color: #75409a;
  background: rgb(117 64 154 / 8%);
}

body.light-theme :is(#props_container, #scopes, #floating_panels) .panel-output-impact--image {
  color: #18705d;
  background: rgb(24 112 93 / 8%);
}

body.light-theme :is(#props_container, #scopes, #floating_panels) .panel-output-impact--workspace {
  color: #58636e;
  background: rgb(88 99 110 / 7%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-description {
  margin-top: 3px;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: calc(0.68 * var(--menu-t));
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-group-body {
  height: calc-size(auto, size);
  transition: height 180ms ease;
}

.preset-group-body-hidden {
  height: 0;
  overflow: hidden;
}

#scopes .scope-floating-window,
#scopes .scope-docked-panel {
  --button-text-color: hsla(180, 2%, 78%, 1);
  --button-text-inactive-color: hsla(180, 2%, 50%, 1);
  --button-text-hover-color: #ddd;
}

#scopes .scope-floating-window {
  background: #111;
}

#scopes .scope-panel-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  filter: brightness(1.12) drop-shadow(0 0 1.5px currentColor);
  fill: none;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
}

#scopes .floating-window--compact > .preset-group-header .scope-panel-icon {
  width: 18px;
  height: 18px;
}

#scopes .scope-docked-panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgb(255 255 255 / 12%);
  background: #111;
}

#scopes .scope-docked-panel:last-of-type {
  border-right: 0;
}

#scopes .scope-docked-panel > .preset-group-header {
  flex: 0 0 auto;
  border-top: 1px solid rgb(255 255 255 / 12%);
  cursor: grab;
}

#scopes .scope-docked-panel > .preset-group-header:active {
  cursor: grabbing;
}

#scopes .scope-docked-panel > .scope-docked-panel-header--dragging {
  color: #fff;
  background: linear-gradient(180deg, rgb(98 168 255 / 34%), rgb(98 168 255 / 16%));
  box-shadow: 0 0 0 2px #62a8ff inset;
}

#scopes .scope-docked-panel--drop-before {
  box-shadow: 3px 0 0 #62a8ff inset;
}

#scopes .scope-docked-panel--drop-after {
  box-shadow: -3px 0 0 #62a8ff inset;
}

#scopes .scope-docked-panel-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #000;
}

:is(#props_container, #scopes, #floating_panels) .floating-window--compact > .preset-group-header {
  min-height: 32px;
  gap: 6px;
  margin: 0;
  padding: 4px 62px 4px 7px;
}

:is(#props_container, #scopes, #floating_panels) .floating-window--compact > .preset-group-header .preset-group-icon {
  width: 18px;
  height: 18px;
}

:is(#props_container, #scopes, #floating_panels) .floating-window--compact > .preset-group-header .preset-group-description {
  display: none;
}

:is(#props_container, #scopes, #floating_panels) .floating-window--compact > .preset-group-controls {
  top: 3px;
  right: 4px;
}

#scopes .scope-floating-window-body {
  background: #111;
}

#scopes .scope-floating-window-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  color-scheme: dark;
  background: #000;
}

#scopes .scope-docked-panel-body iframe {
  color-scheme: dark;
  background: #000;
}

#scopes :is(.scope-cube-panel, .scope-vectorscope-panel) > .preset-group-header {
  padding-right: 108px;
}

#scopes :is(.scope-cube-panel, .scope-vectorscope-panel).preset-group-container--detached > .preset-group-header {
  padding-right: 136px;
}

#scopes .scope-gamut-panel.preset-group-container--detached > .preset-group-header {
  padding-right: 109px;
}

#scopes :is(.scope-cube-panel, .scope-vectorscope-panel, .scope-gamut-panel) .preset-group-control svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

#scopes :is(.scope-cube-panel, .scope-vectorscope-panel, .scope-gamut-panel) .preset-group-control.is-active,
#scopes :is(.scope-cube-panel, .scope-vectorscope-panel, .scope-gamut-panel) .preset-group-control[aria-pressed='true'] {
  color: #badeff;
  background: rgb(98 168 255 / 18%);
}

#scopes :is(.scope-cube-panel--expanded, .scope-vectorscope-panel--expanded) {
  position: fixed !important;
  z-index: 2147483600 !important;
  inset: 16px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border: 1px solid rgb(145 202 255 / 38%);
  border-radius: 10px;
  background: #080a0d;
  box-shadow:
    0 28px 90px rgb(0 0 0 / 72%),
    0 0 0 9999px rgb(0 0 0 / 62%);
}

#scopes.scope-cube-expanded-root {
  z-index: 2147483590 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: visible !important;
  pointer-events: none;
  transform: none !important;
}

#scopes.scope-cube-expanded-root > :not(.scope-cube-panel--expanded) {
  visibility: hidden;
}

#scopes.scope-cube-expanded-root > .scope-cube-panel--expanded {
  display: flex;
  pointer-events: auto;
  visibility: visible;
}

#scopes.scope-vectorscope-expanded-root {
  z-index: 2147483590 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: visible !important;
  pointer-events: none;
  transform: none !important;
}

#scopes.scope-vectorscope-expanded-root > :not(.scope-vectorscope-panel--expanded) {
  visibility: hidden;
}

#scopes.scope-vectorscope-expanded-root > .scope-vectorscope-panel--expanded {
  display: flex;
  pointer-events: auto;
  visibility: visible;
}

#scopes :is(.scope-cube-panel--expanded, .scope-vectorscope-panel--expanded) .scope-floating-window-body {
  min-height: 0;
  flex: 1 1 auto;
}

.scope-cube-settings {
  position: fixed;
  z-index: 2147483645;
  top: 12px;
  left: 12px;
  box-sizing: border-box;
  width: min(310px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  color: #d7dce2;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 9px;
  background: linear-gradient(155deg, rgb(35 40 48 / 96%), rgb(18 21 27 / 97%));
  box-shadow:
    0 18px 46px rgb(0 0 0 / 54%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
  backdrop-filter: blur(18px) saturate(120%);
  pointer-events: auto;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

#scopes .scope-settings-open {
  overflow: visible;
}

#scopes.scope-settings-root {
  z-index: 2147483500 !important;
  overflow: visible !important;
}

.scope-cube-settings__header,
.scope-cube-settings__field > span,
.scope-cube-settings__toggle,
.scope-cube-settings__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scope-cube-settings__header {
  margin-bottom: 12px;
}

.scope-cube-settings__header span {
  display: grid;
  gap: 2px;
}

.scope-cube-settings__header small {
  color: #83bfff;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scope-cube-settings__header strong {
  color: #f0f3f6;
  font-size: 13px;
}

.scope-cube-settings__header button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: #a8afb8;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.scope-cube-settings__header button:hover {
  color: #fff;
  background: rgb(255 255 255 / 9%);
}

.scope-cube-settings__field {
  display: grid;
  margin: 0 0 12px;
  gap: 6px;
  color: #c8ced5;
  font-size: 11px;
}

.scope-cube-settings__field select {
  width: 100%;
  height: 30px;
  padding: 0 28px 0 9px;
  color: #eef3f7;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 5px;
  outline: none;
  background: #171b21;
  font: inherit;
}

.scope-cube-settings__field select:focus-visible,
.scope-cube-settings input:focus-visible,
.scope-cube-settings button:focus-visible {
  outline: 2px solid #62a8ff;
  outline-offset: 1px;
}

.scope-cube-settings input,
.scope-cube-settings select,
.scope-cube-settings button {
  pointer-events: auto;
}

.scope-cube-settings__field > small,
.scope-cube-settings__toggle small {
  color: #858e98;
  font-size: 9px;
  line-height: 1.35;
}

.scope-cube-settings__toggle {
  position: relative;
  min-height: 38px;
  margin: 0;
  gap: 12px;
  border-top: 1px solid rgb(255 255 255 / 7%);
  font-size: 11px;
}

.scope-cube-settings__toggle > span {
  display: grid;
  gap: 2px;
}

.scope-cube-settings__toggle input {
  position: absolute;
  z-index: 1;
  right: 0;
  width: 30px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.scope-cube-settings__toggle-track {
  position: relative;
  display: block;
  width: 30px;
  height: 16px;
  flex: 0 0 30px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.scope-cube-settings__toggle-track > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 50%;
  background: #a8b0ba;
  box-shadow: 0 1px 2px rgb(0 0 0 / 48%);
  transition: transform 140ms cubic-bezier(.22, 1, .36, 1), background-color 120ms ease;
}

.scope-cube-settings__toggle input:checked + .scope-cube-settings__toggle-track {
  border-color: rgb(98 168 255 / 74%);
  background: rgb(62 139 214 / 72%);
}

.scope-cube-settings__toggle input:checked + .scope-cube-settings__toggle-track > span {
  background: #f4f9ff;
  transform: translateX(14px);
}

.scope-cube-settings__toggle input:focus-visible + .scope-cube-settings__toggle-track {
  outline: 2px solid #62a8ff;
  outline-offset: 2px;
}

.scope-cube-settings__toggle input:disabled + .scope-cube-settings__toggle-track {
  opacity: .34;
  cursor: default;
}

.scope-cube-settings__size {
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.scope-cube-settings__size output {
  color: #8fc8ff;
  font-variant-numeric: tabular-nums;
}

.scope-cube-settings__size input {
  width: 100%;
  margin: 0;
  accent-color: #62a8ff;
  pointer-events: auto;
  cursor: ew-resize;
}

.scope-cube-settings__actions {
  gap: 7px;
}

.scope-cube-settings__actions button {
  min-height: 29px;
  flex: 1 1 0;
  padding: 0 9px;
  color: #cbd2d9;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 5px;
  background: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.scope-cube-settings__actions button:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 10%);
}

.scope-cube-settings__actions .scope-cube-settings__primary {
  color: #e9f5ff;
  border-color: rgb(98 168 255 / 42%);
  background: rgb(55 125 192 / 34%);
}

#scopes :is(.scope-cube-panel, .scope-vectorscope-panel, .scope-gamut-panel) .scope-floating-window-body,
#scopes :is(.scope-cube-panel, .scope-vectorscope-panel, .scope-gamut-panel) .scope-docked-panel-body {
  position: relative;
}

#scopes .scope-cube-hud {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  left: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  color: rgb(220 229 238 / 58%);
  font-size: 9px;
  line-height: 1.2;
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
}

#scopes .scope-cube-hud__space {
  color: rgb(190 222 255 / 78%);
  font-weight: 620;
  letter-spacing: .02em;
}

#scopes .scope-cube-hud__space.is-loading {
  animation: scope-cube-loading 900ms ease-in-out infinite alternate;
}

#scopes .scope-cube-hud__navigation {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#scopes .scope-gamut-hud {
  justify-content: flex-end;
}

@keyframes scope-cube-loading {
  from { opacity: .42; }
  to { opacity: 1; }
}

@media (max-width: 700px) {
  #scopes .scope-cube-hud__navigation {
    display: none;
  }
}

#floating_panels {
  position: fixed;
  /* Above docked/default panes, below dialogs (100000) and root popovers. */
  z-index: 50000;
  inset: 0;
  pointer-events: none;
}

#floating_panels .navigator-floating-window {
  --button-text-color: hsla(180, 2%, 78%, 1);
  --button-text-inactive-color: hsla(180, 2%, 50%, 1);
  --button-text-hover-color: #ddd;
  pointer-events: auto;
  background: #111;
}

#floating_panels .navigator-floating-window > .preset-group-header {
  cursor: default;
}

.navigator-content-host,
.navigator-floating-body {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: #171717;
}

.navigator-floating-body {
  container-name: navigator-panel;
  container-type: inline-size;
}

.navigator-floating-body .navigator-floating-toolbar {
  min-height: 40px;
  flex: 0 0 auto;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: color-mix(in srgb, var(--main-bg-color) 70%, transparent);
  container-name: navigator-toolbar;
  container-type: inline-size;
}

.navigator-toolbar {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
}

.navigator-toolbar__edge {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
}

.navigator-toolbar__edge--left {
  justify-content: flex-start;
}

.navigator-toolbar__edge--right {
  justify-content: flex-end;
}

.navigator-toolbar__center {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.navigator-toolbar__group {
  display: inline-flex;
  height: 32px;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-bg-color) 45%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.navigator-toolbar-button {
  display: inline-flex;
  width: 26px;
  height: 26px;
  padding: 0;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--props-text-color);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.navigator-toolbar-button:hover,
.navigator-toolbar-filename:hover,
.navigator-toolbar-version-badge:hover {
  border-color: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  color: var(--button-text-color);
  background: var(--hover-button-bg-color);
}

.navigator-toolbar-button--active {
  border-color: color-mix(in srgb, #448ee4 55%, var(--button-border-color));
  color: var(--button-text-color);
  background: rgb(68 142 228 / 16%);
}

.navigator-toolbar-button:disabled {
  color: var(--button-text-inactive-color);
  cursor: default;
  opacity: .46;
}

.navigator-toolbar-button:focus-visible,
.navigator-toolbar-filename:focus-visible,
.navigator-toolbar-version-badge:focus-visible {
  z-index: 1;
  outline: 2px solid #448ee4;
  outline-offset: 1px;
}

.navigator-toolbar-button > span::before {
  margin: 0;
  font-size: 13px;
}

.navigator-liquify-tool-icon {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.navigator-toolbar-button--active .navigator-liquify-tool-icon {
  filter: drop-shadow(0 0 3px rgb(126 88 255 / 48%));
}

.navigator-inspect-tool-icon {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 14px;
  height: 14px;
  border: 1.4px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 30%, currentColor 30% 36%, transparent 36% 64%, currentColor 64% 70%, transparent 70%),
    linear-gradient(transparent 30%, currentColor 30% 36%, transparent 36% 64%, currentColor 64% 70%, transparent 70%);
}

.navigator-toolbar-button > .navigator-inspect-tool-icon::before {
  content: none;
}

.navigator-inspect-tool-icon::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.navigator-face-overlay-icon {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 15px;
  height: 15px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
}

.navigator-toolbar-button > .navigator-face-overlay-icon::before {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 0 currentColor;
  content: '';
}

.navigator-face-overlay-icon::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 3px;
  border-bottom: 1.4px solid currentColor;
  border-radius: 0 0 50% 50%;
  content: '';
}

.navigator-comparison-icon {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 15px;
  height: 12px;
  overflow: hidden;
  border: 1.4px solid currentColor;
  border-radius: 2px;
}

.navigator-comparison-icon::before,
.navigator-comparison-icon::after {
  position: absolute;
  top: 0;
  bottom: 0;
  content: '';
}

.navigator-comparison-icon::before {
  left: 0;
  width: calc(50% - .7px);
  background: rgb(255 255 255 / 14%);
}

.navigator-comparison-icon::after {
  left: calc(50% - .7px);
  width: 1.4px;
  background: currentColor;
  box-shadow: 2px 0 0 rgb(68 142 228 / 26%);
}

.navigator-tools-strip {
  position: absolute;
  z-index: 1012;
  top: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  width: 42px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 5px 4px 6px;
  overflow: auto;
  border: 1px solid #c5c5c5;
  border-radius: 8px;
  color: #1a1a1a;
  background: #efefef;
  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);
  scrollbar-width: thin;
}

body.dark-theme .navigator-tools-strip,
body.dark-theme .navigator-tools-strip__flyout {
  border-color: #4a4d50;
  color: #f0f2f4;
  background: #2a2c2e;
}

.navigator-tools-strip__tools {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.navigator-tools-strip__slot {
  position: relative;
  flex: 0 0 auto;
}

.navigator-tools-strip__button,
.navigator-tools-strip__well-button,
.navigator-tools-strip__swatch {
  display: inline-flex;
  width: 32px;
  height: 26px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.navigator-tools-strip__button:hover,
.navigator-tools-strip__well-button:hover,
.navigator-tools-strip__flyout-item:hover {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.navigator-tools-strip__button--active,
.navigator-tools-strip__button--open,
.navigator-tools-strip__flyout-item--active {
  border-color: #1d4f8c;
  color: #fff;
  background: #2f6fbd;
}

body.dark-theme .navigator-tools-strip__button--active,
body.dark-theme .navigator-tools-strip__button--open,
body.dark-theme .navigator-tools-strip__flyout-item--active {
  border-color: #7eb3f0;
  color: #fff;
  background: #3d6ea8;
}

.navigator-tools-strip__button:focus-visible,
.navigator-tools-strip__well-button:focus-visible,
.navigator-tools-strip__swatch:focus-visible,
.navigator-tools-strip__flyout-item:focus-visible,
.navigator-tools-strip__flyout-hit:focus-visible {
  z-index: 1;
  outline: 2px solid #448ee4;
  outline-offset: 1px;
}

.navigator-tools-strip svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.navigator-tools-strip svg [data-fill],
.navigator-tools-strip__flyout svg [data-fill] {
  fill: currentColor;
  stroke: none;
}

.navigator-tools-strip__flyout-mark {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 5px 5px;
  border-color: transparent transparent currentColor transparent;
  pointer-events: none;
}

.navigator-tools-strip__slot--flyout:has(.navigator-tools-strip__button--active) .navigator-tools-strip__flyout-mark,
.navigator-tools-strip__slot--flyout:has(.navigator-tools-strip__button--open) .navigator-tools-strip__flyout-mark {
  border-color: transparent transparent #fff transparent;
}

.navigator-tools-strip__flyout-hit {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.navigator-tools-strip__wells {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.navigator-tools-strip__well-button {
  width: 32px;
  height: 18px;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

.navigator-tools-strip__default-colors {
  position: relative;
  height: 20px;
}

.navigator-tools-strip__default-colors .navigator-tools-strip__swatch {
  position: absolute;
  width: 10px;
  height: 10px;
  min-width: 10px;
  pointer-events: none;
}

.navigator-tools-strip__default-colors .navigator-tools-strip__swatch--back {
  top: 7px;
  left: 14px;
  background: #fff;
}

.navigator-tools-strip__default-colors .navigator-tools-strip__swatch--front {
  top: 3px;
  left: 8px;
  background: #000;
}

.navigator-tools-strip__swatches {
  position: relative;
  width: 32px;
  height: 32px;
}

.navigator-tools-strip__swatch {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid #111;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #fff;
}

.navigator-tools-strip__swatch--back {
  top: 12px;
  left: 12px;
}

.navigator-tools-strip__swatch--front {
  top: 4px;
  left: 4px;
}

.navigator-tools-strip__flyout {
  position: fixed;
  z-index: 100050;
  display: flex;
  min-width: 220px;
  box-sizing: border-box;
  flex-direction: column;
  padding: 4px;
  overflow: auto;
  border: 1px solid #c5c5c5;
  border-radius: 8px;
  color: #1a1a1a;
  background: #efefef;
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
}

.navigator-tools-strip__flyout-item {
  display: flex;
  min-height: 28px;
  padding: 3px 8px 3px 6px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.navigator-tools-strip__flyout-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.navigator-tools-strip__flyout-item span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.phone-layout .navigator-tools-strip,
body.phone-layout .navigator-tools-strip__flyout {
  display: none;
}

.navigator-tools-strip__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.navigator-tools-strip__color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.navigator-tools-overlay {
  position: absolute;
  z-index: 1002;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.navigator-tools-overlay--interactive {
  pointer-events: auto;
  cursor: crosshair;
}

.navigator-tools-overlay__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.navigator-tools-overlay__artboard,
.navigator-tools-overlay__shape,
.navigator-tools-overlay__path,
.navigator-tools-overlay__measure,
.navigator-tools-overlay__selection {
  fill: none;
  stroke: #2f6fbd;
  stroke-width: 0.004;
  vector-effect: non-scaling-stroke;
}

.navigator-tools-overlay__artboard,
.navigator-tools-overlay__shape--artboard,
.navigator-tools-overlay__shape--frame,
.navigator-tools-overlay__shape--slice {
  stroke-dasharray: 0.018 0.01;
}

.navigator-tools-overlay__selection {
  stroke: #f4f7fb;
  stroke-dasharray: 0.012 0.008;
}

.navigator-tools-overlay__selection--quick-mask {
  fill: #c62828;
  stroke: #7f1010;
  stroke-dasharray: none;
}

.navigator-tools-overlay__sample,
.navigator-tools-overlay__count {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  min-width: 16px;
  min-height: 16px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  border-radius: 999px;
  color: #111;
  background: #fff;
  box-shadow: 0 0 0 1px #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.navigator-tools-overlay__note,
.navigator-tools-overlay__text {
  position: absolute;
  z-index: 2;
  min-width: 88px;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid #1d4f8c;
  border-radius: 4px;
  color: #111;
  background: #fff8c6;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  font: 600 12px/1.35 system-ui, sans-serif;
  pointer-events: auto;
  resize: both;
}

.navigator-tools-overlay__text {
  background: rgb(255 255 255 / 92%);
}

.navigator-tools-overlay__text--vertical {
  writing-mode: vertical-rl;
}

.navigator-tools-overlay__note::placeholder,
.navigator-tools-overlay__text:empty::before {
  color: #4a4a4a;
}

.navigator-tools-overlay__text:empty::before {
  content: attr(data-placeholder);
}

body.photoeditor-screen-menu .collapsed-dock-launcher,
body.photoeditor-screen-menu .bottom-dock-launcher,
body.photoeditor-screen-full .collapsed-dock-launcher,
body.photoeditor-screen-full .bottom-dock-launcher,
body.photoeditor-screen-full #main_tabs {
  visibility: hidden;
  pointer-events: none;
}

body.photoeditor-screen-menu .preset-group-container--detached,
body.photoeditor-screen-full .preset-group-container--detached {
  visibility: hidden;
}

body.photoeditor-screen-menu .preset-group-container--detached:has(.navigator-floating-body),
body.photoeditor-screen-full .preset-group-container--detached:has(.navigator-floating-body) {
  visibility: visible;
}

.navigator-comparison-popover {
  position: fixed;
  z-index: 99999;
  box-sizing: border-box;
  width: min(270px, calc(100vw - 16px));
  padding: 12px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 82%, white 8%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--main-bg-color) 96%, black);
  box-shadow: 0 14px 36px rgb(0 0 0 / 46%), inset 0 1px rgb(255 255 255 / 6%);
  font-size: 11px;
}

.navigator-comparison-popover header {
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  gap: 2px;
}

.navigator-comparison-popover header strong {
  font-size: 12px;
}

.navigator-comparison-popover header span,
.navigator-comparison-popover small {
  color: var(--button-text-inactive-color);
  line-height: 1.35;
}

.navigator-comparison-popover fieldset {
  display: flex;
  margin: 0;
  padding: 8px 0;
  flex-direction: column;
  gap: 6px;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.navigator-comparison-popover legend {
  padding: 0 0 5px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.navigator-comparison-popover label {
  display: grid;
  min-height: 24px;
  align-items: center;
  column-gap: 7px;
  cursor: pointer;
  grid-template-columns: auto 1fr;
}

.navigator-comparison-popover label small {
  grid-column: 2;
}

.navigator-comparison-popover__disabled {
  opacity: .55;
  cursor: default !important;
}

.navigator-comparison-popover__segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.navigator-comparison-popover button {
  min-height: 28px;
  padding: 4px 8px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  background: var(--button-bg-color);
  cursor: pointer;
  font: inherit;
}

.navigator-comparison-popover__segmented button:first-child {
  border-radius: 6px 0 0 6px;
}

.navigator-comparison-popover__segmented button:last-child {
  margin-left: -1px;
  border-radius: 0 6px 6px 0;
}

.navigator-comparison-popover button[aria-pressed='true'] {
  z-index: 1;
  border-color: #448ee4;
  background: rgb(68 142 228 / 18%);
}

.navigator-comparison-popover button:hover {
  background: var(--hover-button-bg-color);
}

.navigator-comparison-popover__actions {
  display: flex;
  padding-top: 8px;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.navigator-comparison-popover__actions button {
  flex: 1;
  border-radius: 6px;
}

.navigator-geometry-button > span {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.navigator-geometry-button--modified::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border: 1px solid color-mix(in srgb, #10233c 72%, transparent);
  border-radius: 50%;
  background: #65aaf1;
  content: '';
}

.navigator-geometry-button {
  position: relative;
}

.navigator-geometry-button > span::before,
.navigator-geometry-button > span::after {
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: currentColor;
  content: '';
}

.navigator-geometry-button > span::before {
  top: 0;
  left: 0;
  border-bottom: 1.5px solid;
  border-left: 1.5px solid;
}

.navigator-geometry-button > span::after {
  right: 0;
  bottom: 0;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
}

.navigator-geometry-popover {
  position: fixed;
  z-index: 99999;
  box-sizing: border-box;
  width: min(330px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 13px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 82%, white 8%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--main-bg-color) 96%, black);
  box-shadow: 0 16px 42px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 6%);
  font-size: 11px;
}

.navigator-geometry-popover header,
.navigator-geometry-popover__section-heading,
.navigator-geometry-custom-ratio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.navigator-geometry-popover header > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navigator-geometry-popover header strong {
  font-size: 13px;
}

.navigator-geometry-popover header small,
.navigator-geometry-popover__section-heading span,
.navigator-geometry-popover > p {
  color: var(--button-text-inactive-color);
  line-height: 1.35;
}

.navigator-geometry-popover section {
  display: flex;
  margin-top: 11px;
  padding-top: 11px;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 55%, transparent);
}

.navigator-geometry-popover button,
.navigator-geometry-popover select,
.navigator-geometry-popover input {
  min-height: 29px;
  box-sizing: border-box;
  padding: 4px 8px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: var(--button-bg-color);
  font: inherit;
}

.navigator-geometry-popover button {
  cursor: pointer;
}

.navigator-geometry-popover button:hover,
.navigator-geometry-popover select:hover {
  background: var(--hover-button-bg-color);
}

.navigator-geometry-popover button:focus-visible,
.navigator-geometry-popover select:focus-visible,
.navigator-geometry-popover input:focus-visible {
  outline: 2px solid #5599e8;
  outline-offset: 1px;
}

.navigator-geometry-popover button:disabled {
  color: var(--button-text-inactive-color);
  cursor: default;
}

.navigator-geometry-popover__rotate {
  display: grid;
  grid-template-columns: 42px 42px 1fr;
  gap: 6px;
}

.navigator-geometry-popover__rotate button:first-child,
.navigator-geometry-popover__rotate button:nth-child(2) {
  font-size: 18px;
}

.navigator-geometry-ratios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.navigator-geometry-ratios button[aria-checked='true'] {
  border-color: #5599e8;
  color: #fff;
  background: color-mix(in srgb, #2f74c8 46%, var(--button-bg-color));
}

.navigator-geometry-custom-ratio span {
  flex: 0 0 auto;
}

.navigator-geometry-custom-ratio input {
  width: 92px;
  min-width: 0;
  margin-left: auto;
}

.navigator-geometry-custom-ratio input[aria-invalid='true'] {
  border-color: #df745f;
}

.navigator-geometry-popover__spiral-turn {
  align-self: flex-start;
}

.navigator-geometry-popover > p {
  margin: 11px 0 0;
}

.navigator-geometry-overlay {
  position: absolute;
  z-index: 1010;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
}

.navigator-geometry-overlay__shade {
  fill: rgb(4 7 11 / 72%);
  pointer-events: none;
}

.navigator-geometry-overlay__crop {
  fill: rgb(255 255 255 / 1%);
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
  cursor: move;
}

.navigator-geometry-overlay__guides {
  fill: none;
  stroke: rgb(255 255 255 / 86%);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 85%));
  pointer-events: none;
}

.navigator-geometry-overlay__spiral {
  stroke-width: 1.5px;
}

.navigator-geometry-overlay__scale-hit,
.navigator-geometry-overlay__rotation-hit {
  fill: transparent;
}

.navigator-geometry-overlay__scale-hit--nw,
.navigator-geometry-overlay__scale-hit--se {
  cursor: nwse-resize;
}

.navigator-geometry-overlay__scale-hit--ne,
.navigator-geometry-overlay__scale-hit--sw {
  cursor: nesw-resize;
}

.navigator-geometry-overlay__rotation-hit {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M7 12a8 8 0 0 1 13-4l2 2M21 5l1 5-5 1M21 16a8 8 0 0 1-13 4l-2-2M7 23l-1-5 5-1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 12a8 8 0 0 1 13-4l2 2M21 5l1 5-5 1M21 16a8 8 0 0 1-13 4l-2-2M7 23l-1-5 5-1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, crosshair;
}

.navigator-geometry-overlay__handle {
  fill: #fff;
  stroke: #0d1722;
  stroke-width: 2px;
  pointer-events: none;
}

.navigator-geometry-overlay__rotation-handle {
  fill: #0d1722;
  stroke: #fff;
  stroke-width: 1.5px;
  pointer-events: none;
}

.navigator-geometry-overlay__rotation-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.navigator-paint-eraser-icon {
  display: block;
  width: 13px;
  height: 9px;
  border: 1.4px solid currentColor;
  border-radius: 2px;
  transform: rotate(-35deg);
}

.navigator-repair-tool-icon {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.navigator-repair-tool-icon--patch {
  stroke-dasharray: 1.5 1.1;
}

.app-transient-notice {
  position: fixed;
  top: calc(var(--studio-header-height, 42px) + 12px);
  right: 16px;
  z-index: 2147483610;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  border-radius: 16px;
  background: #f5f5f7;
  box-shadow: 0 18px 40px rgb(0 0 0 / 22%), 0 2px 8px rgb(0 0 0 / 10%);
  cursor: pointer;
  animation: app-transient-notice-in 220ms ease-out;
}

body.dark-theme .app-transient-notice {
  color: #f5f5f7;
  border-color: #3a3a3c;
  background: #2c2c2e;
  box-shadow: 0 18px 40px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 28%);
}

.app-transient-notice strong {
  display: block;
  color: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.app-transient-notice p {
  margin: 6px 0 0;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 1;
}

@keyframes app-transient-notice-in {
  from { transform: translateX(28px); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-transient-notice {
    animation: none;
  }
}

.navigator-paint-popover {
  position: fixed;
  z-index: 99999;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 82%, white 8%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--main-bg-color) 96%, black);
  box-shadow: 0 16px 40px rgb(0 0 0 / 48%), inset 0 1px rgb(255 255 255 / 7%);
  font-size: 13px;
}

.navigator-paint-popover header {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.navigator-paint-popover header strong {
  font-size: 15px;
}

.navigator-paint-popover header button {
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--button-text-color);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
}

.navigator-paint-popover header button:hover {
  border-color: var(--button-border-color);
  background: var(--hover-button-bg-color);
}

.navigator-paint-popover fieldset {
  margin: 7px 0 10px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.navigator-paint-popover legend,
.navigator-paint-popover__color > span,
.navigator-paint-popover__size > div > label:first-child {
  padding: 0;
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.navigator-paint-popover__engine legend,
.navigator-paint-popover__erase-target legend {
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.navigator-paint-popover__engine > div,
.navigator-paint-popover__erase-target > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.navigator-paint-popover__engine p,
.navigator-paint-popover__erase-target p {
  margin: 6px 0 0;
  color: var(--button-text-color);
  font-size: 12px;
  line-height: 1.45;
}

.navigator-paint-popover__brushes > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.navigator-paint-popover__brushes button {
  display: grid;
  min-width: 0;
  min-height: 31px;
  padding: 5px 7px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: var(--button-bg-color);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.navigator-paint-popover__brushes button.is-active {
  border-color: #448ee4;
  background: rgb(68 142 228 / 18%);
}

.navigator-paint-popover .paint-brush-sample {
  position: relative;
  display: block;
  width: 31px;
  height: 12px;
}

.navigator-paint-popover .paint-brush-sample::before {
  position: absolute;
  top: 50%;
  right: 1px;
  left: 1px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  content: '';
  transform: translateY(-50%) rotate(-5deg);
}

.navigator-paint-popover .paint-brush-sample--charcoal::before {
  height: 7px;
  opacity: .78;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px);
}

.navigator-paint-popover .paint-brush-sample--calligraphy::before {
  height: 3px;
  border-radius: 1px;
  transform: translateY(-50%) rotate(-13deg) skewX(-25deg);
}

.navigator-paint-popover .paint-brush-sample--marker::before {
  height: 8px;
  border-radius: 2px;
  opacity: .74;
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--soft-round::before {
  height: 7px;
  opacity: .68;
  filter: blur(2px);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--airbrush::before {
  height: 10px;
  opacity: .54;
  background: radial-gradient(ellipse at center, currentColor, transparent 72%);
  filter: blur(1px);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--pencil::before {
  height: 2px;
  border-radius: 1px;
  opacity: .88;
  transform: translateY(-50%) rotate(-4deg);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--ink::before {
  height: 3px;
  border-radius: 0 999px 999px 0;
  transform: translateY(-50%) rotate(-12deg) skewX(-28deg);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--hard-round::before {
  height: 5px;
  opacity: 1;
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--detail-liner::before {
  height: 2px;
  border-radius: 1px 999px 999px 1px;
  transform: translateY(-50%) rotate(-4deg) scaleX(.96);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--dry-ink::before {
  height: 5px;
  border-radius: 1px;
  opacity: .76;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px);
  transform: translateY(-50%) rotate(-9deg) skewX(-20deg);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--flat-brush::before {
  height: 8px;
  border-radius: 1px;
  opacity: .9;
  transform: translateY(-50%) rotate(-2deg);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--chalk::before {
  height: 7px;
  border-radius: 2px;
  opacity: .82;
  background: repeating-linear-gradient(105deg, currentColor 0 2px, transparent 2px 4px);
  filter: blur(.2px);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--pastel::before {
  height: 9px;
  opacity: .64;
  background: radial-gradient(ellipse at center, currentColor 25%, transparent 78%);
  filter: blur(.65px);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--watercolor::before {
  height: 10px;
  opacity: .42;
  background: radial-gradient(ellipse at 45% 50%, currentColor 12%, transparent 75%);
  filter: blur(1.2px);
}

:is(.navigator-paint-popover, .paint-layer-properties) .paint-brush-sample--spray::before {
  height: 11px;
  opacity: .66;
  background:
    radial-gradient(circle at 8% 60%, currentColor 0 1px, transparent 1.4px),
    radial-gradient(circle at 25% 30%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 66%, currentColor 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 66% 36%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 58%, currentColor 0 1.2px, transparent 1.7px);
}

.navigator-paint-popover__color {
  display: grid;
  margin-bottom: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
}

.navigator-paint-popover__color > span {
  grid-column: 1 / -1;
}

.navigator-paint-popover__color input[type='color'] {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: var(--button-bg-color);
  cursor: pointer;
}

.navigator-paint-popover__color output {
  color: var(--button-text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.navigator-paint-popover__size {
  display: grid;
  gap: 7px;
}

.navigator-paint-popover__size > div {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.navigator-paint-popover__number {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--button-text-color);
  font-size: 13px;
}

.navigator-paint-popover__number input {
  box-sizing: border-box;
  width: 64px;
  height: 30px;
  padding: 2px 6px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  background: var(--button-bg-color);
  font: inherit;
  font-size: 13px;
  text-align: right;
}

.navigator-paint-popover input {
  pointer-events: auto;
}

.navigator-paint-popover input[type='range'] {
  width: 100%;
  height: 32px;
  margin: 0;
  cursor: pointer;
  touch-action: none;
}

.navigator-paint-popover__repair {
  margin: 8px 0 10px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.navigator-toolbar-filename {
  max-width: 100%;
  height: 26px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--button-text-inactive-color);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-document-tabs {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.navigator-document-tabs::-webkit-scrollbar {
  display: none;
}

.navigator-document-tab {
  display: inline-flex;
  min-width: 64px;
  max-width: 156px;
  height: 28px;
  flex: 0 1 auto;
  align-items: center;
  overflow: hidden;
  color: #c5ccd3;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 7px;
  background: #24282c;
}

.navigator-document-tab.is-active {
  color: #f4f8fc;
  border-color: #5897cf;
  background: #274660;
  box-shadow: inset 0 -2px #7dbef5;
}

.navigator-document-tab__select,
.navigator-document-tab__close {
  height: 100%;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.navigator-document-tab__select {
  min-width: 0;
  padding: 0 7px;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-document-tab__close {
  width: 24px;
  flex: 0 0 24px;
  color: #c5ccd3;
  font-size: 15px;
}

.navigator-document-tab__select:hover,
.navigator-document-tab__close:hover {
  color: #fff;
  background: rgb(255 255 255 / 10%);
}

.navigator-document-tab__select:focus-visible,
.navigator-document-tab__close:focus-visible {
  z-index: 1;
  outline: 2px solid #91cbff;
  outline-offset: -2px;
}

.navigator-document-tabs--compact {
  max-width: calc(100% - 56px);
  margin-right: auto;
}

.navigator-document-tabs--compact .navigator-document-tab {
  min-width: 72px;
  max-width: 132px;
  height: 36px;
  background: rgb(33 44 56 / 94%);
}

.navigator-toolbar-version-badge {
  min-width: 36px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #448ee4 52%, var(--button-border-color));
  border-radius: 999px;
  color: var(--button-text-color);
  background: rgb(68 142 228 / 14%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
}

@container navigator-toolbar (max-width: 480px) {
  .navigator-toolbar {
    height: auto;
    flex-wrap: wrap;
    gap: 4px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .navigator-toolbar__center {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .navigator-toolbar__edge {
    display: none;
  }

  .navigator-toolbar-filename {
    padding-right: 4px;
    padding-left: 4px;
  }
}

@container navigator-toolbar (max-width: 260px) {
  .navigator-toolbar__group {
    gap: 1px;
    padding-right: 1px;
    padding-left: 1px;
  }

  .navigator-toolbar-button {
    width: 22px;
    height: 24px;
    flex-basis: 22px;
  }

  .navigator-toolbar-version-badge {
    min-width: 30px;
    height: 22px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .navigator-toolbar__group {
    height: 30px;
  }
}

.navigator-floating-body .navigator-floating-canvas {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #000;
}

.navigator-picture-loading-label {
  position: absolute;
  z-index: 1005;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 32px);
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000, 0 0 14px rgb(0 0 0 / 90%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.navigator-comparison-divider {
  position: absolute;
  z-index: 1006;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
}

.navigator-comparison-divider::before {
  position: absolute;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 42%), 0 0 8px rgb(0 0 0 / 55%);
  content: '';
}

.navigator-comparison-divider span {
  position: absolute;
  box-sizing: border-box;
  width: 18px;
  height: 28px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--main-bg-color) 84%, transparent);
  box-shadow: 0 3px 10px rgb(0 0 0 / 42%);
}

.navigator-comparison-divider span::before,
.navigator-comparison-divider span::after {
  position: absolute;
  background: rgb(255 255 255 / 64%);
  content: '';
}

.navigator-comparison-divider--vertical {
  top: 0;
  bottom: 0;
  width: 20px;
  margin-left: -10px;
  cursor: ew-resize;
}

.navigator-comparison-divider--vertical::before {
  top: 0;
  bottom: 0;
  left: 9px;
  width: 1px;
}

.navigator-comparison-divider--vertical span {
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
}

.navigator-comparison-divider--vertical span::before,
.navigator-comparison-divider--vertical span::after {
  top: 8px;
  bottom: 8px;
  width: 1px;
}

.navigator-comparison-divider--vertical span::before { left: 6px; }
.navigator-comparison-divider--vertical span::after { right: 6px; }

.navigator-comparison-divider--horizontal {
  right: 0;
  left: 0;
  height: 20px;
  margin-top: -10px;
  cursor: ns-resize;
}

.navigator-comparison-divider--horizontal::before {
  top: 9px;
  right: 0;
  left: 0;
  height: 1px;
}

.navigator-comparison-divider--horizontal span {
  top: 1px;
  left: 50%;
  width: 28px;
  height: 18px;
  transform: translateX(-50%);
}

.navigator-comparison-divider--horizontal span::before,
.navigator-comparison-divider--horizontal span::after {
  right: 8px;
  left: 8px;
  height: 1px;
}

.navigator-comparison-divider--horizontal span::before { top: 6px; }
.navigator-comparison-divider--horizontal span::after { bottom: 6px; }

.navigator-comparison-label {
  position: absolute;
  z-index: 1005;
  padding: 4px 7px;
  color: rgb(255 255 255 / 92%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(16 16 16 / 68%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 34%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1;
  pointer-events: none;
}

.navigator-comparison-label--vertical.navigator-comparison-label--first {
  top: 9px;
  left: 9px;
}

.navigator-comparison-label--vertical.navigator-comparison-label--second {
  top: 9px;
  right: 9px;
}

.navigator-comparison-label--horizontal.navigator-comparison-label--first {
  top: 9px;
  left: 9px;
}

.navigator-comparison-label--horizontal.navigator-comparison-label--second {
  bottom: 9px;
  left: 9px;
}

.navigator-comparison-label--edited {
  color: #dcecff;
  border-color: rgb(68 142 228 / 46%);
  background: rgb(27 68 112 / 70%);
}

.navigator-liquify-brush-preview {
  position: absolute;
  z-index: 1004;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.navigator-liquify-brush-preview circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.navigator-liquify-brush-preview__contrast {
  stroke: rgb(0 0 0 / 78%);
  stroke-width: 3.5px;
}

.navigator-liquify-brush-preview__outline {
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 1.35px;
}

.navigator-liquify-brush-preview__center {
  fill: rgb(255 255 255 / 96%) !important;
  stroke: rgb(0 0 0 / 82%);
  stroke-width: 1px;
}

.navigator-paint-brush-preview {
  z-index: 1009;
}

.navigator-paint-brush-preview__color {
  fill: color-mix(in srgb, var(--paint-brush-color) 18%, transparent) !important;
  stroke: var(--paint-brush-color);
  stroke-width: 1.5px;
}

.navigator-paint-brush-preview--eraser .navigator-paint-brush-preview__color,
.navigator-paint-brush-preview--erase .navigator-paint-brush-preview__color {
  fill: rgb(255 255 255 / 10%) !important;
  stroke: rgb(255 255 255 / 96%);
  stroke-dasharray: 4 3;
}

.navigator-paint-brush-preview--heal .navigator-paint-brush-preview__color {
  fill: rgb(126 235 203 / 12%) !important;
  stroke: rgb(126 235 203 / 98%);
  stroke-dasharray: 2.5 2.5;
}

.navigator-paint-brush-preview--clone .navigator-paint-brush-preview__color {
  fill: rgb(160 205 255 / 12%) !important;
  stroke: rgb(160 205 255 / 98%);
  stroke-dasharray: 6 2;
}

.navigator-paint-brush-preview--patch .navigator-paint-brush-preview__color {
  fill: rgb(255 194 102 / 10%) !important;
  stroke: rgb(255 204 128 / 98%);
  stroke-dasharray: 1.5 3;
}

.navigator-paint-sample-source circle,
.navigator-paint-sample-source path {
  fill: rgb(8 16 22 / 42%);
  stroke: rgb(255 255 255 / 98%);
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

.navigator-paint-sample-source path {
  fill: none;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 95%));
}

.navigator-object-mask-prompts {
  position: absolute;
  z-index: 1006;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.navigator-object-mask-prompts polyline,
.navigator-object-mask-prompts circle {
  vector-effect: non-scaling-stroke;
}

.navigator-object-mask-prompts polyline {
  fill: none;
  stroke: rgb(36 196 255 / 88%);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-object-mask-prompt__hit {
  fill: rgb(7 21 30 / 84%);
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 1.5px;
}

.navigator-object-mask-prompt__point {
  fill: #24c4ff;
  stroke: rgb(0 0 0 / 92%);
  stroke-width: 1.5px;
}

.navigator-object-mask-prompt__center {
  fill: #fff;
  stroke: none;
}

.navigator-object-mask-prompts .is-draft polyline {
  stroke: #ffd55c;
}

.navigator-object-mask-prompts .is-draft .navigator-object-mask-prompt__point {
  fill: #ffd55c;
}

.navigator-object-mask-prompts .is-add:not(.is-draft) .navigator-object-mask-prompt__point {
  fill: #55e59c;
}

.navigator-object-mask-prompts .is-subtract:not(.is-draft) .navigator-object-mask-prompt__point,
.navigator-object-mask-prompts .is-erase:not(.is-draft) .navigator-object-mask-prompt__point {
  fill: #ff6f72;
}

.navigator-object-mask-prompts .is-add:not(.is-draft) polyline {
  stroke: rgb(85 229 156 / 92%);
}

.navigator-object-mask-prompts :is(.is-subtract, .is-erase):not(.is-draft) polyline {
  stroke: rgb(255 111 114 / 92%);
}

.navigator-geometric-mask-handles {
  position: absolute;
  z-index: 1006;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.navigator-geometric-mask-handles polygon,
.navigator-geometric-mask-handles circle,
.navigator-geometric-mask-handles ellipse,
.navigator-geometric-mask-handles rect {
  vector-effect: non-scaling-stroke;
}

.navigator-geometric-mask-handles__shape {
  fill: rgb(36 196 255 / 28%);
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.6px;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-geometric-mask-handles .is-draft .navigator-geometric-mask-handles__shape {
  fill: rgb(36 196 255 / 38%);
  stroke: #ffd55c;
  stroke-width: 1.8px;
}

.navigator-geometric-mask-handles__box {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 1.25px;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-geometric-mask-handles__hit {
  fill: rgb(7 21 30 / 78%);
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 1.4px;
}

.navigator-geometric-mask-handles__handle {
  fill: #24c4ff;
  stroke: rgb(0 0 0 / 92%);
  stroke-width: 1.4px;
}

.navigator-geometric-mask-handles .is-draft .navigator-geometric-mask-handles__handle {
  fill: #ffd55c;
}

.navigator-geometric-mask-handles .is-draft .navigator-geometric-mask-handles__box {
  stroke: #ffd55c;
}

.navigator-geometric-mask-handles__path {
  fill: rgb(36 196 255 / 10%);
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 1.25px;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-geometric-mask-handles__invert-disc {
  fill: #24c4ff;
  stroke: rgb(0 0 0 / 92%);
  stroke-width: 1.4px;
}

.navigator-geometric-mask-handles__invert-mark {
  fill: #07151e;
}

.navigator-geometric-mask-handles__rotation-handle {
  fill: #07151e;
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 1.5px;
}

.navigator-geometric-mask-handles__rotation-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__shape,
.navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__box,
.navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__path {
  stroke: #ff8ad4;
}

.navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__invert-disc,
.navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__handle {
  fill: #ff8ad4;
}

body.light-theme .navigator-geometric-mask-handles__shape {
  fill: rgb(11 106 168 / 22%);
  stroke: rgb(20 36 52 / 88%);
}

body.light-theme .navigator-geometric-mask-handles .is-draft .navigator-geometric-mask-handles__shape {
  fill: rgb(11 106 168 / 32%);
  stroke: #b45309;
}

body.light-theme .navigator-geometric-mask-handles__handle {
  fill: #0b6aa8;
  stroke: #fff;
}

body.light-theme .navigator-geometric-mask-handles__hit {
  fill: rgb(255 255 255 / 88%);
  stroke: rgb(20 36 52 / 88%);
}

body.light-theme .navigator-geometric-mask-handles__path {
  fill: rgb(11 106 168 / 10%);
  stroke: rgb(20 36 52 / 88%);
}

body.light-theme .navigator-geometric-mask-handles__invert-disc {
  fill: #0b6aa8;
  stroke: #fff;
}

body.light-theme .navigator-geometric-mask-handles__invert-mark {
  fill: #fff;
}

body.light-theme .navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__box,
body.light-theme .navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__path {
  stroke: #9b2278;
}

body.light-theme .navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__invert-disc,
body.light-theme .navigator-geometric-mask-handles .is-inverted .navigator-geometric-mask-handles__handle {
  fill: #9b2278;
}

.navigator-gradient-handles {
  position: absolute;
  z-index: 1006;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.navigator-gradient-handles line,
.navigator-gradient-handles circle {
  vector-effect: non-scaling-stroke;
}

.navigator-gradient-handles__axis {
  fill: none;
  stroke: rgb(232 200 255 / 94%);
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-gradient-handles__radius {
  fill: none;
  stroke: rgb(232 200 255 / 72%);
  stroke-width: 1.25px;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 90%));
}

.navigator-gradient-handles__hit {
  fill: rgb(24 8 36 / 78%);
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 1.4px;
}

.navigator-gradient-handles__handle {
  fill: #c48cff;
  stroke: rgb(0 0 0 / 92%);
  stroke-width: 1.4px;
}

body.light-theme .navigator-gradient-handles__axis {
  stroke: rgb(108 42 148 / 96%);
}

body.light-theme .navigator-gradient-handles__radius {
  stroke: rgb(108 42 148 / 78%);
}

body.light-theme .navigator-gradient-handles__hit {
  fill: rgb(255 255 255 / 86%);
  stroke: rgb(48 16 72 / 92%);
}

body.light-theme .navigator-gradient-handles__handle {
  fill: #7a38b4;
  stroke: rgb(255 255 255 / 92%);
}

.navigator-inspect-panel {
  box-sizing: border-box;
  display: flex;
  min-height: 118px;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 11%);
  background: #111315;
}

.navigator-inspect-content-host {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  container-name: navigator-panel;
  container-type: inline-size;
}

.navigator-inspect-content-host .navigator-inspect-panel {
  width: 100%;
  min-height: 0;
  border-top: 0;
}

.navigator-inspect-panel__header {
  box-sizing: border-box;
  display: flex;
  height: 34px;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: color-mix(in srgb, var(--main-bg-color) 80%, #101214);
}

.navigator-inspect-panel__header > strong {
  color: #6f9fce;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.navigator-inspect-panel__sources,
.navigator-inspect-panel__zoom {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.navigator-inspect-panel__sources {
  overflow: hidden;
  flex: 1 1 auto;
  gap: 2px;
}

.navigator-inspect-panel__source-control {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.navigator-inspect-panel__sources button,
.navigator-inspect-panel__zoom button,
.navigator-inspect-panel__lock,
.navigator-inspect-panel__detach,
.navigator-inspect-panel__close {
  box-sizing: border-box;
  height: 24px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--button-text-inactive-color, #888);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
}

.navigator-inspect-panel__sources button:hover,
.navigator-inspect-panel__zoom button:hover,
.navigator-inspect-panel__lock:hover,
.navigator-inspect-panel__detach:hover,
.navigator-inspect-panel__close:hover {
  color: var(--button-text-color, #ddd);
  background: var(--hover-button-bg-color);
}

.navigator-inspect-panel__sources button.is-active {
  color: #7fadd9;
  border-color: rgb(68 142 228 / 48%);
  background: rgb(68 142 228 / 15%);
}

.navigator-inspect-panel__sources button[aria-checked="true"]::before {
  margin-right: 3px;
  content: "✓";
}

.navigator-inspect-panel__source-control > button[role="checkbox"] {
  border-radius: 5px 0 0 5px;
}

.navigator-inspect-panel__sources .navigator-inspect-panel__source-options-trigger {
  width: 17px;
  padding: 0 1px 2px 0;
  border-left-color: rgb(255 255 255 / 8%);
  border-radius: 0 5px 5px 0;
  color: rgb(185 220 255 / 72%);
  font-size: 10px;
}

.navigator-inspect-panel__sources .navigator-inspect-panel__source-options-trigger[aria-expanded="true"] {
  color: #d9edff;
  border-color: rgb(68 142 228 / 48%);
  background: rgb(68 142 228 / 20%);
}

.navigator-inspect-raw-menu {
  position: fixed;
  z-index: 2147483646;
  box-sizing: border-box;
  display: grid;
  width: min(226px, calc(100vw - 12px));
  gap: 8px;
  padding: 10px;
  color: var(--button-text-color, #ddd);
  border: 1px solid color-mix(in srgb, var(--button-border-color, #666) 82%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgb(70 137 206 / 10%), transparent 55%),
    color-mix(in srgb, var(--main-bg-color) 95%, #080a0c);
  box-shadow:
    0 12px 30px rgb(0 0 0 / 48%),
    inset 0 1px rgb(255 255 255 / 6%);
  font-size: 9px;
  backdrop-filter: blur(14px) saturate(1.15);
}

.navigator-inspect-raw-menu > strong {
  color: #b9dcff;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.navigator-inspect-raw-menu__label,
.navigator-inspect-raw-menu__select > span {
  color: var(--button-text-inactive-color, #888);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.navigator-inspect-raw-menu__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.navigator-inspect-raw-menu__choices button {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: 32px;
  padding: 0 7px;
  align-items: center;
  gap: 6px;
  color: var(--button-text-inactive-color, #888);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
  cursor: pointer;
  font: inherit;
}

.navigator-inspect-raw-menu__choices button:hover,
.navigator-inspect-raw-menu__choices button:focus-visible {
  color: var(--button-text-color, #ddd);
  border-color: rgb(122 183 245 / 35%);
  background: rgb(122 183 245 / 10%);
  outline: none;
}

.navigator-inspect-raw-menu__choices button.is-active {
  color: #d6ebff;
  border-color: rgb(80 157 235 / 52%);
  background: rgb(80 157 235 / 17%);
}

.navigator-inspect-raw-menu__swatch {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 3px;
}

.navigator-inspect-raw-menu__swatch--cfa {
  background:
    conic-gradient(from 90deg, #448d56 0 25%, #a14b48 0 50%, #448d56 0 75%, #3d598f 0);
}

.navigator-inspect-raw-menu__swatch--mono {
  background: linear-gradient(135deg, #202326, #c2c7ca);
}

.navigator-inspect-raw-menu__select,
.navigator-inspect-raw-menu__check {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navigator-inspect-raw-menu__select select {
  box-sizing: border-box;
  width: 76px;
  height: 25px;
  padding: 0 23px 0 7px;
  color: var(--button-text-color, #ddd);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--main-bg-color) 88%, #fff 12%);
  font: inherit;
}

.navigator-inspect-raw-menu__select select:focus-visible {
  border-color: rgb(91 164 240 / 70%);
  outline: 1px solid rgb(91 164 240 / 42%);
}

.navigator-inspect-raw-menu__check {
  justify-content: flex-start;
  color: var(--button-text-color, #ddd);
  cursor: pointer;
}

.navigator-inspect-raw-menu__check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #4f9cff;
}

.navigator-inspect-raw-menu .navigator-inspect-raw-menu__open-viewer {
  box-sizing: border-box;
  display: grid;
  min-height: 43px;
  padding: 6px 7px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #d8ebfd;
  border: 1px solid rgb(89 161 234 / 32%);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgb(80 157 235 / 17%), rgb(80 157 235 / 7%));
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.navigator-inspect-raw-menu .navigator-inspect-raw-menu__open-viewer:hover,
.navigator-inspect-raw-menu .navigator-inspect-raw-menu__open-viewer:focus-visible {
  color: #fff;
  border-color: rgb(101 177 253 / 58%);
  background:
    linear-gradient(135deg, rgb(80 157 235 / 27%), rgb(80 157 235 / 12%));
  outline: none;
}

.navigator-inspect-raw-menu__open-viewer > .icon-grid {
  display: grid;
  width: 22px;
  height: 22px;
  color: #93c9ff;
  border-radius: 5px;
  background: rgb(80 157 235 / 14%);
  font-size: 12px;
  place-items: center;
}

.navigator-inspect-raw-menu__open-viewer > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.navigator-inspect-raw-menu__open-viewer strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-inspect-raw-menu__open-viewer small {
  overflow: hidden;
  color: var(--button-text-inactive-color, #888);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-inspect-raw-menu__open-viewer > span:last-child {
  color: rgb(185 220 255 / 62%);
  font-size: 11px;
}

.navigator-inspect-panel__lock {
  flex: 0 0 auto;
  color: #ffd88a;
  border-color: rgb(241 176 66 / 46%);
  background: rgb(241 176 66 / 14%);
}

.navigator-inspect-panel__lock::before {
  margin-right: 4px;
  content: "●";
  font-size: 6px;
}

.navigator-inspect-panel--locked .navigator-inspect-panel__stage {
  box-shadow: inset 0 0 0 1px rgb(241 176 66 / 20%);
}

.navigator-inspect-panel__zoom {
  flex: 0 0 auto;
  gap: 1px;
}

.navigator-inspect-panel__zoom button {
  width: 22px;
  padding: 0;
  font-size: 12px;
}

.navigator-inspect-panel__zoom .navigator-inspect-panel__zoom-value {
  width: 40px;
  color: var(--button-text-color, #ddd);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.navigator-inspect-panel__zoom .navigator-inspect-panel__zoom-slider {
  --slider-track-size: 5px;

  width: 70px;
  min-width: 48px;
  height: 18px;
  margin: 0 3px;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.navigator-inspect-panel__zoom-slider::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      #4f9cff 0,
      #71d9de var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 18%) inset,
    0 1px 0 rgb(255 255 255 / 12%);
}

.navigator-inspect-panel__zoom-slider::-moz-range-track {
  height: 5px;
  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      #4f9cff 0,
      #71d9de var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 18%) inset,
    0 1px 0 rgb(255 255 255 / 12%);
}

.navigator-inspect-panel__zoom-slider::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-track-offset);
  appearance: none;
  border: 2px solid #4f9cff;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 38%),
    0 0 0 3px rgb(79 156 255 / 14%);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.navigator-inspect-panel__zoom-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 2px solid #4f9cff;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 38%),
    0 0 0 3px rgb(79 156 255 / 14%);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.navigator-inspect-panel__zoom-slider:hover::-webkit-slider-thumb,
.navigator-inspect-panel__zoom-slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 1px 4px rgb(0 0 0 / 45%),
    0 0 0 4px rgb(79 156 255 / 24%);
  transform: scale(1.08);
}

.navigator-inspect-panel__zoom-slider:hover::-moz-range-thumb,
.navigator-inspect-panel__zoom-slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 1px 4px rgb(0 0 0 / 45%),
    0 0 0 4px rgb(79 156 255 / 24%);
  transform: scale(1.08);
}

.navigator-inspect-panel__zoom-slider:focus-visible {
  outline: none;
}

.navigator-inspect-panel__close {
  width: 24px;
  padding: 0;
  flex: 0 0 24px;
  font-size: 15px;
}

.navigator-inspect-panel__detach {
  width: 24px;
  padding: 0;
  flex: 0 0 24px;
  font-size: 13px;
}

.navigator-inspect-panel--managed .navigator-inspect-panel__header > strong {
  display: none;
}

.navigator-inspect-panel__stages {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  gap: 1px;
  overflow: hidden;
  background: rgb(255 255 255 / 10%);
}

.navigator-inspect-panel__stage {
  position: relative;
  width: 0;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgb(255 255 255 / 2%) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 2%) 75%) 0 0 / 12px 12px,
    #0d0f11;
}

.navigator-inspect-panel__stage-label {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  padding: 3px 6px;
  color: rgb(225 238 251 / 82%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  background: rgb(9 11 13 / 72%);
  backdrop-filter: blur(5px);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .025em;
  pointer-events: none;
}

.navigator-inspect-panel__stage canvas {
  display: block;
}

.navigator-inspect-panel__message {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 5px 9px;
  transform: translate(-50%, -50%);
  color: var(--button-text-inactive-color, #888);
  border-radius: 6px;
  background: rgb(12 14 16 / 82%);
  font-size: 9px;
  text-align: center;
}

.navigator-inspect-panel__message--error {
  color: #f0a2a2;
}

.navigator-inspect-panel__readout {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: flex;
  min-width: 0;
  height: 22px;
  align-items: center;
  gap: 10px;
  padding: 0 7px;
  color: rgb(255 255 255 / 76%);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 5px;
  background: rgb(9 11 13 / 76%);
  backdrop-filter: blur(5px);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.navigator-inspect-panel__readout span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-inspect-panel__readout span:first-child {
  flex: 1 1 auto;
}

.navigator-inspect-panel__readout span:not(:first-child) {
  flex: 0 0 auto;
  color: var(--button-text-inactive-color, #888);
}

@container navigator-panel (max-width: 480px) {
  .navigator-inspect-panel__header {
    gap: 3px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .navigator-inspect-panel__header > strong {
    display: none;
  }

  .navigator-inspect-panel__sources button {
    padding-right: 4px;
    padding-left: 4px;
  }

  .navigator-inspect-panel:not(.navigator-inspect-panel--managed) .navigator-inspect-panel__zoom input {
    display: none;
  }
}

@container navigator-panel (max-width: 330px) {
  .navigator-inspect-panel__zoom > button:first-child,
  .navigator-inspect-panel__zoom > button:last-of-type {
    display: none;
  }

  .navigator-inspect-panel__sources button {
    font-size: 7px;
  }
}

.navigator-info-bar {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  gap: 0;
  padding: 0;
  color: inherit;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 9%);
  background: color-mix(in srgb, var(--main-bg-color) 82%, #111);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.navigator-info-bar:hover {
  background: color-mix(in srgb, var(--main-bg-color) 75%, var(--button-bg-color));
}

.navigator-info-bar:focus-visible {
  z-index: 2;
  outline: 2px solid #448ee4;
  outline-offset: -2px;
}

.navigator-info-bar__hint {
  display: grid;
  height: 100%;
  padding: 0 7px;
  flex: 0 0 auto;
  place-items: center;
  color: #79b5f2;
  border-right: 1px solid rgb(255 255 255 / 7%);
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .08em;
}

.navigator-exif {
  position: relative;
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  opacity: 1;
  transition: opacity 120ms ease;
}

.navigator-exif--reading {
  opacity: .5;
}

.navigator-exif--reading::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #56a8f5;
  box-shadow: 0 0 5px rgb(86 168 245 / 72%);
  content: '';
}

.navigator-exif__item {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: 25px;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border-right: 1px solid rgb(255 255 255 / 7%);
}

.navigator-exif__item small,
.navigator-exif__item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-exif__item small {
  color: var(--button-text-inactive-color, #888);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.navigator-exif__item strong {
  color: var(--button-text-color, #ddd);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  line-height: 1.15;
}

.navigator-rgb-readout {
  display: flex;
  min-width: 122px;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  color: var(--button-text-inactive-color, #888);
  background: rgb(0 0 0 / 13%);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1;
  text-shadow: 0 1px 1px rgb(0 0 0 / 24%);
  white-space: nowrap;
}

.navigator-rgb-readout__r {
  color: #cf3944;
}

.navigator-rgb-readout__g {
  color: #268c3e;
}

.navigator-rgb-readout__b {
  color: #3869cf;
}

.dark-theme .navigator-rgb-readout__r {
  color: #ff8b8b;
}

.dark-theme .navigator-rgb-readout__g {
  color: #8be794;
}

.dark-theme .navigator-rgb-readout__b {
  color: #a9c8ff;
}

.navigator-info-bar__open {
  display: grid;
  width: 15px;
  height: 25px;
  flex: 0 0 15px;
  place-items: center;
  color: var(--button-text-inactive-color);
  background: rgb(255 255 255 / 2%);
  font-size: 15px;
}

.navigator-info-bar:hover .navigator-info-bar__open {
  color: #8fc4fa;
  background: rgb(68 142 228 / 10%);
}

@container navigator-panel (max-width: 380px) {
  .navigator-info-bar__hint {
    display: none;
  }

  .navigator-exif__item {
    padding-right: 3px;
    padding-left: 3px;
  }

  .navigator-rgb-readout {
    min-width: 104px;
    gap: 5px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
  }
}

.exif-inspector-backdrop {
  width: min(1040px, calc(100vw - 28px));
  max-width: none;
  height: min(860px, calc(100vh - 28px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: var(--button-text-color);
  border: 0;
  border-radius: 14px;
  outline: 0;
  background: transparent;
  box-shadow: 0 28px 90px rgb(0 0 0 / 58%);
}

.exif-inspector-backdrop::backdrop {
  background: rgb(5 8 12 / 66%);
  backdrop-filter: blur(5px);
}

.exif-inspector-dialog {
  --exif-accent-text: color-mix(in srgb, var(--button-text-color) 66%, #287dce 34%);
  --exif-accent-strong: color-mix(in srgb, var(--button-text-color) 52%, #448ee4 48%);
  --exif-muted-text: color-mix(in srgb, var(--button-text-color) 70%, var(--main-bg-color) 30%);
  --button-text-inactive-color: var(--exif-muted-text);

  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 80%, transparent);
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% -10%, rgb(68 142 228 / 14%), transparent 34%),
    color-mix(in srgb, var(--main-bg-color) 96%, #10151c);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}

.dark-theme .exif-inspector-dialog {
  --exif-accent-text: #b9ddff;
  --exif-accent-strong: #d9ecff;
  --exif-muted-text: #c7cbd0;

  background:
    radial-gradient(circle at 18% -10%, rgb(68 142 228 / 18%), transparent 34%),
    color-mix(in srgb, var(--main-bg-color) 38%, #10151c);
}

.exif-inspector-header {
  display: grid;
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: color-mix(in srgb, var(--main-bg-color-deep) 72%, transparent);
}

.exif-inspector-header__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--exif-accent-text);
  border: 1px solid rgb(90 169 246 / 38%);
  border-radius: 9px;
  background: linear-gradient(145deg, rgb(68 142 228 / 22%), rgb(68 142 228 / 7%));
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

.exif-inspector-header__icon span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.exif-inspector-header__copy {
  min-width: 0;
}

.exif-inspector-header h2,
.exif-inspector-header p {
  margin: 0;
}

.exif-inspector-header h2 {
  font-size: 15px;
  font-weight: 690;
  letter-spacing: -.01em;
}

.exif-inspector-header p {
  margin-top: 3px;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exif-inspector-header__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.exif-inspector-header__close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.exif-inspector-header__close:hover,
.exif-inspector-header__close:focus-visible {
  color: var(--button-text-color);
  border-color: var(--button-border-color);
  outline: 0;
  background: var(--hover-button-bg-color);
}

.exif-inspector-open-raw {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 9px;
  color: var(--button-text-color);
  border: 1px solid rgb(90 169 246 / 27%);
  border-radius: 8px;
  background: linear-gradient(145deg, rgb(68 142 228 / 15%), rgb(68 142 228 / 6%));
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.exif-inspector-open-raw:hover,
.exif-inspector-open-raw:focus-visible {
  border-color: rgb(90 169 246 / 55%);
  outline: 0;
  background: linear-gradient(145deg, rgb(68 142 228 / 25%), rgb(68 142 228 / 10%));
}

.exif-inspector-open-raw > .icon-grid {
  color: var(--exif-accent-text);
  font-size: 15px;
}

.exif-inspector-open-raw > span:last-child {
  display: grid;
  gap: 1px;
}

.exif-inspector-open-raw small {
  color: var(--exif-accent-text);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
}

.exif-inspector-open-raw strong {
  font-size: 10px;
  font-weight: 670;
  white-space: nowrap;
}

.exif-inspector-scroll {
  min-height: 0;
  overflow: hidden auto;
  scrollbar-gutter: stable;
}

.exif-inspector-overview {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.exif-inspector-thumbnail {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-rows: minmax(150px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: rgb(0 0 0 / 18%);
  box-shadow: 0 7px 20px rgb(0 0 0 / 12%);
}

.exif-inspector-thumbnail img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
  background:
    linear-gradient(45deg, rgb(255 255 255 / 3%) 25%, transparent 25% 75%, rgb(255 255 255 / 3%) 75%),
    linear-gradient(45deg, rgb(255 255 255 / 3%) 25%, transparent 25% 75%, rgb(255 255 255 / 3%) 75%),
    #101317;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}

.exif-inspector-thumbnail__missing {
  display: grid;
  min-height: 150px;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  color: var(--button-text-inactive-color);
  text-align: center;
}

.exif-inspector-thumbnail__missing > span {
  color: rgb(134 186 238 / 55%);
  font-size: 34px;
}

.exif-inspector-thumbnail__missing strong {
  color: var(--button-text-color);
  font-size: 11px;
}

.exif-inspector-thumbnail__missing small {
  max-width: 190px;
  font-size: 8px;
  line-height: 1.4;
}

.exif-inspector-thumbnail figcaption {
  display: grid;
  gap: 3px;
  padding: 9px 10px 10px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 2%);
}

.exif-inspector-thumbnail figcaption span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.exif-inspector-thumbnail figcaption strong {
  font-size: 12px;
}

.exif-inspector-thumbnail__format {
  display: grid;
  gap: 4px;
  margin: 4px 0 2px;
}

.exif-inspector-thumbnail__format > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
}

.exif-inspector-thumbnail__format dt,
.exif-inspector-thumbnail__format dd {
  min-width: 0;
  margin: 0;
  font-size: 9px;
  line-height: 1.35;
}

.exif-inspector-thumbnail__format dt {
  color: var(--button-text-inactive-color);
}

.exif-inspector-thumbnail__format dd {
  overflow-wrap: anywhere;
}

.exif-inspector-thumbnail figcaption small {
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.35;
}

.exif-inspector-facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
}

.exif-inspector-facts > div {
  display: grid;
  min-width: 0;
  min-height: 52px;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 4%), transparent),
    rgb(0 0 0 / 7%);
}

.exif-inspector-facts small,
.exif-inspector-technical-summary small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.exif-inspector-facts strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exif-inspector-learning {
  padding: 15px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: rgb(68 142 228 / 3%);
}

.exif-inspector-learning > header,
.exif-inspector-raw__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.exif-inspector-learning h3,
.exif-inspector-raw h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.exif-inspector-learning header small,
.exif-inspector-raw__header small {
  color: var(--exif-accent-text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
}

.exif-inspector-learning header p,
.exif-inspector-raw__header p {
  max-width: 450px;
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.4;
}

.exif-inspector-lessons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.exif-inspector-lesson {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgb(93 164 235 / 16%);
  border-radius: 8px;
  background: rgb(68 142 228 / 5%);
}

.exif-inspector-lesson > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.exif-inspector-lesson small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.exif-inspector-lesson strong {
  overflow: hidden;
  color: var(--exif-accent-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exif-inspector-lesson p {
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--button-text-color) 78%, transparent);
  font-size: 10px;
  line-height: 1.45;
}

.exif-inspector-technical-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.exif-inspector-technical-summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 14px;
  border-right: 1px solid rgb(255 255 255 / 7%);
}

.exif-inspector-technical-summary > div:last-child {
  border-right: 0;
}

.exif-inspector-technical-summary strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exif-inspector-warning {
  margin: 12px 14px 0;
  padding: 9px 11px;
  color: #efd999;
  border: 1px solid rgb(222 179 68 / 22%);
  border-radius: 7px;
  background: rgb(222 179 68 / 7%);
  font-size: 10px;
  line-height: 1.4;
}

.exif-inspector-raw {
  padding: 16px 14px;
}

.exif-inspector-raw__body {
  display: grid;
  min-width: 0;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}

.exif-inspector-search {
  display: flex;
  width: min(320px, 36vw);
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--button-border-color);
  border-radius: 7px;
  background: rgb(0 0 0 / 12%);
}

.exif-inspector-search:focus-within {
  border-color: #448ee4;
  box-shadow: 0 0 0 2px rgb(68 142 228 / 12%);
}

.exif-inspector-search input {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--button-text-color);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.exif-inspector-search input::placeholder {
  color: var(--button-text-inactive-color);
}

.exif-inspector-filters {
  display: grid;
  gap: 5px;
  margin: 11px 0;
}

.exif-inspector-filters button {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--button-border-color);
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.exif-inspector-filters button:hover {
  color: var(--button-text-color);
  background: var(--hover-button-bg-color);
}

.exif-inspector-filters .exif-inspector-filter--active {
  color: var(--exif-accent-text);
  border-color: rgb(68 142 228 / 58%);
  background: color-mix(in srgb, var(--main-bg-color) 82%, #448ee4 18%);
  font-weight: 700;
}

.exif-inspector-sidebar {
  position: sticky;
  top: 10px;
  display: grid;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgb(68 142 228 / 7%), transparent),
    color-mix(in srgb, var(--main-bg-color) 96%, #111820);
  box-shadow: 0 7px 20px rgb(0 0 0 / 10%);
}

.exif-inspector-sidebar > div:first-child {
  display: grid;
  gap: 3px;
}

.exif-inspector-sidebar > div:first-child small {
  color: var(--exif-accent-text);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
}

.exif-inspector-sidebar > div:first-child strong {
  font-size: 12px;
}

.exif-inspector-unknown-toggle {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  cursor: pointer;
}

.exif-inspector-unknown-toggle > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.exif-inspector-unknown-toggle strong {
  font-size: 10px;
  line-height: 1.25;
}

.exif-inspector-unknown-toggle small {
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.35;
}

.exif-inspector-unknown-toggle input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: #448ee4;
}

.exif-inspector-sidebar > p {
  margin: 10px 0 0;
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.45;
}

.exif-inspector-inventory {
  min-width: 0;
}

.exif-inspector-group {
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
  background: rgb(0 0 0 / 6%);
}

.exif-inspector-group > header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 3%);
}

.exif-inspector-group + .exif-inspector-group {
  margin-top: 10px;
}

.exif-inspector-group--pinned {
  border-color: rgb(68 142 228 / 26%);
  background: rgb(68 142 228 / 4%);
}

.exif-inspector-group--pinned > header {
  background: rgb(68 142 228 / 9%);
}

.exif-inspector-group--pinned h4 {
  color: var(--exif-accent-strong);
}

.exif-inspector-group h4 {
  margin: 0;
  font-size: 13px;
}

.exif-inspector-group > header span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.exif-inspector-tag {
  display: grid;
  grid-template-areas:
    'identity actions recorded'
    'technical technical technical';
  grid-template-columns: minmax(0, 1.25fr) auto minmax(250px, .75fr);
  gap: 12px 24px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
  transition: background-color 100ms ease, opacity 100ms ease;
}

.exif-inspector-tag:last-child {
  border-bottom: 0;
}

.exif-inspector-tag--pinned {
  background: rgb(68 142 228 / 2%);
}

.exif-inspector-tag--dragging {
  background: rgb(68 142 228 / 10%);
}

.exif-inspector-tag--last-edited {
  box-shadow: inset 2px 0 rgb(68 142 228 / 48%);
}

.exif-inspector-tag--reordered {
  background: rgb(68 142 228 / 13%);
  box-shadow: inset 3px 0 var(--exif-accent-text);
}

html.exif-pin-transition::view-transition-old(root),
html.exif-pin-transition::view-transition-new(root) {
  animation: none;
}

html.exif-pin-transition::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.exif-pin-transition::view-transition-group(*) {
    animation-duration: 1ms;
  }
}

.exif-inspector-tag__identity,
.exif-inspector-tag__heading,
.exif-inspector-tag__recorded {
  min-width: 0;
}

.exif-inspector-tag__identity {
  grid-area: identity;
}

.exif-inspector-tag__heading > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.exif-inspector-tag__heading strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exif-inspector-tag__heading code {
  flex: 0 0 auto;
  color: var(--exif-accent-text);
  font-size: 10px;
}

.exif-inspector-tag__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.exif-tag-badge {
  padding: 2px 5px;
  color: var(--button-text-inactive-color);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 99px;
  background: rgb(255 255 255 / 3%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.exif-tag-badge--private {
  color: #d0b4f4;
  border-color: rgb(179 123 237 / 24%);
  background: rgb(179 123 237 / 7%);
}

.exif-tag-badge--unknown {
  color: #efca8e;
  border-color: rgb(226 171 82 / 24%);
  background: rgb(226 171 82 / 7%);
}

.exif-inspector-tag__description {
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--button-text-color) 76%, transparent);
  font-size: 11px;
  line-height: 1.5;
}

.exif-inspector-tag__actions {
  display: flex;
  grid-area: actions;
  align-items: start;
  gap: 4px;
}

.exif-inspector-tag__actions button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.exif-inspector-tag__actions button:hover,
.exif-inspector-tag__actions button:focus-visible {
  color: var(--button-text-color);
  border-color: var(--button-border-color);
  outline: 0;
  background: var(--hover-button-bg-color);
}

.exif-inspector-tag__grip {
  cursor: grab !important;
}

.exif-inspector-tag__grip:active {
  cursor: grabbing !important;
}

.exif-inspector-tag__pin::before {
  margin: 0;
}

.exif-inspector-tag__pin--active {
  color: var(--exif-accent-strong) !important;
  border-color: rgb(68 142 228 / 38%) !important;
  background: rgb(68 142 228 / 13%) !important;
}

.exif-inspector-tag__recorded {
  display: grid;
  grid-area: recorded;
  align-content: start;
  justify-items: end;
  gap: 6px;
  padding-left: 18px;
  border-left: 1px solid rgb(255 255 255 / 7%);
  text-align: right;
}

.exif-inspector-tag__recorded > small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.exif-inspector-tag__value {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  width: 100%;
  max-height: 64px;
  overflow: auto;
  padding: 5px 7px;
  color: var(--exif-accent-text);
  border: 1px solid rgb(68 142 228 / 16%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--main-bg-color) 92%, #448ee4 8%);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: pre-wrap;
}

.exif-inspector-tag__technical {
  display: flex;
  grid-area: technical;
  flex-wrap: wrap;
  gap: 5px 13px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.exif-inspector-tag__technical strong {
  color: color-mix(in srgb, var(--button-text-color) 78%, transparent);
  font-weight: 600;
}

.exif-inspector-private-note {
  margin: 0 14px 16px;
  padding: 11px 13px;
  color: color-mix(in srgb, var(--button-text-color) 80%, transparent);
  border: 1px solid rgb(179 123 237 / 17%);
  border-radius: 8px;
  background: rgb(179 123 237 / 5%);
}

.exif-inspector-private-note strong {
  color: #d5baf4;
  font-size: 11px;
}

.exif-inspector-private-note p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.exif-inspector-empty,
.exif-inspector-no-results {
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--button-text-inactive-color);
  text-align: center;
}

.exif-inspector-empty {
  min-height: 0;
  padding: 50px;
}

.exif-inspector-empty__icon {
  margin-bottom: 9px;
  color: var(--exif-accent-text);
  font-size: 30px;
}

.exif-inspector-empty strong,
.exif-inspector-no-results strong {
  color: var(--button-text-color);
  font-size: 12px;
}

.exif-inspector-empty p {
  max-width: 480px;
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.exif-inspector-no-results {
  min-height: 110px;
  gap: 5px;
  border: 1px dashed rgb(255 255 255 / 10%);
  border-radius: 8px;
}

.exif-inspector-no-results span {
  font-size: 10px;
}

@media (max-width: 780px) {
  .exif-inspector-backdrop {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .exif-inspector-overview {
    grid-template-columns: 1fr;
  }

  .exif-inspector-thumbnail {
    grid-template-columns: minmax(180px, .75fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .exif-inspector-thumbnail img {
    height: 150px;
  }

  .exif-inspector-open-raw > span:last-child {
    display: none;
  }

  .exif-inspector-thumbnail figcaption {
    align-content: center;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 8%);
  }

  .exif-inspector-lessons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exif-inspector-raw__body {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .exif-inspector-tag {
    grid-template-areas:
      'identity actions'
      'recorded recorded'
      'technical technical';
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .exif-inspector-tag__recorded {
    justify-items: start;
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 7%);
    border-left: 0;
    text-align: left;
  }

  .exif-inspector-tag__value {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .exif-inspector-overview,
  .exif-inspector-learning,
  .exif-inspector-raw {
    padding-right: 9px;
    padding-left: 9px;
  }

  .exif-inspector-facts,
  .exif-inspector-technical-summary,
  .exif-inspector-lessons {
    grid-template-columns: 1fr;
  }

  .exif-inspector-learning > header,
  .exif-inspector-raw__header {
    align-items: stretch;
    flex-direction: column;
  }

  .exif-inspector-search {
    width: auto;
  }

  .exif-inspector-raw__body {
    grid-template-columns: 1fr;
  }

  .exif-inspector-sidebar {
    position: static;
  }

  .exif-inspector-tag {
    grid-template-areas:
      'identity actions'
      'recorded recorded'
      'technical technical';
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .exif-inspector-tag__recorded {
    justify-items: start;
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 7%);
    border-left: 0;
    text-align: left;
  }

  .exif-inspector-tag__value {
    text-align: left;
  }

  .exif-inspector-tag__technical {
    grid-column: auto;
  }
}

.raw-pixel-viewer-backdrop {
  width: min(1320px, calc(100vw - 22px));
  max-width: none;
  height: min(920px, calc(100vh - 22px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: #e7e9ec;
  border: 0;
  border-radius: 13px;
  outline: 0;
  background: transparent;
  box-shadow: 0 30px 100px rgb(0 0 0 / 68%);
}

.raw-pixel-viewer-backdrop::backdrop {
  background: rgb(3 5 8 / 76%);
  backdrop-filter: blur(5px);
}

.raw-pixel-viewer-dialog {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #e7e9ec;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: inherit;
  background: #1c2026;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}

.raw-pixel-viewer-header {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 38px minmax(190px, auto) minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background:
    linear-gradient(90deg, rgb(68 142 228 / 8%), transparent 38%),
    #292d33;
}

.raw-pixel-viewer-header__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #a9d2fa;
  border: 1px solid rgb(90 169 246 / 38%);
  border-radius: 9px;
  background: rgb(68 142 228 / 12%);
}

.raw-pixel-viewer-header__icon > span {
  font-size: 17px;
}

.raw-pixel-viewer-header h2,
.raw-pixel-viewer-header p {
  margin: 0;
}

.raw-pixel-viewer-header h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.raw-pixel-viewer-header p {
  margin-top: 3px;
  overflow: hidden;
  color: #b6bbc2;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-pixel-viewer-header__summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
}

.raw-pixel-viewer-header__summary span {
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  color: #c8ccd2;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 5px;
  background: rgb(255 255 255 / 3%);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-pixel-viewer-header > button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #b6bbc2;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.raw-pixel-viewer-header > button:hover,
.raw-pixel-viewer-header > button:focus-visible {
  color: #fff;
  border-color: rgb(255 255 255 / 15%);
  outline: 0;
  background: rgb(255 255 255 / 8%);
}

.raw-pixel-viewer-toolbar {
  display: flex;
  min-width: 0;
  min-height: 43px;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  overflow: auto hidden;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: #23272d;
  scrollbar-width: thin;
}

.raw-pixel-viewer-tool-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 7px;
  background: rgb(0 0 0 / 15%);
}

.raw-pixel-viewer-tool-group button {
  display: flex;
  min-width: 29px;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: #c1c5ca;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.raw-pixel-viewer-tool-group button:hover,
.raw-pixel-viewer-tool-group button:focus-visible {
  color: #fff;
  outline: 0;
  background: rgb(255 255 255 / 8%);
}

.raw-pixel-viewer-tool-group button.raw-pixel-tool--active {
  color: #d7ebff;
  background: rgb(68 142 228 / 24%);
  box-shadow: inset 0 0 0 1px rgb(104 178 250 / 35%);
}

.raw-pixel-viewer-tool-group button > [class^='icon-'] {
  font-size: 13px;
}

.raw-pixel-viewer-zoom {
  min-width: 52px;
  padding: 0 6px;
  color: #d7ebff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.raw-pixel-viewer-toolbar__spacer {
  min-width: 8px;
  flex: 1 1 auto;
}

.raw-pixel-viewer-select {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: #aeb3ba;
  font-size: 9px;
}

.raw-pixel-viewer-select select {
  height: 30px;
  padding: 0 24px 0 7px;
  color: #e7e9ec;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  outline: 0;
  background: #181b20;
  font: inherit;
  font-size: 10px;
}

.raw-pixel-viewer-select select:focus-visible {
  border-color: #68b2fa;
  box-shadow: 0 0 0 2px rgb(68 142 228 / 18%);
}

.raw-pixel-viewer-check {
  display: flex;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #c1c5ca;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 6px;
  background: rgb(0 0 0 / 10%);
  font-size: 9px;
  cursor: pointer;
}

.raw-pixel-viewer-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #448ee4;
}

.raw-pixel-viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  outline: 0;
  background:
    radial-gradient(circle at center, #1d2229, #0e1013 76%);
  touch-action: none;
  user-select: none;
}

.raw-pixel-viewer-stage--hand {
  cursor: grab;
}

.raw-pixel-viewer-stage--hand:active {
  cursor: grabbing;
}

.raw-pixel-viewer-stage--zoom {
  cursor: zoom-in;
}

.raw-pixel-viewer-canvas,
.raw-pixel-viewer-overlay {
  position: absolute;
  inset: 0;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.raw-pixel-viewer-overlay {
  z-index: 2;
}

.raw-pixel-viewer-state {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 40px;
  color: #c6cbd1;
  background:
    radial-gradient(circle at center, rgb(35 43 53 / 88%), rgb(12 15 18 / 94%));
  text-align: center;
}

.raw-pixel-viewer-state strong {
  margin-top: 12px;
  color: #f0f3f6;
  font-size: 13px;
}

.raw-pixel-viewer-state p {
  max-width: 480px;
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.raw-pixel-viewer-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgb(255 255 255 / 14%);
  border-top-color: #7dbaf4;
  border-radius: 50%;
  animation: raw-pixel-viewer-spin .8s linear infinite;
}

@keyframes raw-pixel-viewer-spin {
  to {
    transform: rotate(360deg);
  }
}

.raw-pixel-viewer-state--error > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffd2d2;
  border: 1px solid rgb(255 113 113 / 40%);
  border-radius: 50%;
  background: rgb(255 75 75 / 10%);
  font-size: 16px;
  font-weight: 800;
}

.raw-pixel-viewer-legend {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: grid;
  max-width: min(420px, calc(100% - 20px));
  gap: 3px;
  padding: 7px 9px;
  color: #c7ccd2;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background: rgb(14 17 21 / 78%);
  box-shadow: 0 5px 16px rgb(0 0 0 / 22%);
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.raw-pixel-viewer-legend strong {
  color: #edf2f7;
  font-size: 10px;
}

.raw-pixel-viewer-legend span {
  overflow: hidden;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-pixel-viewer-footer {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 10px;
  border-top: 1px solid rgb(255 255 255 / 9%);
  background: #25292f;
}

.raw-pixel-viewer-readout,
.raw-pixel-viewer-help {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px 12px;
  color: #b8bdc4;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.raw-pixel-viewer-readout {
  flex: 1 1 auto;
  overflow: hidden;
}

.raw-pixel-viewer-readout > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.raw-pixel-viewer-readout strong {
  color: #f0f3f6;
  font-weight: 700;
}

.raw-pixel-value {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  color: #aeb4bc;
  border: 1px solid rgb(104 178 250 / 26%);
  border-radius: 6px;
  background: rgb(68 142 228 / 9%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  white-space: nowrap;
}

.raw-pixel-value small {
  color: #9dccfa;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .07em;
}

.raw-pixel-value strong {
  color: #fff;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 65%);
}

.raw-pixel-value > span {
  font-size: 9px;
}

.raw-pixel-channel {
  min-width: 26px;
  padding: 3px 5px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 5px;
  font-weight: 800;
  text-align: center;
}

.raw-pixel-channel--r {
  color: #ff9d9d;
  background: rgb(255 76 76 / 10%);
}

.raw-pixel-channel--g {
  color: #9de7a3;
  background: rgb(73 207 85 / 10%);
}

.raw-pixel-channel--b {
  color: #a9c7ff;
  background: rgb(79 127 255 / 11%);
}

.raw-pixel-viewer-help {
  flex: 0 0 auto;
  color: #9298a0;
  font-size: 8px;
}

.raw-pixel-viewer-help > span {
  white-space: nowrap;
}

.raw-pixel-viewer-help kbd {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  place-items: center;
  color: #d9dde2;
  border: 1px solid rgb(255 255 255 / 14%);
  border-bottom-color: rgb(255 255 255 / 22%);
  border-radius: 4px;
  background: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 8px;
}

.raw-pixel-viewer-launch {
  display: grid;
  margin-top: 12px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgb(68 142 228 / 24%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(68 142 228 / 9%), transparent),
    rgb(0 0 0 / 5%);
}

.raw-pixel-viewer-launch__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: color-mix(in srgb, var(--button-text-color) 64%, #448ee4 36%);
  border: 1px solid rgb(68 142 228 / 28%);
  border-radius: 7px;
  background: rgb(68 142 228 / 10%);
}

.raw-pixel-viewer-launch > div {
  min-width: 0;
}

.raw-pixel-viewer-launch strong {
  display: block;
  font-size: 10px;
}

.raw-pixel-viewer-launch p {
  margin: 3px 0 0;
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.4;
}

.raw-pixel-viewer-launch button {
  height: 28px;
  padding: 0 9px;
  color: var(--button-text-color);
  border: 1px solid rgb(68 142 228 / 38%);
  border-radius: 6px;
  background: rgb(68 142 228 / 12%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.raw-pixel-viewer-launch button:hover,
.raw-pixel-viewer-launch button:focus-visible {
  border-color: rgb(68 142 228 / 62%);
  outline: 0;
  background: rgb(68 142 228 / 20%);
}

@media (max-width: 900px) {
  .raw-pixel-viewer-header {
    grid-template-columns: 38px minmax(0, 1fr) 32px;
  }

  .raw-pixel-viewer-header__summary {
    display: none;
  }

  .raw-pixel-viewer-toolbar__spacer {
    min-width: 0;
  }

  .raw-pixel-viewer-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .raw-pixel-viewer-help {
    width: 100%;
    overflow: auto hidden;
  }
}

@media (max-width: 600px) {
  .raw-pixel-viewer-backdrop {
    width: calc(100vw - 10px);
    height: calc(100vh - 10px);
  }

  .raw-pixel-viewer-tool-group button > span:last-child,
  .raw-pixel-viewer-select > span,
  .raw-pixel-viewer-check > span {
    display: none;
  }

  .raw-pixel-viewer-launch {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .raw-pixel-viewer-launch button {
    grid-column: 1 / -1;
  }
}

.navigator-load-strip {
  position: absolute;
  z-index: 1003;
  right: 8px;
  bottom: 8px;
  left: 8px;
  box-sizing: border-box;
  container-name: navigator-loading;
  container-type: inline-size;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 7px 9px 18px;
  overflow: hidden;
  color: var(--button-text-color, #ddd);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--main-bg-color-props, #292929) 90%, transparent);
  box-shadow: 0 5px 18px rgb(0 0 0 / 32%);
  font-size: 10px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.navigator-load-strip--network {
  padding-bottom: 24px;
}

.navigator-load-strip__status,
.navigator-load-strip__details {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
}

.navigator-load-strip__status {
  gap: 7px;
}

.navigator-load-strip__status strong {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
}

.navigator-load-strip__pulse {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #56a8f5;
  box-shadow: 0 0 0 0 rgb(86 168 245 / 45%);
  animation: navigator-load-pulse 1.25s ease-out infinite;
}

.navigator-load-strip__file {
  min-width: 0;
  overflow: hidden;
  color: var(--button-text-inactive-color, #999);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigator-load-strip__details {
  max-width: 100%;
  justify-content: flex-start;
  gap: 5px;
  color: var(--button-text-inactive-color, #999);
  font-size: 8px;
  white-space: nowrap;
}

.navigator-load-strip__details:empty {
  display: none;
}

.navigator-load-strip__detail {
  flex: 0 0 auto;
}

.navigator-load-strip__details span + span::before {
  margin-right: 5px;
  color: rgb(255 255 255 / 24%);
  content: '·';
}

.navigator-load-strip__progress {
  position: absolute;
  right: 8px;
  bottom: 4px;
  left: 8px;
  display: grid;
  gap: 2px;
}

.navigator-load-strip__track {
  position: relative;
  display: grid;
  height: 4px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

.navigator-load-strip__track::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38px;
  border-radius: 2px;
  background: rgb(255 255 255 / 8%);
  content: '';
}

.navigator-load-strip__track small {
  position: relative;
  z-index: 1;
  color: rgb(255 255 255 / 42%);
  font-size: 6px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 4px;
  text-transform: uppercase;
}

.navigator-load-strip__track i {
  position: relative;
  z-index: 1;
  display: block;
  grid-column: 2;
  height: 100%;
  border-radius: 2px;
  transition: width 320ms ease-out;
}

.navigator-load-strip__track--total i {
  width: var(--navigator-load-total-progress);
  background: linear-gradient(90deg, #287fd2, #68b8fa);
  box-shadow: 0 0 7px rgb(86 168 245 / 45%);
}

.navigator-load-strip__track--download i {
  width: var(--navigator-load-download-progress);
  background: linear-gradient(90deg, #2e9b75, #6ed9ab);
  box-shadow: 0 0 7px rgb(75 197 148 / 42%);
}

.navigator-load-strip__track.is-indeterminate i {
  width: 34%;
  animation: navigator-load-running 1.15s ease-in-out infinite;
}

@keyframes navigator-load-running {
  from {
    transform: translateX(-105%);
  }

  to {
    transform: translateX(300%);
  }
}

@keyframes navigator-load-pulse {
  70% {
    box-shadow: 0 0 0 5px rgb(86 168 245 / 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(86 168 245 / 0%);
  }
}

@container navigator-loading (max-width: 560px) {
  .navigator-load-strip__detail--tertiary {
    display: none;
  }
}

@container navigator-loading (max-width: 420px) {
  .navigator-load-strip__detail--secondary {
    display: none;
  }
}

@container navigator-loading (max-width: 280px) {
  .navigator-load-strip__details {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigator-load-strip__pulse,
  .navigator-load-strip__track i {
    animation: none;
  }

  .navigator-load-strip__track.is-indeterminate i {
    width: 100%;
    opacity: .65;
  }
}

#floating_panels .navigator-floating-window > .preset-group-resize-handle {
  z-index: 1100;
}

.center-panel--docked {
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#main_tabs_react .center-panel--docked-main {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}

#floating_panels .center-panel--docked-navigator {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

.center-panel-separator {
  position: fixed;
  z-index: 4300;
  box-sizing: border-box;
  border-right: 1px solid rgb(255 255 255 / 8%);
  border-left: 1px solid rgb(255 255 255 / 8%);
  background: rgb(0 0 0 / 24%);
  cursor: col-resize;
  pointer-events: auto;
  touch-action: none;
  transition: background-color 90ms ease, box-shadow 90ms ease;
}

.center-panel-separator:hover,
.center-panel-separator:active {
  background: rgb(98 168 255 / 68%);
  box-shadow: 0 0 8px rgb(98 168 255 / 42%);
}

#sample_block2 {
  box-sizing: border-box;
  min-height: 100%;
  padding: 14px;
  color: var(--button-text-color);
  background:
    radial-gradient(circle at 12% 0%, rgb(79 156 255 / 7%), transparent 32%),
    var(--main-bg-color-props);
}

.samples-panel-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 14px;
}

.samples-panel-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.samples-panel-intro strong {
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.samples-panel-intro > span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.45;
}

.samples-panel-toolbar {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.samples-toolbar-button {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--button-text-color);
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 6px;
  background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%));
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.samples-toolbar-button:hover {
  border-color: rgb(79 156 255 / 50%);
  background: linear-gradient(180deg, rgb(79 156 255 / 16%), rgb(79 156 255 / 7%));
}

.samples-library-button {
  border-color: rgb(130 112 255 / 30%);
  background: linear-gradient(180deg, rgb(130 112 255 / 17%), rgb(79 156 255 / 7%));
}

.samples-library-button:hover {
  border-color: rgb(146 133 255 / 67%);
  background: linear-gradient(180deg, rgb(130 112 255 / 25%), rgb(79 156 255 / 11%));
}

.samples-toolbar-button--quiet {
  padding-inline: 7px;
  color: var(--button-text-inactive-color);
}

.samples-upload-button {
  position: relative;
}

.samples-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.reference-library-backdrop {
  position: fixed;
  z-index: 100000;
  display: grid;
  padding: 28px;
  place-items: center;
  background: rgb(5 7 10 / 76%);
  backdrop-filter: blur(10px);
  inset: 0;
}

.reference-library-dialog {
  box-sizing: border-box;
  display: flex;
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  flex-direction: column;
  color: #eef1f7;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgb(114 94 255 / 15%), transparent 28%),
    radial-gradient(circle at 92% 5%, rgb(49 154 255 / 11%), transparent 30%),
    #1b1e23;
  box-shadow:
    0 28px 90px rgb(0 0 0 / 62%),
    0 1px 0 rgb(255 255 255 / 8%) inset;
}

.reference-library-header {
  display: flex;
  padding: 22px 24px 17px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.reference-library-header > div {
  min-width: 0;
}

.reference-library-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #9c90ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reference-library-header h2 {
  margin: 0;
  color: #f4f6fa;
  font-size: 21px;
  font-weight: 670;
  letter-spacing: -0.02em;
}

.reference-library-header p {
  margin: 5px 0 0;
  color: rgb(230 234 242 / 58%);
  font-size: 11px;
  line-height: 1.45;
}

.reference-library-close {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: rgb(255 255 255 / 70%);
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.reference-library-close:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 10%);
}

.reference-library-tabs {
  display: flex;
  padding: 12px 24px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.reference-library-tabs button {
  display: inline-flex;
  height: 28px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  color: rgb(229 233 241 / 61%);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.reference-library-tabs button:hover {
  color: #f5f7fb;
  background: rgb(255 255 255 / 6%);
}

.reference-library-tabs button[aria-pressed='true'] {
  color: #f5f7fb;
  border-color: rgb(139 125 255 / 42%);
  background: rgb(118 99 255 / 16%);
}

.reference-library-tabs button span {
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border-radius: 99px;
  background: rgb(255 255 255 / 8%);
  font-size: 8px;
}

.reference-library-content {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 26px;
  gap: 25px;
  overscroll-behavior: contain;
}

.reference-library-group {
  display: grid;
  gap: 12px;
}

.reference-library-group-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.reference-library-group-heading h3 {
  margin: 0;
  color: #f2f4f8;
  font-size: 12px;
  font-weight: 680;
}

.reference-library-group-heading p {
  margin: 0;
  color: rgb(228 232 240 / 47%);
  font-size: 9px;
}

.reference-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.reference-library-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  color: #eef1f7;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 10px;
  background: linear-gradient(150deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
  box-shadow: 0 5px 14px rgb(0 0 0 / 20%);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.reference-library-card:hover:not(:disabled) {
  border-color: rgb(139 125 255 / 55%);
  box-shadow: 0 9px 24px rgb(0 0 0 / 31%);
  transform: translateY(-2px);
}

.reference-library-card:focus-visible,
.reference-library-close:focus-visible,
.reference-library-tabs button:focus-visible,
.reference-library-footer button:focus-visible {
  outline: 2px solid #8e83ff;
  outline-offset: 2px;
}

.reference-library-card--selected {
  border-color: rgb(139 125 255 / 88%);
  background: linear-gradient(150deg, rgb(122 102 255 / 18%), rgb(55 124 194 / 8%));
  box-shadow:
    0 0 0 1px rgb(139 125 255 / 20%) inset,
    0 9px 24px rgb(0 0 0 / 32%);
}

.reference-library-card--imported {
  cursor: default;
  opacity: 0.53;
}

.reference-library-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111318;
}

.reference-library-image::after {
  position: absolute;
  background: linear-gradient(180deg, transparent 52%, rgb(5 7 10 / 51%));
  content: '';
  inset: 0;
  pointer-events: none;
}

.reference-library-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.reference-library-card:hover:not(:disabled) .reference-library-image img {
  transform: scale(1.025);
}

.reference-library-check {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 6px;
  background: rgb(9 11 15 / 52%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}

.reference-library-card--selected .reference-library-check {
  border-color: #a69cff;
  background: #7063e6;
}

.reference-library-imported-badge {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  color: rgb(255 255 255 / 85%);
  border-radius: 99px;
  background: rgb(9 11 15 / 69%);
  font-size: 7px;
  font-style: normal;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.reference-library-card-copy {
  display: flex;
  min-width: 0;
  min-height: 61px;
  padding: 10px;
  flex-direction: column;
  gap: 3px;
}

.reference-library-card-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
}

.reference-library-card-title strong {
  overflow: hidden;
  min-width: 0;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-library-card-title > span {
  flex: 0 0 auto;
  color: rgb(236 239 246 / 46%);
  font-size: 8px;
}

.reference-library-card-copy small {
  overflow: hidden;
  color: rgb(232 235 242 / 57%);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-library-card-copy em {
  overflow: hidden;
  margin-top: auto;
  color: rgb(173 166 255 / 66%);
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-library-footer {
  display: grid;
  padding: 14px 24px;
  align-items: center;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  border-top: 1px solid rgb(255 255 255 / 9%);
  background: rgb(7 9 12 / 24%);
}

.reference-library-footer > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.reference-library-footer > div strong {
  color: #f1f3f7;
  font-size: 10px;
  font-weight: 640;
}

.reference-library-footer > div span {
  color: rgb(232 235 242 / 48%);
  font-size: 8px;
}

.reference-library-footer button {
  display: inline-flex;
  height: 30px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #edf0f6;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 6%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.reference-library-footer button:hover:not(:disabled) {
  background: rgb(255 255 255 / 10%);
}

.reference-library-footer button:disabled,
.reference-library-close:disabled {
  cursor: default;
  opacity: 0.42;
}

.reference-library-footer .reference-library-import {
  min-width: 136px;
  border-color: rgb(151 138 255 / 58%);
  background: linear-gradient(180deg, #766ae0, #5b50c5);
  box-shadow:
    0 4px 13px rgb(38 25 122 / 37%),
    0 1px 0 rgb(255 255 255 / 18%) inset;
}

.reference-library-footer .reference-library-import:hover:not(:disabled) {
  background: linear-gradient(180deg, #887ceb, #685bd2);
}

.reference-library-error {
  color: #ff9a9a;
  font-size: 9px;
}

@media (max-width: 760px) {
  .reference-library-backdrop {
    padding: 12px;
  }

  .reference-library-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .reference-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-library-tabs {
    overflow-x: auto;
  }

  .reference-library-footer {
    grid-template-columns: 1fr auto;
  }

  .reference-library-footer > div {
    grid-column: 1 / -1;
  }

  .reference-library-error {
    grid-column: 1 / -1;
  }
}

.samples-match-switch {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 99px;
  background: rgb(0 0 0 / 20%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%) inset;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.samples-match-switch > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transition: left 140ms ease, background-color 120ms ease;
}

.samples-match-settings {
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
  background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(0 0 0 / 11%));
  box-shadow:
    0 8px 20px rgb(0 0 0 / 12%),
    0 1px 0 rgb(255 255 255 / 4%) inset;
}

.samples-match-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.samples-match-header > .samples-match-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-direction: row;
  gap: 7px;
  margin-left: auto;
}

.samples-match-inline-toggle {
  display: inline-flex;
  height: 27px;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  color: var(--button-text-inactive-color);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background: rgb(0 0 0 / 11%);
  font: inherit;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
}

.samples-match-inline-toggle--on {
  color: #72b5ff;
  border-color: rgb(79 156 255 / 42%);
  background: rgb(79 156 255 / 9%);
}

.samples-match-inline-toggle--on .samples-match-switch {
  border-color: rgb(79 156 255 / 58%);
  background: rgb(50 132 214 / 68%);
}

.samples-match-inline-toggle--on .samples-match-switch > span {
  left: 15px;
  background: #fff;
}

.samples-match-inline-toggle:hover {
  border-color: rgb(79 156 255 / 48%);
}

.samples-match-inline-toggle:focus-visible {
  outline: 2px solid #4f9cff;
  outline-offset: 2px;
}

.samples-match-bypass {
  margin: 10px 0 0;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.35;
}

.samples-match-header > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.samples-match-header strong {
  font-size: 11px;
  font-weight: 650;
}

.samples-match-header small,
.samples-match-control-copy small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.35;
}

.samples-method-select {
  max-width: 112px;
  height: 27px;
  flex: 0 0 auto;
  padding-right: 24px;
  font-size: 10px;
}

.samples-match-controls {
  display: grid;
  gap: 11px;
  padding-top: 11px;
}

.samples-match-control {
  display: grid;
  gap: 5px;
}

.samples-match-control-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.samples-match-control-copy strong {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
}

.samples-match-control-copy small {
  text-align: left;
}

.samples-reference-header {
  display: flex;
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.samples-section-heading {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.samples-section-heading > span:last-child {
  display: grid;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 99px;
  background: rgb(255 255 255 / 7%);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.samples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding-bottom: 12px;
}

.samples-grid .sample-button {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 5px;
  margin: 0;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
  background: linear-gradient(155deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 9%));
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  font-size: 10px;
  line-height: normal;
  text-align: left;
  cursor: grab;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.samples-grid .sample-button:hover {
  border-color: rgb(255 255 255 / 20%);
  background: linear-gradient(155deg, rgb(255 255 255 / 9%), rgb(0 0 0 / 7%));
  box-shadow: 0 7px 18px rgb(0 0 0 / 24%);
  transform: translateY(-1px);
}

.samples-grid .sample-button:active {
  cursor: grabbing;
}

.samples-grid .sample-button:focus-visible {
  outline: 2px solid #4f9cff;
  outline-offset: 2px;
}

.samples-grid .sample-active {
  border-color: rgb(79 156 255 / 88%);
  background: linear-gradient(155deg, rgb(79 156 255 / 16%), rgb(17 54 84 / 18%));
  box-shadow:
    0 0 0 1px rgb(79 156 255 / 17%) inset,
    0 8px 20px rgb(0 0 0 / 22%);
}

.sample-thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%), transparent),
    #17191c;
}

#sample_block .sample-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

.sample-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.samples-grid .sample-remove {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  left: auto;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: rgb(255 255 255 / 82%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 6px;
  background: rgb(10 12 15 / 72%);
  backdrop-filter: blur(6px);
  font: inherit;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 100ms ease, background-color 100ms ease;
}

.samples-grid .sample-button:hover .sample-remove,
.samples-grid .sample-remove:focus-visible {
  opacity: 1;
}

.samples-grid .sample-remove:hover {
  color: #fff;
  background: rgb(173 48 48 / 88%);
}

.sample-drag-handle {
  position: absolute;
  z-index: 1;
  bottom: 6px;
  left: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: rgb(255 255 255 / 72%);
  border-radius: 5px;
  background: rgb(10 12 15 / 62%);
  font-size: 12px;
  backdrop-filter: blur(6px);
}

.sample-selected-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  color: #e8f4ff;
  border: 1px solid rgb(133 196 255 / 45%);
  border-radius: 99px;
  background: rgb(27 103 169 / 84%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.sample-card-footer {
  display: flex;
  min-width: 0;
  min-height: 48px;
  padding: 7px 3px 0;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}

.sample-card-name {
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.sample-palette {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
}

.sample-palette > span {
  min-width: 0;
  height: 14px;
  flex: 1 1 0;
}

.sample-palette-slot--empty {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%));
}

.sample-palette--empty > span + span {
  border-left: 1px solid rgb(255 255 255 / 5%);
}

.samples-empty-state {
  display: flex;
  min-height: 150px;
  padding: 20px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: var(--button-text-inactive-color);
  border: 1px dashed rgb(255 255 255 / 12%);
  border-radius: 9px;
  background: rgb(0 0 0 / 8%);
  text-align: center;
}

.samples-empty-state > .icon-samples {
  margin-bottom: 3px;
  color: rgb(116 182 245 / 72%);
  font-size: 24px;
}

.samples-empty-state strong {
  color: var(--button-text-color);
  font-size: 11px;
}

.samples-empty-state > span:last-child {
  max-width: 190px;
  font-size: 9px;
  line-height: 1.4;
}

body.grid-round .settings-pin-assist-button,
body.grid-round2 .settings-pin-assist-button,
body.grid-cross .settings-pin-assist-button {
    display: none;
}


/* round corners on selectmenu */
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 6px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 6px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 6px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 6px;
}



ul.ui-menu {
   column-gap: 0px;
}

.label-desc {
    font-size: 75%;
}

/* Adjustment layers */
:is(#props_container, #floating_panels) .adjustment-layers {
    --layer-accent: 101 177 255;
    display: grid;
    min-width: 0;
    gap: 6px;
}

:is(#props_container, #floating_panels) .adjustment-layers-opacity {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(48px, 1fr) 38px;
    align-items: center;
    gap: 7px;
    padding: 3px 4px 5px;
    color: var(--button-text-inactive-color);
    border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 58%, transparent);
    font-size: calc(0.42 * var(--menu-t));
}

:is(#props_container, #floating_panels) .adjustment-layers-opacity input {
    width: 100%;
    min-width: 0;
    margin: 0;
    pointer-events: auto;
}

:is(#props_container, #floating_panels) .adjustment-layers-opacity output {
    color: var(--button-text-color);
    font-variant-numeric: tabular-nums;
    font-weight: 620;
    text-align: right;
}

:is(#props_container, #floating_panels) .adjustment-layers-stack {
    display: flex;
    max-height: min(440px, calc(100vh - 205px));
    min-height: 0;
    flex-direction: column-reverse;
    gap: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid color-mix(in srgb, var(--button-border-color) 58%, transparent);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Applied adjustments */
:is(#props_container, #floating_panels) .applied-adjustments {
    --applied-accent: 101 177 255;
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .applied-adjustments-intro {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 2px;
}

:is(#props_container, #floating_panels) .applied-adjustments-intro > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

:is(#props_container, #floating_panels) .applied-adjustments-intro strong,
:is(#props_container, #floating_panels) .applied-adjustments-empty strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .applied-adjustments-intro span,
:is(#props_container, #floating_panels) .applied-adjustments-note,
:is(#props_container, #floating_panels) .applied-adjustments-empty p {
    color: var(--button-text-inactive-color);
    font-size: calc(0.42 * var(--menu-t));
    line-height: 1.4;
}

:is(#props_container, #floating_panels) .applied-adjustments-count {
    flex: none;
    padding: 4px 7px;
    color: rgb(var(--applied-accent)) !important;
    border: 1px solid rgb(var(--applied-accent) / 24%);
    border-radius: 999px;
    background: rgb(var(--applied-accent) / 8%);
    font-weight: 650;
    line-height: 1 !important;
}

:is(#props_container, #floating_panels) .applied-adjustments-list {
    display: grid;
    max-height: min(480px, calc(100vh - 220px));
    gap: 3px;
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

:is(#props_container, #floating_panels) .applied-adjustment-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 58%, transparent);
    border-radius: 4px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 60%),
      color-mix(in srgb, var(--main-bg-color-props) 86%, var(--main-bg-color-deep));
    transition: border-color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

:is(#props_container, #floating_panels) .applied-adjustment-row:hover,
:is(#props_container, #floating_panels) .applied-adjustment-row:focus-within {
    border-color: rgb(var(--applied-accent) / 42%);
    background:
      linear-gradient(100deg, rgb(var(--applied-accent) / 10%), transparent 72%),
      color-mix(in srgb, var(--main-bg-color-props) 90%, var(--main-bg-color-deep));
}

:is(#props_container, #floating_panels) .applied-adjustment-row--hidden {
    opacity: 0.52;
}

:is(#props_container, #floating_panels) .applied-adjustment-open {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 7px 8px 10px;
    color: inherit;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .applied-adjustment-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:is(#props_container, #floating_panels) .applied-adjustment-copy strong,
:is(#props_container, #floating_panels) .applied-adjustment-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .applied-adjustment-copy strong {
    color: var(--button-text-color);
    font-size: calc(0.48 * var(--menu-t));
    font-weight: 650;
}

:is(#props_container, #floating_panels) .applied-adjustment-copy small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.38 * var(--menu-t));
}

:is(#props_container, #floating_panels) .applied-adjustment-arrow {
    color: rgb(var(--applied-accent) / 72%);
    font-size: calc(0.72 * var(--menu-t));
    line-height: 1;
}

:is(#props_container, #floating_panels) .applied-adjustment-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 5px 4px 0;
}

:is(#props_container, #floating_panels) .applied-adjustment-actions button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    color: var(--button-text-inactive-color);
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .applied-adjustment-eye {
    color: rgb(var(--applied-accent)) !important;
}

:is(#props_container, #floating_panels) .applied-adjustment-actions button:hover:not(:disabled) {
    color: var(--button-text-color);
    background: rgb(255 255 255 / 8%);
}

:is(#props_container, #floating_panels) .applied-adjustment-trash:hover:not(:disabled) {
    color: rgb(235 104 104) !important;
    background: rgb(235 104 104 / 11%) !important;
}

:is(#props_container, #floating_panels) .applied-adjustment-actions button:focus-visible,
:is(#props_container, #floating_panels) .applied-adjustment-open:focus-visible {
    outline: 2px solid rgb(var(--applied-accent) / 76%);
    outline-offset: -2px;
}

:is(#props_container, #floating_panels) .applied-adjustment-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

:is(#props_container, #floating_panels) .applied-adjustment-trash svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

:is(#props_container, #floating_panels) .applied-adjustments-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 24px 14px;
    border: 1px dashed color-mix(in srgb, var(--button-border-color) 62%, transparent);
    border-radius: 5px;
    text-align: center;
}

:is(#props_container, #floating_panels) .applied-adjustments-empty > span {
    color: rgb(var(--applied-accent) / 64%);
    font-size: calc(1.1 * var(--menu-t));
}

:is(#props_container, #floating_panels) .applied-adjustments-empty p,
:is(#props_container, #floating_panels) .applied-adjustments-note {
    margin: 0;
}

:is(#props_container, #floating_panels) .applied-adjustments-note {
    padding: 0 3px 2px;
}

:is(#props_container, #floating_panels) .adjustment-layer {
    position: relative;
    box-sizing: border-box;
    display: block;
    flex: none;
    min-height: 42px;
    padding: 4px 5px;
    color: var(--button-text-color);
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 50%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--main-bg-color-props) 90%, var(--main-bg-color-deep));
    box-shadow: none;
    transition:
      border-color 120ms ease,
      background-color 120ms ease,
      box-shadow 120ms ease,
      opacity 120ms ease,
      transform 120ms ease;
}

:is(#props_container, #floating_panels) .adjustment-layer:hover:not(.adjustment-layer--selected) {
    background: rgb(255 255 255 / 4%);
    box-shadow: none;
}

:is(#props_container, #floating_panels) .adjustment-layer--selected {
    background:
      linear-gradient(90deg, rgb(var(--layer-accent) / 15%), transparent 82%),
      color-mix(in srgb, var(--main-bg-color-props) 90%, var(--main-bg-color-deep));
    box-shadow:
      inset 2px 0 rgb(var(--layer-accent) / 90%);
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden {
    opacity: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden:hover,
:is(#props_container, #floating_panels) .adjustment-layer--hidden:focus-within {
    opacity: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer--dragging {
    opacity: 0.35;
    transform: scale(0.985);
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-before::before,
:is(#props_container, #floating_panels) .adjustment-layer--drop-after::after {
    position: absolute;
    z-index: 2;
    right: 3px;
    left: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--layer-accent));
    box-shadow: 0 0 8px rgb(var(--layer-accent) / 70%);
    content: "";
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-before::before {
    top: -5px;
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-after::after {
    bottom: -5px;
}

:is(#props_container, #floating_panels) .adjustment-layer-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 24px 30px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility {
    box-sizing: border-box;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    padding: 0;
    color: var(--button-text-inactive-color);
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility {
    color: rgb(var(--layer-accent));
    background: rgb(var(--layer-accent) / 8%);
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility:hover,
:is(#props_container, #floating_panels) .adjustment-layer-remove:hover:not(:disabled) {
    color: var(--button-text-hover-color);
    border-color: rgb(var(--layer-accent) / 27%);
    background: rgb(var(--layer-accent) / 10%);
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility:focus-visible,
:is(#props_container, #floating_panels) .adjustment-layer-name:focus-visible,
:is(#props_container, #floating_panels) .adjustment-layers-add:focus-visible,
:is(#props_container, #floating_panels) .adjustment-layer-remove:focus-visible {
    outline: 2px solid rgb(var(--layer-accent));
    outline-offset: 1px;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: rgb(var(--layer-accent));
    border: 1px solid rgb(var(--layer-accent) / 28%);
    border-radius: 2px;
    background:
      linear-gradient(135deg, rgb(var(--layer-accent) / 18%), transparent),
      rgb(0 0 0 / 17%);
    font-size: calc(0.62 * var(--menu-t));
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--adjustment {
    color: rgb(186 160 255);
}

:is(#props_container, #floating_panels) .adjustment-layer-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1px;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-row .adjustment-layer-name,
:is(#props_container, #floating_panels) .adjustment-layer-name-row .adjustment-layer-name-input {
    min-width: 0;
    flex: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer-name {
    display: flex;
    min-width: 0;
    min-height: 20px;
    align-items: center;
    gap: 0;
    padding: 1px 3px;
    overflow: hidden;
    color: var(--button-text-color);
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 660;
    line-height: 1.2;
    text-align: left;
    cursor: grab;
}

:is(#props_container, #floating_panels) .adjustment-layer-name:active {
    cursor: grabbing;
}

:is(#props_container, #floating_panels) .adjustment-layer-name > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-input {
    box-sizing: border-box;
    width: 100%;
    height: 25px;
    padding: 2px 6px;
    pointer-events: auto;
}

:is(#props_container, #floating_panels) .adjustment-layer-meta {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 0 3px;
}

:is(#props_container, #floating_panels) .adjustment-layer-meta > span {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    font-size: calc(0.39 * var(--menu-t));
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-colorspace {
    color: rgb(186 160 255);
    border: 0;
    background: transparent;
}

:is(#props_container, #floating_panels) .adjustment-layer-chip {
    color: var(--button-text-inactive-color);
    border: 0;
    background: transparent;
}

:is(#props_container, #floating_panels) .adjustment-layer-chip--empty {
    font-style: italic;
    opacity: 0.72;
}

:is(#props_container, #floating_panels) .adjustment-layer-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
    padding-top: 2px;
}

:is(#props_container, #floating_panels) .adjustment-layer-toolbar__spacer {
    min-width: 4px;
    flex: 1;
}

:is(#props_container, #floating_panels) .adjustment-layers-add,
:is(#props_container, #floating_panels) .adjustment-layer-remove {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    color: var(--button-text-color);
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: calc(0.42 * var(--menu-t));
    text-align: left;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layers-add > span:first-child {
    display: grid;
    width: 18px;
    height: 18px;
    flex: none;
    place-items: center;
    border: 0;
    border-radius: 2px;
    background: rgb(var(--layer-accent) / 10%);
    color: rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .adjustment-layers-add > span:last-child {
    display: grid;
    gap: 2px;
}

:is(#props_container, #floating_panels) .adjustment-layers-add strong {
    color: var(--button-text-color);
    font-size: calc(0.53 * var(--menu-t));
    font-weight: 670;
}

:is(#props_container, #floating_panels) .adjustment-layers-add small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.4 * var(--menu-t));
}

:is(#props_container, #floating_panels) .adjustment-layers-add:hover {
    border-color: rgb(var(--layer-accent) / 30%);
    background: rgb(var(--layer-accent) / 9%);
    box-shadow: none;
}

:is(#props_container, #floating_panels) .adjustment-layers-add:active {
    transform: translateY(1px);
}

:is(#props_container, #floating_panels) .adjustment-layer-remove {
    width: 28px;
    flex: none;
    padding: 0;
    color: var(--button-text-inactive-color);
    font-size: calc(0.62 * var(--menu-t));
}

:is(#props_container, #floating_panels) .adjustment-layer-remove:hover:not(:disabled) {
    color: #ff9b98;
    border-color: rgb(255 115 110 / 30%);
    background: rgb(255 115 110 / 9%);
}

:is(#props_container, #floating_panels) .adjustment-layer-remove:disabled {
    cursor: not-allowed;
    opacity: 0.25;
}

:is(#props_container, #floating_panels) .adjustment-layers-add--liquify {
    --layer-accent: 185 126 255;
}

:is(#props_container, #floating_panels) .adjustment-layers-add--skin {
    --layer-accent: 255 154 167;
}

:is(#props_container, #floating_panels) .adjustment-layer-type {
    color: rgb(var(--layer-accent));
    border-color: rgb(var(--layer-accent) / 24%);
    background: rgb(var(--layer-accent) / 9%);
}

:is(#props_container, #floating_panels) .pixel-layer-controls {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgb(var(--layer-accent) / 18%);
    border-radius: 7px;
    background: rgb(var(--layer-accent) / 4%);
}

:is(#props_container, #floating_panels) .pixel-layer-inspector {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgb(185 126 255 / 28%);
    border-radius: 9px;
    background:
        linear-gradient(145deg, rgb(185 126 255 / 10%), transparent 42%),
        rgb(0 0 0 / 9%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector--empty {
    min-height: 180px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector--empty > strong {
    color: var(--button-text-color);
    font-size: calc(0.62 * var(--menu-t));
}

:is(#props_container, #floating_panels) .pixel-layer-inspector--empty > p {
    max-width: 34ch;
    margin: 0;
    color: var(--button-text-inactive-color);
}

:is(#props_container, #floating_panels) .pixel-layer-inspector--empty > button {
    min-height: 32px;
    padding: 6px 12px;
    color: var(--button-text-color);
    border: 1px solid rgb(var(--layer-accent) / 44%);
    border-radius: 4px;
    background: rgb(var(--layer-accent) / 18%);
    cursor: pointer;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector--empty > button:hover,
:is(#props_container, #floating_panels) .pixel-layer-inspector--empty > button:focus-visible {
    border-color: rgb(var(--layer-accent) / 72%);
    background: rgb(var(--layer-accent) / 28%);
    outline: none;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__header strong {
    color: var(--button-text-color);
    font-size: calc(0.54 * var(--menu-t));
    font-weight: 700;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__header small,
:is(#props_container, #floating_panels) .pixel-layer-inspector__status {
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__status {
    padding: 3px 6px;
    border: 1px solid rgb(185 126 255 / 20%);
    border-radius: 999px;
    background: rgb(185 126 255 / 7%);
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__reset,
:is(#props_container, #floating_panels) .pixel-layer-inspector__visibility {
    display: grid;
    width: 24px;
    height: 24px;
    padding: 4px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(185 126 255 / 24%);
    border-radius: 50%;
    background: rgb(185 126 255 / 7%);
    cursor: pointer;
    place-items: center;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__reset:hover:not(:disabled),
:is(#props_container, #floating_panels) .pixel-layer-inspector__reset:focus-visible,
:is(#props_container, #floating_panels) .pixel-layer-inspector__visibility:hover,
:is(#props_container, #floating_panels) .pixel-layer-inspector__visibility:focus-visible,
:is(#props_container, #floating_panels) .pixel-layer-inspector__visibility[aria-pressed='true'] {
    color: var(--button-text-color);
    border-color: rgb(185 126 255 / 48%);
    background: rgb(185 126 255 / 16%);
    outline: none;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__reset:disabled {
    cursor: default;
    opacity: 0.42;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__reset svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector__visibility svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector .pixel-layer-controls {
    padding: 0;
    border: 0;
    background: transparent;
}

:is(#props_container, #floating_panels) .liquify-pane {
    container-type: inline-size;
    border-radius: 4px;
}

:is(#props_container, #floating_panels) .skin-retouch-pane {
    --layer-accent: 255 154 167;
    --skin-accent: #ff9aa7;
    --skin-accent-strong: #ffbfc9;
    --skin-surface: #2b2327;
    --skin-surface-raised: #362b30;
    --skin-border: #7a4454;
    --skin-success: #9de2b4;
    --skin-muted: #b8afb2;
    box-sizing: border-box;
    width: min(100%, 720px);
    min-width: 0;
    margin: 8px auto;
    gap: 12px;
    padding: 14px;
    color: var(--button-text-color);
    border-color: var(--skin-border);
    border-radius: 10px;
    background: var(--skin-surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

body.light-theme :is(#props_container, #floating_panels) .skin-retouch-pane {
    --skin-accent: #b84060;
    --skin-accent-strong: #8c2840;
    --skin-surface: #fff5f7;
    --skin-surface-raised: #f7e8ec;
    --skin-border: #c4607a;
    --skin-success: #176b38;
    --skin-muted: #5a3d46;
    box-shadow: 0 8px 24px rgb(100 30 55 / 12%);
}

:is(#props_container, #floating_panels) .hair-cleanup-pane {
    --layer-accent: 255 184 88;
    --hair-accent: #ffc36f;
    --hair-accent-strong: #ffd69a;
    --hair-surface: #29251f;
    --hair-surface-raised: #342f27;
    --hair-border: #6f5636;
    --hair-success: #9de2b4;
    --hair-muted: #b8b1a7;
    box-sizing: border-box;
    width: min(100%, 720px);
    min-width: 0;
    margin: 8px auto;
    gap: 12px;
    padding: 14px;
    color: var(--button-text-color);
    border-color: var(--hair-border);
    border-radius: 10px;
    background: var(--hair-surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

body.light-theme :is(#props_container, #floating_panels) .hair-cleanup-pane {
    --hair-accent: #874600;
    --hair-accent-strong: #633300;
    --hair-surface: #fffaf3;
    --hair-surface-raised: #f7ecdc;
    --hair-border: #a96a20;
    --hair-success: #176b38;
    --hair-muted: #5a4937;
    box-shadow: 0 8px 24px rgb(63 41 10 / 12%);
}

:is(#props_container, #floating_panels) .face-retouch-pane {
    --layer-accent: 126 210 184;
    --face-accent: #6fe0c4;
    --face-accent-strong: #9decd4;
    --face-surface: #1f2826;
    --face-surface-raised: #283330;
    --face-border: #3d6b5e;
    --face-success: #9de2b4;
    --face-muted: #b4c4be;
    box-sizing: border-box;
    width: min(100%, 720px);
    min-width: 0;
    margin: 8px auto;
    gap: 12px;
    padding: 14px;
    color: var(--button-text-color);
    border-color: var(--face-border);
    border-radius: 10px;
    background: var(--face-surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

body.light-theme :is(#props_container, #floating_panels) .face-retouch-pane {
    --face-accent: #1f6b58;
    --face-accent-strong: #145445;
    --face-surface: #f3faf7;
    --face-surface-raised: #e4f3ed;
    --face-border: #3d8f78;
    --face-success: #176b38;
    --face-muted: #3d5a50;
    box-shadow: 0 8px 24px rgb(20 70 55 / 12%);
}

:is(#props_container, #floating_panels) .face-retouch-pane.pixel-layer-inspector--empty {
    min-height: 270px;
    align-content: center;
    gap: 10px;
    padding: 28px;
}

:is(#props_container, #floating_panels) .face-retouch-pane.pixel-layer-inspector--empty > strong {
    color: var(--button-text-color);
    font-size: 20px;
    line-height: 1.2;
}

:is(#props_container, #floating_panels) .face-retouch-pane.pixel-layer-inspector--empty > p {
    max-width: 42ch;
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.5;
}

:is(#props_container, #floating_panels) .face-retouch-pane.pixel-layer-inspector--empty > button {
    min-height: 42px;
    padding: 9px 18px;
    color: #0c1714;
    border: 1px solid #2d8f74;
    border-radius: 7px;
    background: #7ee0c4;
    font-size: 14px;
    font-weight: 700;
}

body.light-theme :is(#props_container, #floating_panels) .face-retouch-pane.pixel-layer-inspector--empty > button {
    color: #06241c;
    border-color: #1f6b58;
    background: #9ee8d0;
}

:is(#props_container, #floating_panels) .face-retouch-section {
    display: grid;
    gap: 6px;
    border: 1px solid rgb(var(--layer-accent) / 16%);
    border-radius: 5px;
    padding: 7px;
    background: rgb(var(--layer-accent) / 4%);
}

.face-retouch-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
    color: var(--button-text-color, #f1f5f8);
    border: 1px solid #3d6b5e;
    border-radius: 7px;
    background: #1f2826;
}

.face-retouch-progress__label,
.face-retouch-progress__value,
.face-retouch-progress__elapsed {
    color: #f3faf7;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.face-retouch-progress progress {
    grid-column: 1 / -1;
    width: 100%;
    height: 8px;
    accent-color: #7ee0c4;
}

.face-retouch-progress--compact {
    position: absolute;
    z-index: 1003;
    right: 8px;
    bottom: 8px;
    left: 8px;
    box-shadow: 0 5px 18px rgb(0 0 0 / 32%);
    pointer-events: none;
}

body.light-theme .face-retouch-progress {
    color: #06241c;
    border-color: #1f6b58;
    background: #e4f3ed;
}

body.light-theme .face-retouch-progress__label,
body.light-theme .face-retouch-progress__value,
body.light-theme .face-retouch-progress__elapsed {
    color: #06241c;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane.pixel-layer-inspector--empty {
    min-height: 270px;
    align-content: center;
    gap: 10px;
    padding: 28px;
}

:is(#props_container, #floating_panels) .hair-cleanup-empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--hair-accent-strong);
    border: 2px solid var(--hair-border);
    border-radius: 50%;
    background: var(--hair-surface-raised);
    font-size: 26px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane.pixel-layer-inspector--empty > strong {
    color: var(--button-text-color);
    font-size: 20px;
    line-height: 1.2;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane.pixel-layer-inspector--empty > p {
    max-width: 42ch;
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.5;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane.pixel-layer-inspector--empty > button {
    min-height: 42px;
    padding: 9px 18px;
    color: #231200;
    border: 1px solid #c97918;
    border-radius: 7px;
    background: #ffb64f;
    font-size: 14px;
    font-weight: 700;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane.pixel-layer-inspector--empty > small {
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.45;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-inspector__header strong {
    font-size: 17px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-inspector__header small,
:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-inspector__status {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-inspector__status {
    color: var(--hair-accent-strong);
    border-color: var(--hair-border);
    background: var(--hair-surface-raised);
}

:is(#props_container, #floating_panels) .hair-cleanup-guide {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    color: var(--button-text-color);
    border: 2px solid var(--hair-border);
    border-radius: 9px;
    background: var(--hair-surface-raised);
}

:is(#props_container, #floating_panels) .hair-cleanup-guide > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    color: #231200;
    border-radius: 50%;
    background: #ffb64f;
    font-size: 18px;
    font-weight: 800;
}

:is(#props_container, #floating_panels) .hair-cleanup-guide.is-applied {
    border-color: color-mix(in srgb, var(--hair-success) 52%, var(--hair-border));
}

:is(#props_container, #floating_panels) .hair-cleanup-guide.is-applied > span {
    color: #082b15;
    background: #9de2b4;
}

:is(#props_container, #floating_panels) .hair-cleanup-guide strong {
    display: block;
    color: var(--button-text-color);
    font-size: 15px;
    line-height: 1.3;
}

:is(#props_container, #floating_panels) .hair-cleanup-guide p {
    margin: 3px 0 0;
    color: var(--button-text-color);
    font-size: 12px;
    line-height: 1.45;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-controls--hair {
    gap: 10px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .skin-retouch-section {
    gap: 9px;
    padding: 11px;
    border-color: var(--hair-border);
    background: var(--hair-surface);
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-section-title span {
    color: var(--button-text-color);
    font-size: 15px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-section-title small {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-tools {
    gap: 6px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-tools button,
:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-footer button {
    min-height: 36px;
    padding: 7px 9px;
    color: var(--button-text-color);
    border-color: var(--button-border-color);
    background: var(--hair-surface-raised);
    font-size: 14px;
    font-weight: 650;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-tools button.is-active {
    color: #231200;
    border-color: #c97918;
    background: #ffb64f;
    box-shadow: none;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-tools button:disabled {
    color: var(--hair-muted);
    background: var(--hair-surface);
    opacity: 1;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-range,
:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-toggle {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-range {
    min-height: 32px;
}

:is(#props_container, #floating_panels) .hair-cleanup-fine-tune {
    background: var(--hair-surface-raised);
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--hair-border);
    border-radius: 7px;
    background: var(--hair-surface);
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .pixel-layer-section-title {
    padding-top: 0;
    border-top: 0;
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .pixel-layer-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .pixel-layer-toggle {
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 9px;
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    border-radius: 6px;
    background: var(--hair-surface-raised);
    font-size: 14px;
    font-weight: 650;
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .pixel-layer-toggle:has(input:checked) {
    border-color: #c97918;
    background: color-mix(in srgb, #ffb64f 18%, var(--hair-surface-raised));
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .hair-cleanup-preview-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls .pixel-layer-toggle__box {
    position: relative;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--button-text-color) 55%, var(--button-border-color));
    border-radius: 4px;
    background: var(--hair-surface);
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls input:checked + .pixel-layer-toggle__box {
    border-color: #9a5604;
    background: #ffb64f;
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls input:checked + .pixel-layer-toggle__box::after {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #231200;
    content: '✓';
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    transform: translate(-50%, -54%);
}

:is(#props_container, #floating_panels) .hair-cleanup-preview-controls input:focus-visible + .pixel-layer-toggle__box {
    outline: 2px solid var(--focus-color, #3d91ff);
    outline-offset: 2px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-footer > span,
:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-note {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-footer__actions {
    justify-content: flex-start;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .hair-cleanup-action--done {
    margin-left: auto;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) {
    font-size: 14px;
    line-height: 1.35;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-inspector__header strong {
    color: var(--button-text-color);
    font-size: 17px;
    line-height: 1.25;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-inspector__header small,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-inspector__status,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-section-title small,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-footer span,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-note,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-face-status,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-range__label small,
:is(#props_container, #floating_panels) .skin-retouch-pane .skin-retouch-manual-reference span {
    color: var(--button-text-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-section-title span {
    color: var(--button-text-color);
    font-size: 15px;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-range,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-toggle,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-tools button,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-footer button,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .inline-slider output {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .liquify-pane .liquify-face-range,
:is(#props_container, #floating_panels) .liquify-pane .liquify-face-select,
:is(#props_container, #floating_panels) .liquify-pane .liquify-face-control-group__toggle {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) .liquify-pane .liquify-eye-link-toggle {
    font-size: 13px;
}

:is(#props_container, #floating_panels) .liquify-pane-empty {
    color: var(--button-text-color);
}

:is(#props_container, #floating_panels) .liquify-pane-empty p {
    color: var(--button-text-color);
    font-size: 14px;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > strong {
    font-size: 18px;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > p,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > small {
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.45;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .hair-cleanup-guide strong {
    font-size: 16px;
}

:is(#props_container, #floating_panels) .hair-cleanup-pane .hair-cleanup-guide p {
    font-size: 14px;
}

:is(#props_container, #floating_panels) .masking-pane {
    --layer-accent: 70 199 225;
    align-content: start;
    border-color: rgb(var(--layer-accent) / 34%);
    border-radius: 4px;
}

:is(#props_container, #floating_panels) .masking-object-callout {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid rgb(var(--layer-accent) / 30%);
    border-radius: 5px;
    background: rgb(var(--layer-accent) / 9%);
}

:is(#props_container, #floating_panels) .masking-object-callout > div {
    display: grid;
    gap: 2px;
}

:is(#props_container, #floating_panels) .masking-object-callout strong {
    color: var(--button-text-color);
    font-size: calc(0.48 * var(--menu-t));
}

:is(#props_container, #floating_panels) .masking-object-callout small,
:is(#props_container, #floating_panels) .spatial-mask-instruction {
    color: var(--button-text-inactive-color);
    font-size: calc(0.37 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .masking-sam-status {
    flex: 0 0 auto;
    padding: 3px 6px;
    color: var(--button-text-color);
    border: 1px solid rgb(var(--layer-accent) / 38%);
    border-radius: 999px;
    background: rgb(var(--layer-accent) / 14%);
    font-size: calc(0.34 * var(--menu-t));
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .masking-sam-status--error {
    color: rgb(255 204 192);
    border-color: rgb(255 130 108 / 52%);
    background: rgb(110 25 15 / 46%);
}

:is(#props_container, #floating_panels) .masking-model-chooser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 7px;
    color: var(--button-text-color);
    border: 1px solid rgb(var(--layer-accent) / 24%);
    border-radius: 5px;
}

:is(#props_container, #floating_panels) .masking-model-chooser legend {
    padding: 0 4px;
    color: var(--button-text-color);
    font-size: calc(0.39 * var(--menu-t));
    font-weight: 650;
}

:is(#props_container, #floating_panels) .masking-model-chooser label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-height: 54px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 76%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--main-bg-color-props) 82%, var(--main-bg-color-deep));
    cursor: pointer;
}

:is(#props_container, #floating_panels) .masking-model-chooser label.is-selected {
    border-color: rgb(var(--layer-accent) / 84%);
    background: rgb(var(--layer-accent) / 17%);
    box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 18%);
}

:is(#props_container, #floating_panels) .masking-model-chooser label.is-disabled {
    cursor: not-allowed;
}

:is(#props_container, #floating_panels) .masking-model-chooser input {
    margin: 2px 0 0;
    accent-color: rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .masking-model-chooser span {
    display: grid;
    gap: 2px;
}

:is(#props_container, #floating_panels) .masking-model-chooser strong {
    color: var(--button-text-color);
    font-size: calc(0.39 * var(--menu-t));
}

:is(#props_container, #floating_panels) .masking-model-chooser small,
:is(#props_container, #floating_panels) .masking-model-chooser p {
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .masking-model-chooser p {
    grid-column: 1 / -1;
    margin: 1px 2px 0;
}

:is(#props_container, #floating_panels) .masking-boundary-toggle {
    display: grid;
    gap: 3px;
    padding: 7px;
    border: 1px solid rgb(var(--layer-accent) / 22%);
    border-radius: 5px;
    background: color-mix(in srgb, var(--main-bg-color-props) 88%, var(--main-bg-color-deep));
}

:is(#props_container, #floating_panels) .masking-boundary-toggle .pixel-layer-toggle {
    color: var(--button-text-color);
    font-weight: 650;
}

:is(#props_container, #floating_panels) .masking-boundary-toggle small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) :is(.spatial-mask-help, .spatial-mask-reset) {
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    color: var(--button-text-color);
    border: 1px solid rgb(var(--layer-accent) / 34%);
    border-radius: 50%;
    background: rgb(var(--layer-accent) / 9%);
    font-size: 13px;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-reset:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row button,
:is(#props_container, #floating_panels) .spatial-mask-preview-row button,
:is(#props_container, #floating_panels) .spatial-mask-preview-row select {
    min-height: 30px;
    padding: 4px 6px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 76%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--main-bg-color-props) 82%, var(--main-bg-color-deep));
    font: inherit;
    font-size: calc(0.37 * var(--menu-t));
    cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row button,
:is(#props_container, #floating_panels) .spatial-mask-preview-row button {
    display: grid;
    min-width: 0;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    text-align: left;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row button > span:last-child,
:is(#props_container, #floating_panels) .spatial-mask-preview-row button > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spatial-mask-button-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: currentcolor;
}

.spatial-mask-button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.spatial-mask-icon__soft-fill {
    fill: currentcolor;
    fill-opacity: 0.14;
}

.spatial-mask-button-icon .spatial-mask-tool-icon__badge-bg {
    fill: var(--bg-1, #182020) !important;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row button:hover,
:is(#props_container, #floating_panels) .spatial-mask-tool-row button:focus-visible,
:is(#props_container, #floating_panels) .spatial-mask-preview-row button:hover:not(:disabled),
:is(#props_container, #floating_panels) .spatial-mask-preview-row button:focus-visible:not(:disabled),
:is(#props_container, #floating_panels) :is(.spatial-mask-help, .spatial-mask-reset):hover:not(:disabled),
:is(#props_container, #floating_panels) :is(.spatial-mask-help, .spatial-mask-reset):focus-visible:not(:disabled) {
    color: var(--button-text-hover-color);
    border-color: rgb(var(--layer-accent) / 72%);
    background: rgb(var(--layer-accent) / 15%);
    outline: none;
}

.masking-workflow-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 45%, transparent);
    border-radius: 8px;
    background: rgb(255 255 255 / 2.5%);
}

.masking-workflow-card__header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 680;
    color: var(--button-text-color);
}

.masking-step-badge {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgb(var(--layer-accent) / 25%);
    color: rgb(var(--layer-accent));
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.masking-workflow-card__header .masking-sam-status {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.masking-model-pill-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.masking-model-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px;
    color: var(--button-text-inactive-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 60%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--main-bg-color-props) 85%, var(--main-bg-color-deep));
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.masking-model-pill.is-selected {
    color: var(--button-text-color);
    border-color: rgb(var(--layer-accent) / 75%);
    background: rgb(var(--layer-accent) / 16%);
}

.masking-model-pill.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.masking-pill-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgb(255 255 255 / 8%);
    color: var(--button-text-inactive-color);
}

.masking-model-pill.is-selected .masking-pill-badge {
    background: rgb(var(--layer-accent) / 30%);
    color: rgb(var(--layer-accent));
}

.masking-model-note {
    margin: -1px 1px 1px;
    color: var(--button-text-inactive-color);
    font-size: 10.5px;
    line-height: 1.35;
}

.masking-model-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: var(--button-text-color);
    font-size: 10.5px;
}

.masking-model-progress progress {
    width: 100%;
    height: 6px;
    accent-color: rgb(var(--layer-accent));
}

.segmentation-download-overlay {
    position: fixed;
    z-index: 100200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(4 8 10 / 72%);
    backdrop-filter: blur(8px);
}

.segmentation-download-dialog {
    display: grid;
    width: min(420px, calc(100vw - 32px));
    gap: 12px;
    padding: 22px;
    border: 1px solid rgb(var(--layer-accent) / 55%);
    border-radius: 14px;
    background: var(--main-bg-color-props);
    box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
    color: var(--button-text-color);
}

.segmentation-download-dialog__size {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgb(var(--layer-accent) / 20%);
    color: rgb(var(--layer-accent));
    font-size: 11px;
    font-weight: 750;
}

.segmentation-download-dialog h2,
.segmentation-download-dialog p {
    margin: 0;
}

.segmentation-download-dialog h2 {
    font-size: 18px;
}

.segmentation-download-dialog p {
    color: var(--button-text-inactive-color);
    font-size: 13px;
    line-height: 1.5;
}

.segmentation-download-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.segmentation-download-dialog button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--button-border-color);
    border-radius: 7px;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    cursor: pointer;
}

.segmentation-download-dialog button.is-primary {
    border-color: rgb(var(--layer-accent) / 85%);
    background: rgb(var(--layer-accent) / 24%);
}

.segmentation-download-dialog button:hover,
.segmentation-download-dialog button:focus-visible {
    color: var(--button-text-hover-color);
    border-color: rgb(var(--layer-accent));
    outline: none;
}

.masking-action-grid {
    display: grid;
    gap: 4px;
}

.masking-action-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.masking-action-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.masking-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 6px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 70%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--main-bg-color-props) 82%, var(--main-bg-color-deep));
    font: inherit;
    font-size: 11px;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.masking-action-btn:hover:not(:disabled) {
    color: var(--button-text-hover-color);
    border-color: rgb(var(--layer-accent) / 60%);
    background: rgb(var(--layer-accent) / 12%);
}

.masking-action-btn.is-active {
    color: #fff;
    border-color: rgb(var(--layer-accent));
    background: rgb(var(--layer-accent) / 32%);
    box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 50%);
}

.spatial-mask-preview-row button.is-active {
    color: #fff;
    border-color: rgb(var(--layer-accent));
    background: rgb(var(--layer-accent) / 25%);
}

:is(#props_container, #floating_panels) .spatial-mask-tool-row button.is-active {
    color: var(--button-text-color);
    border-color: rgb(var(--layer-accent) / 82%);
    background: rgb(var(--layer-accent) / 25%);
    box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 22%);
}

:is(#props_container, #floating_panels) .spatial-mask-slider {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    color: var(--button-text-color);
    font-size: calc(0.4 * var(--menu-t));
}

:is(#props_container, #floating_panels) .spatial-mask-slider input {
    width: 100%;
    accent-color: rgb(var(--layer-accent));
    cursor: pointer;
    touch-action: none;
}

:is(#props_container, #floating_panels) .spatial-mask-slider output {
    color: var(--button-text-inactive-color);
    text-align: right;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row select {
    grid-column: 1 / -1;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row button:disabled,
:is(#props_container, #floating_panels) .spatial-mask-preview-row select:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

:is(#props_container, #floating_panels) .spatial-mask-instruction {
    display: block;
    padding: 7px 8px;
    border-left: 2px solid rgb(var(--layer-accent) / 64%);
    background: rgb(var(--layer-accent) / 6%);
}

body.light-theme :is(#props_container, #floating_panels) .masking-sam-status--error {
    color: rgb(111 30 20);
    border-color: rgb(166 59 42 / 54%);
    background: rgb(255 221 214 / 82%);
}

:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__status,
:is(#props_container, #floating_panels) .hair-cleanup-pane .pixel-layer-inspector__status,
:is(#props_container, #floating_panels) .face-retouch-pane .pixel-layer-inspector__status {
    color: rgb(var(--layer-accent));
    border-color: rgb(var(--layer-accent) / 24%);
    background: rgb(var(--layer-accent) / 8%);
}

:is(#props_container, #floating_panels) .skin-retouch-section {
    display: grid;
    gap: 6px;
    border: 1px solid rgb(var(--layer-accent) / 16%);
    border-radius: 5px;
    padding: 7px;
    background: rgb(var(--layer-accent) / 4%);
}

:is(#props_container, #floating_panels) .skin-retouch-manual-reference {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

:is(#props_container, #floating_panels) .skin-retouch-manual-reference span {
    margin-right: auto;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
}

:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__header strong {
    color: var(--skin-accent-strong, var(--button-text-color));
}

:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__reset,
:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__visibility {
    border-color: rgb(var(--layer-accent) / 28%);
    background: rgb(var(--layer-accent) / 8%);
}

:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__reset:hover:not(:disabled),
:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__reset:focus-visible,
:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__visibility:hover,
:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__visibility:focus-visible,
:is(#props_container, #floating_panels) .skin-retouch-pane .pixel-layer-inspector__visibility[aria-pressed='true'] {
    border-color: rgb(var(--layer-accent) / 54%);
    background: rgb(var(--layer-accent) / 18%);
}

:is(#props_container, #floating_panels) .skin-retouch-footer .pixel-layer-footer__actions {
    justify-content: flex-start;
}

:is(#props_container, #floating_panels) .skin-retouch-footer .skin-retouch-footer__apply {
    margin-left: auto;
    color: white;
    border-color: rgb(var(--layer-accent) / 68%);
    background: rgb(var(--layer-accent) / 70%);
    font-weight: 700;
}

:is(#props_container, #floating_panels) .skin-retouch-footer .skin-retouch-footer__apply:hover {
    border-color: rgb(var(--layer-accent) / 90%);
    background: rgb(var(--layer-accent) / 88%);
}

:is(#props_container, #floating_panels) .liquify-pane-empty {
    display: grid;
    min-height: 180px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    color: var(--button-text-inactive-color);
    text-align: center;
}

:is(#props_container, #floating_panels) .liquify-pane-empty > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: rgb(185 126 255);
    border: 1px solid rgb(185 126 255 / 30%);
    border-radius: 50%;
    background: rgb(185 126 255 / 9%);
    font-size: calc(0.9 * var(--menu-t));
}

:is(#props_container, #floating_panels) .liquify-pane-empty strong {
    color: var(--button-text-color);
}

:is(#props_container, #floating_panels) .liquify-pane-empty p {
    max-width: 240px;
    margin: 0;
    font-size: calc(0.42 * var(--menu-t));
    line-height: 1.45;
}

:is(#props_container, #floating_panels) .liquify-pane-empty > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

:is(#props_container, #floating_panels) .liquify-pane-empty button {
    padding: 5px 8px;
    color: rgb(185 126 255);
    border: 1px solid rgb(185 126 255 / 28%);
    border-radius: 3px;
    background: rgb(185 126 255 / 8%);
    font: inherit;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .pixel-layer-tools {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
}

:is(#props_container, #floating_panels) .pixel-layer-inspector .pixel-layer-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(#props_container, #floating_panels) .pixel-layer-face-engines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(#props_container, #floating_panels) .liquify-eye-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(#props_container, #floating_panels) .pixel-layer-tools button,
:is(#props_container, #floating_panels) .pixel-layer-face-targets button,
:is(#props_container, #floating_panels) .pixel-layer-footer button {
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    color: var(--button-text-inactive-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 55%, transparent);
    border-radius: 5px;
    background: rgb(255 255 255 / 3%);
    font: inherit;
    font-size: calc(0.4 * var(--menu-t));
    cursor: pointer;
}

:is(#props_container, #floating_panels) .pixel-layer-tools button:hover,
:is(#props_container, #floating_panels) .pixel-layer-tools button.is-active,
:is(#props_container, #floating_panels) .pixel-layer-face-targets button:hover,
:is(#props_container, #floating_panels) .pixel-layer-face-targets button.is-active,
:is(#props_container, #floating_panels) .pixel-layer-footer button:hover:not(:disabled) {
    color: rgb(var(--layer-accent));
    border-color: rgb(var(--layer-accent) / 48%);
    background: rgb(var(--layer-accent) / 10%);
}

:is(#props_container, #floating_panels) .pixel-layer-tools button.is-active {
    box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 16%);
}

:is(#props_container, #floating_panels) .pixel-layer-face-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

:is(#props_container, #floating_panels) .liquify-face-select {
    display: grid;
    grid-template-columns: minmax(62px, 0.75fr) minmax(0, 1fr);
    align-items: center;
    min-height: 27px;
    gap: 8px;
    color: var(--button-text-color);
    font-size: calc(0.46 * var(--menu-t));
}

:is(#props_container, #floating_panels) .liquify-face-select select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 25px;
    padding: 2px 24px 2px 7px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--button-bg-color) 84%, black);
    font: inherit;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .liquify-face-select select:focus-visible {
    outline: 2px solid rgb(var(--layer-accent) / 88%);
    outline-offset: 1px;
}

:is(#props_container, #floating_panels) .pixel-layer-range {
    display: grid;
    min-width: 0;
    grid-template-columns: 94px minmax(96px, 1fr);
    align-items: center;
    min-height: 24px;
    gap: 8px;
    color: var(--button-text-inactive-color);
    border-radius: 5px;
    font-size: calc(0.5 * var(--menu-t));
    transition:
      background-color 120ms ease,
      box-shadow 150ms ease,
      color 120ms ease,
      transform 150ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

:is(#props_container, #floating_panels) .pixel-layer-range[data-tooltip-active='true'] {
    color: var(--button-text-color);
    background: rgb(79 156 255 / 7%);
    box-shadow: inset 2px 0 rgb(79 156 255 / 58%);
    transform: translateX(2px);
}

:is(#props_container, #floating_panels) .pixel-layer-range__label {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 1px;
}

:is(#props_container, #floating_panels) .pixel-layer-range__label > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .pixel-layer-range__label small {
    overflow: hidden;
    color: rgb(173 193 208 / 62%);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .pixel-layer-range--help .pixel-layer-range__label {
    cursor: help;
}

:is(#props_container, #floating_panels) .pixel-layer-range > .inline-slider {
    width: 100%;
    min-width: 0;
}

:is(#props_container, #floating_panels) .pixel-layer-range output {
    min-width: 46px;
    color: var(--button-text-color);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range'] {
    --slider-track-size: 6px;

    width: 100%;
    min-width: 34px;
    height: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']::-moz-range-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']:hover::-webkit-slider-thumb,
:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']:hover::-moz-range-thumb,
:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider input[type='range']:focus-visible {
    outline: none;
}

:is(#props_container, #floating_panels) .liquify-pane .inline-slider output {
    box-sizing: border-box;
    min-width: 46px;
    padding: 3px 5px;
    flex: 0 0 auto;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

:is(#props_container, #floating_panels) .pixel-layer-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
}

:is(#props_container, #floating_panels) .pixel-layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.4 * var(--menu-t));
    cursor: pointer;
}

:is(#props_container, #floating_panels) .pixel-layer-toggle input {
    margin: 0;
    accent-color: rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .pixel-layer-section-title,
:is(#props_container, #floating_panels) .pixel-layer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding-top: 5px;
    border-top: 1px solid rgb(var(--layer-accent) / 14%);
}

:is(#props_container, #floating_panels) .pixel-layer-section-title span {
    color: var(--button-text-color);
    font-size: calc(0.43 * var(--menu-t));
    font-weight: 650;
}

:is(#props_container, #floating_panels) .liquify-face-control-group {
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--button-border-color) 55%, transparent);
}

:is(#props_container, #floating_panels) .liquify-face-control-group__header {
    display: flex;
    align-items: center;
    gap: 4px;
}

:is(#props_container, #floating_panels) .liquify-face-control-group__toggle {
    display: flex;
    min-width: 0;
    min-height: 27px;
    flex: 1 1 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 2px;
    color: var(--button-text-color);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: calc(0.44 * var(--menu-t));
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .liquify-face-control-group__toggle:hover {
    color: rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .liquify-face-control-group__toggle:focus-visible {
    outline: 2px solid rgb(var(--layer-accent) / 88%);
    outline-offset: -2px;
}

:is(#props_container, #floating_panels) .liquify-face-control-group__chevron {
    width: 11px;
    flex: 0 0 11px;
    color: var(--button-text-inactive-color);
    font-size: 10px;
    text-align: center;
}

:is(#props_container, #floating_panels) .liquify-eye-link-toggle {
    display: inline-flex;
    min-height: 23px;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    color: var(--button-text-inactive-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 99px;
    background: color-mix(in srgb, var(--button-bg-color) 74%, transparent);
    font: inherit;
    font-size: calc(0.37 * var(--menu-t));
    line-height: 1;
    cursor: pointer;
}

:is(#props_container, #floating_panels) .liquify-eye-link-toggle svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

:is(#props_container, #floating_panels) .liquify-eye-link-toggle[aria-pressed='true'] {
    color: rgb(var(--layer-accent));
    border-color: rgb(var(--layer-accent) / 62%);
    background: rgb(var(--layer-accent) / 12%);
}

:is(#props_container, #floating_panels) .liquify-eye-link-toggle:hover {
    color: var(--button-text-color);
    border-color: rgb(var(--layer-accent) / 72%);
}

:is(#props_container, #floating_panels) .liquify-eye-link-toggle:focus-visible {
    outline: 2px solid rgb(var(--layer-accent) / 88%);
    outline-offset: 1px;
}

:is(#props_container, #floating_panels) .liquify-face-control-group__body {
    display: grid;
    gap: 2px;
    padding: 2px 2px 7px 10px;
}

:is(#props_container, #floating_panels) .liquify-face-control-group__body[hidden] {
    display: none;
}

:is(#props_container, #floating_panels) .liquify-eye-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

:is(#props_container, #floating_panels) .liquify-eye-side {
    min-width: 0;
    padding: 4px 6px 5px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 58%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--button-bg-color) 72%, transparent);
}

:is(#props_container, #floating_panels) .liquify-eye-side h4 {
    margin: 0 0 2px;
    color: var(--button-text-color);
    font-size: calc(0.39 * var(--menu-t));
    font-weight: 650;
}

:is(#props_container, #floating_panels) .liquify-eye-side .liquify-face-range {
    grid-template-columns: minmax(58px, 0.7fr) minmax(90px, 1fr);
}

:is(#props_container, #floating_panels) .liquify-face-range {
    display: grid;
    grid-template-columns: minmax(62px, 0.75fr) minmax(0, 1fr);
    align-items: center;
    min-height: 24px;
    gap: 5px;
    color: var(--button-text-color);
    font-size: calc(0.44 * var(--menu-t));
}

:is(#props_container, #floating_panels) .liquify-face-range > label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .liquify-face-range__controls {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 3px;
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range'] {
    --slider-track-size: 6px;

    width: 100%;
    min-width: 0;
    height: 18px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']::-moz-range-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']:hover::-webkit-slider-thumb,
:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']:hover::-moz-range-thumb,
:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels) .liquify-face-range__controls input[type='range']:focus-visible {
    outline: 2px solid rgb(var(--layer-accent) / 88%);
    outline-offset: 2px;
}

:is(#props_container, #floating_panels) .liquify-face-range__value {
    box-sizing: border-box;
    width: 34px;
    height: 22px;
    padding: 2px 3px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 2px;
    appearance: textfield;
    background: color-mix(in srgb, var(--button-bg-color) 80%, black);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

:is(#props_container, #floating_panels) .liquify-face-range__value::-webkit-inner-spin-button,
:is(#props_container, #floating_panels) .liquify-face-range__value::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

:is(#props_container, #floating_panels) .liquify-face-range__value:focus {
    border-color: rgb(var(--layer-accent));
    outline: 1px solid rgb(var(--layer-accent));
    outline-offset: 0;
}

@container (max-width: 190px) {
    :is(#props_container, #floating_panels) .liquify-face-select,
    :is(#props_container, #floating_panels) .liquify-face-range {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    :is(#props_container, #floating_panels) .liquify-face-select {
        padding-bottom: 4px;
    }

    :is(#props_container, #floating_panels) .liquify-face-range > label {
        white-space: normal;
    }
}

@container (max-width: 460px) {
    :is(#props_container, #floating_panels) .liquify-eye-sides {
        grid-template-columns: minmax(0, 1fr);
    }
}

:is(#props_container, #floating_panels) .liquify-eye-sides,
:is(#props_container, #floating_panels) .liquify-eye-side {
    display: grid;
    gap: 5px;
}

:is(#props_container, #floating_panels) .liquify-eye-sides {
    gap: 8px;
}

:is(#props_container, #floating_panels) .liquify-eye-side {
    padding: 6px;
    border: 1px solid rgb(var(--layer-accent) / 12%);
    border-radius: 5px;
    background: rgb(0 0 0 / 7%);
}

:is(#props_container, #floating_panels) .liquify-eye-side h5 {
    margin: 0;
    color: var(--button-text-color);
    font-size: calc(0.39 * var(--menu-t));
    font-weight: 650;
}

:is(#props_container, #floating_panels) .pixel-layer-footer {
    align-items: flex-start;
    flex-direction: column;
}

:is(#props_container, #floating_panels) .pixel-layer-footer__actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

:is(#props_container, #floating_panels) .pixel-layer-footer .pixel-layer-preview-toggle {
    display: grid;
    width: 29px;
    flex: 0 0 29px;
    place-items: center;
    padding: 0;
}

:is(#props_container, #floating_panels) .pixel-layer-footer .pixel-layer-preview-toggle[aria-pressed='true'] {
    color: rgb(var(--layer-accent));
    border-color: rgb(var(--layer-accent) / 42%);
    background: rgb(var(--layer-accent) / 10%);
}

:is(#props_container, #floating_panels) .pixel-layer-section-title small,
:is(#props_container, #floating_panels) .pixel-layer-footer span,
:is(#props_container, #floating_panels) .pixel-layer-note {
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
}

:is(#props_container, #floating_panels) .pixel-layer-face-status {
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
}

:is(#props_container, #floating_panels) .pixel-layer-face-status--detected {
    color: rgb(116 209 150);
}

:is(#props_container, #floating_panels) .pixel-layer-face-status--warning {
    color: rgb(239 183 91);
}

:is(#props_container, #floating_panels) .pixel-layer-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

:is(#props_container, #floating_panels) .pixel-layer-note {
    margin: 2px 0 0;
    line-height: 1.45;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .liquify-pane-empty, .skin-retouch-pane, .hair-cleanup-pane) {
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.35;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-inspector__header strong,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > strong,
:is(#props_container, #floating_panels) .liquify-pane-empty strong {
    color: var(--button-text-color);
    font-size: 17px;
    line-height: 1.25;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane) .pixel-layer-section-title span,
:is(#props_container, #floating_panels) .hair-cleanup-pane .hair-cleanup-guide strong,
:is(#props_container, #floating_panels) .liquify-pane .liquify-face-control-group__toggle,
:is(#props_container, #floating_panels) .liquify-pane .liquify-eye-side h4 {
    color: var(--button-text-color);
    font-size: 15px;
}

:is(#props_container, #floating_panels) :is(.liquify-pane, .liquify-pane-empty, .skin-retouch-pane, .hair-cleanup-pane) :is(
    p,
    small,
    label,
    button,
    output,
    select,
    .pixel-layer-range,
    .pixel-layer-toggle,
    .pixel-layer-face-targets button,
    .pixel-layer-tools button,
    .pixel-layer-footer button,
    .pixel-layer-note,
    .pixel-layer-face-status,
    .pixel-layer-inspector__header small,
    .pixel-layer-inspector__status,
    .pixel-layer-section-title small,
    .pixel-layer-range__label small,
    .inline-slider output,
    .liquify-face-range,
    .liquify-face-select,
    .liquify-eye-link-toggle,
    .skin-retouch-manual-reference span
) {
    color: var(--button-text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

:is(#props_container, #floating_panels) .liquify-pane-empty p,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > p,
:is(#props_container, #floating_panels) :is(.liquify-pane, .skin-retouch-pane, .hair-cleanup-pane).pixel-layer-inspector--empty > small,
:is(#props_container, #floating_panels) .hair-cleanup-pane .hair-cleanup-guide p {
    color: var(--button-text-color);
    font-size: 14px;
    line-height: 1.45;
}

:is(#props_container, #floating_panels) .liquify-pane-empty > span {
    font-size: calc(0.9 * var(--menu-t));
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-colorspace {
    color: #6446a3;
    border-color: rgb(100 70 163 / 24%);
    background: rgb(100 70 163 / 8%);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-chip {
    border-color: rgb(0 0 0 / 7%);
    background: rgb(0 0 0 / 3%);
}

/* Printer Lights */
:is(#props_container, #floating_panels) .printer-lights-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .printer-lights-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .printer-lights-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .printer-lights-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .printer-lights-meter {
    display: grid;
    height: 68px;
    padding: 7px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 5%), transparent),
        rgb(0 0 0 / 15%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel {
    position: relative;
    display: grid;
    overflow: hidden;
    min-width: 0;
    border-radius: 5px;
    background: rgb(0 0 0 / 18%);
    align-content: end;
    justify-items: center;
    isolation: isolate;
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel i {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--printer-light-height);
    opacity: 0.88;
    transition: height 120ms ease-out;
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel--red i {
    background: linear-gradient(180deg, #ff826f, #b4272e);
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel--green i {
    background: linear-gradient(180deg, #77df99, #188348);
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel--blue i {
    background: linear-gradient(180deg, #7caeff, #335bb8);
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel--density i {
    background: linear-gradient(180deg, #e5dfd0, #6d6961);
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel b,
:is(#props_container, #floating_panels) .printer-lights-meter-channel small {
    color: rgb(255 255 255 / 94%);
    text-shadow: 0 1px 2px rgb(0 0 0 / 62%);
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel b {
    font-size: calc(0.48 * var(--menu-t));
}

:is(#props_container, #floating_panels) .printer-lights-meter-channel small {
    padding-bottom: 3px;
    font-size: calc(0.38 * var(--menu-t));
    font-variant-numeric: tabular-nums;
}

:is(#props_container, #floating_panels) .printer-lights-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .printer-lights-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(66px, 0.34fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .printer-lights-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .printer-lights-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .printer-lights-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .printer-lights-control--red input[type="range"] {
    accent-color: #dc504d;
}

:is(#props_container, #floating_panels) .printer-lights-control--green input[type="range"] {
    accent-color: #38a865;
}

:is(#props_container, #floating_panels) .printer-lights-control--blue input[type="range"] {
    accent-color: #5184e1;
}

:is(#props_container, #floating_panels) .printer-lights-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .printer-lights-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.4 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .printer-lights-looks button:hover {
    border-color: rgb(101 177 255 / 42%);
    background: rgb(101 177 255 / 12%);
}

:is(#props_container, #floating_panels) .printer-lights-looks .printer-lights-neutral {
    border-color: rgb(101 177 255 / 24%);
}

body.light-theme :is(#props_container, #floating_panels) .printer-lights-meter {
    border-color: rgb(0 0 0 / 10%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 50%), transparent),
        rgb(0 0 0 / 5%);
}

body.light-theme :is(#props_container, #floating_panels) .printer-lights-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Tonal Chroma */
:is(#props_container, #floating_panels) .tonal-chroma-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .tonal-chroma-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .tonal-chroma-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .tonal-chroma-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .tonal-chroma-profile {
    position: relative;
    display: grid;
    overflow: hidden;
    min-width: 0;
    padding: 7px 7px 5px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background: rgb(0 0 0 / 14%);
    gap: 4px;
}

:is(#props_container, #floating_panels) .tonal-chroma-profile-cells {
    display: grid;
    overflow: hidden;
    height: 48px;
    border-radius: 5px;
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

:is(#props_container, #floating_panels) .tonal-chroma-profile-cells i {
    min-width: 0;
    transition: background-color 120ms ease-out;
}

:is(#props_container, #floating_panels) .tonal-chroma-transition {
    position: absolute;
    z-index: 2;
    top: 6px;
    height: 50px;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 5px;
    background: rgb(255 255 255 / 7%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 22%), inset 0 0 10px rgb(255 255 255 / 6%);
    pointer-events: none;
}

:is(#props_container, #floating_panels) .tonal-chroma-transition::after {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--tonal-chroma-pivot);
    width: 2px;
    border-radius: 2px;
    background: white;
    box-shadow: 0 0 3px rgb(0 0 0 / 65%);
    content: "";
    transform: translateX(-1px);
}

:is(#props_container, #floating_panels) .tonal-chroma-profile-labels {
    display: grid;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    grid-template-columns: repeat(3, 1fr);
}

:is(#props_container, #floating_panels) .tonal-chroma-profile-labels small:nth-child(2) {
    text-align: center;
}

:is(#props_container, #floating_panels) .tonal-chroma-profile-labels small:last-child {
    text-align: right;
}

:is(#props_container, #floating_panels) .tonal-chroma-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .tonal-chroma-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(72px, 0.36fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .tonal-chroma-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .tonal-chroma-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .tonal-chroma-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .tonal-chroma-control--shadows input[type="range"] {
    accent-color: #527bb0;
}

:is(#props_container, #floating_panels) .tonal-chroma-control--highlights input[type="range"] {
    accent-color: #d09a57;
}

:is(#props_container, #floating_panels) .tonal-chroma-control--pivot input[type="range"],
:is(#props_container, #floating_panels) .tonal-chroma-control--transition input[type="range"] {
    accent-color: #9270d0;
}

:is(#props_container, #floating_panels) .tonal-chroma-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .tonal-chroma-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.4 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .tonal-chroma-looks button:hover {
    border-color: rgb(146 112 208 / 48%);
    background: rgb(146 112 208 / 13%);
}

:is(#props_container, #floating_panels) .tonal-chroma-looks .tonal-chroma-neutral {
    border-color: rgb(146 112 208 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .tonal-chroma-profile {
    border-color: rgb(0 0 0 / 10%);
    background: rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .tonal-chroma-transition {
    border-color: rgb(255 255 255 / 88%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), inset 0 0 10px rgb(255 255 255 / 14%);
}

body.light-theme :is(#props_container, #floating_panels) .tonal-chroma-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Channel Crosstalk */
:is(#props_container, #floating_panels) .channel-crosstalk-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .channel-crosstalk-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix {
    display: grid;
    min-width: 0;
    padding: 7px;
    align-items: stretch;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background: rgb(0 0 0 / 14%);
    grid-template-columns: 30px repeat(3, minmax(0, 1fr));
    grid-template-rows: 20px repeat(3, 35px);
    gap: 3px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix > b {
    display: grid;
    place-items: center;
    color: var(--button-text-inactive-color);
    font-size: calc(0.37 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.04em;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix-corner {
    display: grid;
    place-items: center;
    color: var(--button-text-inactive-color);
    font-size: calc(0.28 * var(--menu-t));
    line-height: 0.9;
    text-align: center;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i {
    --matrix-cell-color: 116 155 212;
    display: grid;
    min-width: 0;
    place-items: center;
    color: rgb(238 244 255 / 88%);
    border: 1px solid rgb(var(--matrix-cell-color) / 34%);
    border-radius: 5px;
    background:
        linear-gradient(
            135deg,
            rgb(var(--matrix-cell-color) / var(--matrix-cell-alpha)),
            rgb(var(--matrix-cell-color) / 5%)
        );
    font-size: calc(0.42 * var(--menu-t));
    font-style: normal;
    font-variant-numeric: tabular-nums;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i.is-diagonal {
    --matrix-cell-color: 170 178 193;
    font-weight: 700;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i.is-negative {
    --matrix-cell-color: 216 102 123;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(2),
:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(4) {
    --matrix-cell-color: 220 128 98;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(6),
:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(8) {
    --matrix-cell-color: 83 180 143;
}

:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(3),
:is(#props_container, #floating_panels) .channel-crosstalk-matrix i:nth-of-type(7) {
    --matrix-cell-color: 113 137 222;
}

:is(#props_container, #floating_panels) .channel-crosstalk-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .channel-crosstalk-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control--red-green input[type="range"] {
    accent-color: #d37d60;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control--green-blue input[type="range"] {
    accent-color: #55ad8b;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control--blue-red input[type="range"] {
    accent-color: #7189de;
}

:is(#props_container, #floating_panels) .channel-crosstalk-control--strength input[type="range"] {
    accent-color: #9a7bd1;
}

:is(#props_container, #floating_panels) .channel-crosstalk-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .channel-crosstalk-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.4 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .channel-crosstalk-looks button:hover {
    border-color: rgb(154 123 209 / 48%);
    background: rgb(154 123 209 / 13%);
}

:is(#props_container, #floating_panels) .channel-crosstalk-looks .channel-crosstalk-neutral {
    border-color: rgb(154 123 209 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .channel-crosstalk-matrix {
    border-color: rgb(0 0 0 / 10%);
    background: rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .channel-crosstalk-matrix i {
    color: rgb(22 28 39 / 85%);
}

body.light-theme :is(#props_container, #floating_panels) .channel-crosstalk-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Filmic Tone */
:is(#props_container, #floating_panels) .filmic-tone-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .filmic-tone-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .filmic-tone-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .filmic-tone-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .filmic-tone-graph {
    display: grid;
    overflow: hidden;
    min-width: 0;
    padding: 7px 7px 5px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 82%, rgb(91 132 184 / 13%), transparent 42%),
        radial-gradient(circle at 82% 18%, rgb(210 160 92 / 12%), transparent 42%),
        rgb(0 0 0 / 14%);
    gap: 4px;
}

:is(#props_container, #floating_panels) .filmic-tone-graph svg {
    display: block;
    width: 100%;
    height: 78px;
    overflow: visible;
}

:is(#props_container, #floating_panels) .filmic-tone-grid {
    fill: none;
    stroke: rgb(255 255 255 / 7%);
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .filmic-tone-reference {
    fill: none;
    stroke: rgb(255 255 255 / 16%);
    stroke-dasharray: 3 3;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .filmic-tone-curve {
    fill: none;
    stroke: #a98adf;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgb(169 138 223 / 38%));
}

:is(#props_container, #floating_panels) .filmic-tone-pivot {
    stroke: rgb(255 255 255 / 22%);
    stroke-dasharray: 2 2;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .filmic-tone-pivot-point {
    fill: #c3a6f0;
    stroke: rgb(18 18 24 / 80%);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .filmic-tone-zones {
    display: grid;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    grid-template-columns: repeat(3, 1fr);
}

:is(#props_container, #floating_panels) .filmic-tone-zones small:nth-child(2) {
    text-align: center;
}

:is(#props_container, #floating_panels) .filmic-tone-zones small:last-child {
    text-align: right;
}

:is(#props_container, #floating_panels) .filmic-tone-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .filmic-tone-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .filmic-tone-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .filmic-tone-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .filmic-tone-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .filmic-tone-control--toe input[type="range"] {
    accent-color: #5f87b9;
}

:is(#props_container, #floating_panels) .filmic-tone-control--shoulder input[type="range"] {
    accent-color: #d0a15f;
}

:is(#props_container, #floating_panels) .filmic-tone-control--contrast input[type="range"],
:is(#props_container, #floating_panels) .filmic-tone-control--pivot input[type="range"] {
    accent-color: #a98adf;
}

:is(#props_container, #floating_panels) .filmic-tone-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .filmic-tone-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.4 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .filmic-tone-looks button:hover {
    border-color: rgb(169 138 223 / 48%);
    background: rgb(169 138 223 / 13%);
}

:is(#props_container, #floating_panels) .filmic-tone-looks .filmic-tone-neutral {
    border-color: rgb(169 138 223 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .filmic-tone-graph {
    border-color: rgb(0 0 0 / 10%);
    background:
        radial-gradient(circle at 18% 82%, rgb(91 132 184 / 10%), transparent 42%),
        radial-gradient(circle at 82% 18%, rgb(210 160 92 / 10%), transparent 42%),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .filmic-tone-grid {
    stroke: rgb(0 0 0 / 9%);
}

body.light-theme :is(#props_container, #floating_panels) .filmic-tone-reference,
body.light-theme :is(#props_container, #floating_panels) .filmic-tone-pivot {
    stroke: rgb(0 0 0 / 23%);
}

body.light-theme :is(#props_container, #floating_panels) .filmic-tone-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Hue Separation */
:is(#props_container, #floating_panels) .hue-separation-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .hue-separation-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .hue-separation-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .hue-separation-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .compact-editor-panel {
    display: grid;
    min-width: 0;
    padding: 8px;
    gap: 7px;
}

:is(#props_container, #floating_panels) .compact-editor-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .compact-editor-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .compact-editor-intro span,
:is(#props_container, #floating_panels) .compact-editor-hint {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .compact-editor-hint {
    padding-left: 1px;
}

:is(#props_container, #floating_panels) .compact-editor-stage {
    position: relative;
    min-width: 0;
    height: 230px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 8px;
    background:
        radial-gradient(circle at center, rgb(255 255 255 / 4%), transparent 64%),
        rgb(0 0 0 / 16%);
    box-shadow: inset 0 1px 10px rgb(0 0 0 / 18%);
}

:is(#props_container, #floating_panels) .compact-editor-panel--volume .compact-editor-stage {
    height: 206px;
}

:is(#props_container, #floating_panels) .compact-editor-stage .main-panel-content-host {
    height: 100%;
    background: transparent;
}

:is(#props_container, #floating_panels) .compact-editor-panel--levels #levels_block {
    overflow: hidden;
    border-radius: 7px;
}

:is(#props_container, #floating_panels) .volume-editor-label {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.4 * var(--menu-t));
    font-weight: 620;
    line-height: 18px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .volume-canvas {
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 7px;
    background: rgb(0 0 0 / 18%);
    box-shadow:
        0 3px 10px rgb(0 0 0 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 7%);
}

:is(#props_container, #floating_panels) .volume-editor-actions {
    gap: 3px;
}

:is(#props_container, #floating_panels) .volume-editor-actions :is(.cp-button, .cp-button2) {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
}

:is(#props_container, #floating_panels) .hue-separation-map {
    display: grid;
    min-width: 0;
    padding: 8px 8px 5px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        radial-gradient(circle at center, rgb(255 255 255 / 4%), transparent 58%),
        rgb(0 0 0 / 14%);
    gap: 5px;
}

:is(#props_container, #floating_panels) .hue-separation-wheel {
    --hue-gate-size: 40%;
    position: relative;
    display: grid;
    width: 126px;
    height: 126px;
    margin: 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 54%, rgb(0 0 0 / 34%) 55% 61%, transparent 62%),
        conic-gradient(
            from 0deg,
            #ef5959,
            #e9bb52,
            #70cf68,
            #50cdb2,
            #559ee5,
            #8169df,
            #d35fc8,
            #ef5959
        );
    box-shadow: inset 0 0 14px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 14%);
}

:is(#props_container, #floating_panels) .hue-separation-wheel::after {
    position: absolute;
    z-index: 1;
    width: var(--hue-gate-size);
    height: var(--hue-gate-size);
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 38%, rgb(255 255 255 / 9%), transparent 55%),
        rgb(29 31 38 / 92%);
    box-shadow: 0 0 0 2px rgb(0 0 0 / 13%);
    content: "";
    transition: width 120ms ease-out, height 120ms ease-out;
}

:is(#props_container, #floating_panels) .hue-separation-axis {
    position: absolute;
    z-index: 2;
    top: 6px;
    bottom: 6px;
    left: calc(50% - 1px);
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, white 0 10%, transparent 10% 90%, white 90%);
    box-shadow: 0 0 3px rgb(0 0 0 / 60%);
    opacity: 0.8;
}

:is(#props_container, #floating_panels) .hue-separation-wheel i {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 1.5px solid rgb(255 255 255 / 86%);
    border-radius: 50%;
    background: var(--hue-marker-color);
    box-shadow: 0 1px 3px rgb(0 0 0 / 64%);
    transform:
        translate(-50%, -50%)
        rotate(var(--hue-marker-angle))
        translateY(-47px);
    transition: transform 120ms ease-out;
}

:is(#props_container, #floating_panels) .hue-separation-wheel > b {
    position: absolute;
    z-index: 4;
    top: 45%;
    left: 50%;
    color: var(--button-text-color);
    font-size: calc(0.72 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: translate(-50%, -50%);
}

:is(#props_container, #floating_panels) .hue-separation-wheel > small {
    position: absolute;
    z-index: 4;
    top: 59%;
    left: 50%;
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
    line-height: 1;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

:is(#props_container, #floating_panels) .hue-separation-legend {
    display: flex;
    justify-content: space-between;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
}

:is(#props_container, #floating_panels) .hue-separation-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .hue-separation-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .hue-separation-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .hue-separation-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .hue-separation-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .hue-separation-control--amount input[type="range"] {
    accent-color: #b171d5;
}

:is(#props_container, #floating_panels) .hue-separation-control--axis input[type="range"] {
    accent-color: #e39765;
}

:is(#props_container, #floating_panels) .hue-separation-control--gate input[type="range"] {
    accent-color: #62a8bc;
}

:is(#props_container, #floating_panels) .hue-separation-control--strength input[type="range"] {
    accent-color: #8d77d5;
}

:is(#props_container, #floating_panels) .hue-separation-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .hue-separation-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .hue-separation-looks button:hover {
    border-color: rgb(177 113 213 / 48%);
    background: rgb(177 113 213 / 13%);
}

:is(#props_container, #floating_panels) .hue-separation-looks .hue-separation-neutral {
    border-color: rgb(177 113 213 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .hue-separation-map {
    border-color: rgb(0 0 0 / 10%);
    background:
        radial-gradient(circle at center, rgb(255 255 255 / 22%), transparent 58%),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .hue-separation-wheel::after {
    border-color: rgb(0 0 0 / 13%);
    background:
        radial-gradient(circle at 42% 38%, rgb(255 255 255 / 55%), transparent 55%),
        rgb(225 228 234 / 95%);
}

body.light-theme :is(#props_container, #floating_panels) .hue-separation-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Split Toning */
:is(#props_container, #floating_panels) .split-toning-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .split-toning-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .split-toning-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .split-toning-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .split-toning-map {
    --split-shadow-color: hsl(220 14% 48%);
    --split-highlight-color: hsl(40 14% 62%);
    --split-balance: 50%;
    display: grid;
    min-width: 0;
    align-items: center;
    padding: 11px 10px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 55%),
        rgb(0 0 0 / 14%);
    grid-template-columns: minmax(58px, 1fr) minmax(70px, 1.5fr) minmax(58px, 1fr);
    gap: 9px;
}

:is(#props_container, #floating_panels) .split-toning-chip {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 2px;
}

:is(#props_container, #floating_panels) .split-toning-chip > i {
    width: 34px;
    height: 34px;
    border: 2px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 5px rgb(0 0 0 / 16%),
        0 2px 7px rgb(0 0 0 / 28%);
}

:is(#props_container, #floating_panels) .split-toning-chip--shadow > i {
    background: var(--split-shadow-color);
}

:is(#props_container, #floating_panels) .split-toning-chip--highlight > i {
    background: var(--split-highlight-color);
}

:is(#props_container, #floating_panels) .split-toning-chip strong {
    overflow: hidden;
    max-width: 100%;
    color: var(--button-text-color);
    font-size: calc(0.39 * var(--menu-t));
    text-overflow: ellipsis;
}

:is(#props_container, #floating_panels) .split-toning-chip small {
    overflow: hidden;
    max-width: 100%;
    color: var(--button-text-inactive-color);
    font-size: calc(0.32 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .split-toning-ramp {
    position: relative;
    display: block;
    height: 18px;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 999px;
    background:
        linear-gradient(
            to right,
            var(--split-shadow-color),
            #777 48%,
            var(--split-highlight-color)
        );
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 34%);
}

:is(#props_container, #floating_panels) .split-toning-balance-marker {
    position: absolute;
    top: 50%;
    left: var(--split-balance);
    width: 7px;
    height: 24px;
    border: 1.5px solid rgb(255 255 255 / 88%);
    border-radius: 4px;
    background: rgb(31 33 39 / 92%);
    box-shadow: 0 1px 4px rgb(0 0 0 / 52%);
    transform: translate(-50%, -50%);
    transition: left 120ms ease-out;
}

:is(#props_container, #floating_panels) .split-toning-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .split-toning-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .split-toning-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .split-toning-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .split-toning-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .split-toning-control--shadow-hue input[type="range"],
:is(#props_container, #floating_panels) .split-toning-control--highlight-hue input[type="range"] {
    accent-color: #9f78d7;
}

:is(#props_container, #floating_panels) .split-toning-control--shadow-saturation input[type="range"] {
    accent-color: var(--split-shadow-color, #6087c6);
}

:is(#props_container, #floating_panels) .split-toning-control--highlight-saturation input[type="range"] {
    accent-color: var(--split-highlight-color, #d9a75f);
}

:is(#props_container, #floating_panels) .split-toning-control--balance input[type="range"] {
    accent-color: #a783ca;
}

:is(#props_container, #floating_panels) .split-toning-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .split-toning-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .split-toning-looks button:hover {
    border-color: rgb(167 131 202 / 48%);
    background: rgb(167 131 202 / 13%);
}

:is(#props_container, #floating_panels) .split-toning-looks .split-toning-neutral {
    border-color: rgb(167 131 202 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .split-toning-map {
    border-color: rgb(0 0 0 / 10%);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 44%), transparent 55%),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .split-toning-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Color Density */
:is(#props_container, #floating_panels) .color-density-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .color-density-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .color-density-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .color-density-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .color-density-graph {
    display: grid;
    min-width: 0;
    padding: 8px 8px 7px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(228 170 92 / 5%), transparent 48%, rgb(95 130 207 / 6%)),
        rgb(0 0 0 / 14%);
    gap: 4px;
}

:is(#props_container, #floating_panels) .color-density-graph svg {
    display: block;
    width: 100%;
    height: 96px;
    overflow: visible;
}

:is(#props_container, #floating_panels) .color-density-grid {
    fill: none;
    stroke: rgb(255 255 255 / 7%);
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .color-density-zero {
    fill: none;
    stroke: rgb(255 255 255 / 22%);
    stroke-dasharray: 3 3;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .color-density-curve-glow,
:is(#props_container, #floating_panels) .color-density-curve {
    fill: none;
    stroke: url("#color-density-gradient");
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .color-density-curve-glow {
    stroke-width: 7;
    opacity: 0.14;
}

:is(#props_container, #floating_panels) .color-density-curve {
    stroke-width: 2;
}

:is(#props_container, #floating_panels) .color-density-point {
    fill: var(--main-bg-color-props, #292929);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .color-density-point--shadow {
    stroke: #5f82cf;
}

:is(#props_container, #floating_panels) .color-density-point--midtone {
    stroke: #b26ec4;
}

:is(#props_container, #floating_panels) .color-density-point--highlight {
    stroke: #e4aa5c;
}

:is(#props_container, #floating_panels) .color-density-zones {
    display: flex;
    justify-content: space-between;
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
}

:is(#props_container, #floating_panels) .color-density-zones small:nth-child(2) {
    transform: translateX(-4px);
}

:is(#props_container, #floating_panels) .color-density-gate {
    position: relative;
    display: flex;
    height: 7px;
    align-items: center;
    margin-top: 3px;
    overflow: visible;
    border-radius: 999px;
    background: linear-gradient(to right, #777, #8867b8 48%, #d68f5c);
}

:is(#props_container, #floating_panels) .color-density-gate > i {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: rgb(24 26 31 / 88%);
    box-shadow: 1px 0 0 rgb(255 255 255 / 72%);
    transition: width 120ms ease-out;
}

:is(#props_container, #floating_panels) .color-density-gate > small {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 8px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.3 * var(--menu-t));
    font-variant-numeric: tabular-nums;
}

:is(#props_container, #floating_panels) .color-density-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .color-density-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .color-density-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .color-density-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .color-density-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .color-density-control--shadows input[type="range"] {
    accent-color: #5f82cf;
}

:is(#props_container, #floating_panels) .color-density-control--midtones input[type="range"] {
    accent-color: #b26ec4;
}

:is(#props_container, #floating_panels) .color-density-control--highlights input[type="range"] {
    accent-color: #e4aa5c;
}

:is(#props_container, #floating_panels) .color-density-control--gate input[type="range"] {
    accent-color: #8b74c9;
}

:is(#props_container, #floating_panels) .color-density-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .color-density-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .color-density-looks button:hover {
    border-color: rgb(178 110 196 / 48%);
    background: rgb(178 110 196 / 13%);
}

:is(#props_container, #floating_panels) .color-density-looks .color-density-neutral {
    border-color: rgb(178 110 196 / 28%);
}

body.light-theme :is(#props_container, #floating_panels) .color-density-graph {
    border-color: rgb(0 0 0 / 10%);
    background:
        linear-gradient(180deg, rgb(228 170 92 / 8%), transparent 48%, rgb(95 130 207 / 8%)),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .color-density-grid {
    stroke: rgb(0 0 0 / 8%);
}

body.light-theme :is(#props_container, #floating_panels) .color-density-zero {
    stroke: rgb(0 0 0 / 24%);
}

body.light-theme :is(#props_container, #floating_panels) .color-density-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Chroma Compression */
:is(#props_container, #floating_panels) .chroma-compression-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .chroma-compression-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .chroma-compression-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .chroma-compression-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .chroma-compression-graph {
    display: grid;
    min-width: 0;
    padding: 8px 8px 7px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgb(240 111 145 / 10%), transparent 42%),
        linear-gradient(135deg, rgb(139 143 153 / 5%), rgb(143 120 216 / 7%)),
        rgb(0 0 0 / 14%);
    gap: 4px;
}

:is(#props_container, #floating_panels) .chroma-compression-graph svg {
    display: block;
    width: 100%;
    height: 98px;
    overflow: visible;
}

:is(#props_container, #floating_panels) .chroma-compression-grid,
:is(#props_container, #floating_panels) .chroma-compression-reference,
:is(#props_container, #floating_panels) .chroma-compression-pivot-line {
    fill: none;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .chroma-compression-grid {
    stroke: rgb(255 255 255 / 7%);
    stroke-width: 0.7;
}

:is(#props_container, #floating_panels) .chroma-compression-reference {
    stroke: rgb(255 255 255 / 18%);
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

:is(#props_container, #floating_panels) .chroma-compression-curve-glow,
:is(#props_container, #floating_panels) .chroma-compression-curve {
    fill: none;
    stroke: url("#chroma-compression-gradient");
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .chroma-compression-curve-glow {
    stroke-width: 7;
    opacity: 0.15;
}

:is(#props_container, #floating_panels) .chroma-compression-curve {
    stroke-width: 2;
}

:is(#props_container, #floating_panels) .chroma-compression-pivot-line {
    stroke: rgb(190 170 255 / 34%);
    stroke-dasharray: 2 2;
    stroke-width: 1;
}

:is(#props_container, #floating_panels) .chroma-compression-pivot-point {
    fill: var(--main-bg-color-props, #292929);
    stroke: #b9a5ff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

:is(#props_container, #floating_panels) .chroma-compression-axis {
    display: flex;
    justify-content: space-between;
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
}

:is(#props_container, #floating_panels) .chroma-compression-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .chroma-compression-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(96px, 0.44fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .chroma-compression-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .chroma-compression-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .chroma-compression-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .chroma-compression-control--muted input[type="range"] {
    accent-color: #8f78d8;
}

:is(#props_container, #floating_panels) .chroma-compression-control--vivid input[type="range"] {
    accent-color: #f06f91;
}

:is(#props_container, #floating_panels) .chroma-compression-control--pivot input[type="range"],
:is(#props_container, #floating_panels) .chroma-compression-control--softness input[type="range"] {
    accent-color: #b9a5ff;
}

:is(#props_container, #floating_panels) .chroma-compression-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .chroma-compression-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .chroma-compression-looks button:hover {
    border-color: rgb(143 120 216 / 52%);
    background: rgb(143 120 216 / 14%);
}

:is(#props_container, #floating_panels) .chroma-compression-looks .chroma-compression-neutral {
    border-color: rgb(185 165 255 / 27%);
}

body.light-theme :is(#props_container, #floating_panels) .chroma-compression-graph {
    border-color: rgb(0 0 0 / 10%);
    background:
        radial-gradient(circle at 100% 0%, rgb(240 111 145 / 11%), transparent 42%),
        linear-gradient(135deg, rgb(139 143 153 / 7%), rgb(143 120 216 / 9%)),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .chroma-compression-grid {
    stroke: rgb(0 0 0 / 8%);
}

body.light-theme :is(#props_container, #floating_panels) .chroma-compression-reference {
    stroke: rgb(0 0 0 / 20%);
}

body.light-theme :is(#props_container, #floating_panels) .chroma-compression-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Monochrome Mixer */
:is(#props_container, #floating_panels) .monochrome-mixer-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-intro {
    display: grid;
    gap: 3px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-intro strong {
    color: var(--button-text-color);
    font-size: calc(0.58 * var(--menu-t));
    font-weight: 680;
}

:is(#props_container, #floating_panels) .monochrome-mixer-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.44 * var(--menu-t));
    line-height: 1.35;
}

:is(#props_container, #floating_panels) .monochrome-mixer-visual {
    display: grid;
    min-width: 0;
    padding: 10px 10px 8px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgb(255 100 105 / 5%), transparent 35%),
        linear-gradient(225deg, rgb(90 135 238 / 7%), transparent 42%),
        rgb(0 0 0 / 14%);
    gap: 9px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-bars {
    display: grid;
    height: 82px;
    min-width: 0;
    padding: 0 12%;
    align-items: end;
    border-bottom: 1px solid rgb(255 255 255 / 17%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13%;
}

:is(#props_container, #floating_panels) .monochrome-mixer-bars > span {
    position: relative;
    display: flex;
    height: 62px;
    min-width: 0;
    align-items: end;
    justify-content: center;
}

:is(#props_container, #floating_panels) .monochrome-mixer-bar {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 10px rgb(255 255 255 / 8%);
    transition: height 120ms ease-out;
}

:is(#props_container, #floating_panels) .monochrome-mixer-bar--red {
    background: linear-gradient(180deg, #ee7478, #74383e);
}

:is(#props_container, #floating_panels) .monochrome-mixer-bar--green {
    background: linear-gradient(180deg, #80cf83, #37683e);
}

:is(#props_container, #floating_panels) .monochrome-mixer-bar--blue {
    background: linear-gradient(180deg, #7299ed, #354d81);
}

:is(#props_container, #floating_panels) .monochrome-mixer-bars small {
    position: absolute;
    top: 66px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .monochrome-mixer-blend {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-blend > span {
    position: relative;
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #e46d70, #74c679 50%, #658de2);
    grid-column: 1 / -1;
}

:is(#props_container, #floating_panels) .monochrome-mixer-blend > span i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #666, #d8d8d8);
    box-shadow: -1px 0 rgb(255 255 255 / 75%);
    transition: width 120ms ease-out;
}

:is(#props_container, #floating_panels) .monochrome-mixer-blend small,
:is(#props_container, #floating_panels) .monochrome-mixer-blend strong {
    color: var(--button-text-inactive-color);
    font-size: calc(0.34 * var(--menu-t));
    font-weight: 500;
}

:is(#props_container, #floating_panels) .monochrome-mixer-blend strong {
    justify-self: center;
    color: var(--button-text-color);
    font-variant-numeric: tabular-nums;
}

:is(#props_container, #floating_panels) .monochrome-mixer-controls {
    display: grid;
    gap: 8px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(96px, 0.44fr) minmax(0, 1fr);
    gap: 8px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control > div:first-child {
    display: grid;
    min-width: 0;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control strong {
    color: var(--button-text-color);
    font-size: calc(0.5 * var(--menu-t));
}

:is(#props_container, #floating_panels) .monochrome-mixer-control small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.36 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control--amount input[type="range"] {
    accent-color: #bbb;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control--red input[type="range"] {
    accent-color: #ee7478;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control--green input[type="range"] {
    accent-color: #80cf83;
}

:is(#props_container, #floating_panels) .monochrome-mixer-control--blue input[type="range"] {
    accent-color: #7299ed;
}

:is(#props_container, #floating_panels) .monochrome-mixer-looks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels) .monochrome-mixer-looks button {
    overflow: hidden;
    min-width: 0;
    min-height: 25px;
    padding: 3px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background: rgb(255 255 255 / 5%);
    font-size: calc(0.38 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#props_container, #floating_panels) .monochrome-mixer-looks button:hover {
    border-color: rgb(190 190 190 / 45%);
    background: rgb(255 255 255 / 11%);
}

:is(#props_container, #floating_panels) .monochrome-mixer-looks .monochrome-mixer-neutral {
    border-color: rgb(190 190 190 / 26%);
}

body.light-theme :is(#props_container, #floating_panels) .monochrome-mixer-visual {
    border-color: rgb(0 0 0 / 10%);
    background:
        linear-gradient(135deg, rgb(230 80 90 / 8%), transparent 35%),
        linear-gradient(225deg, rgb(70 110 220 / 9%), transparent 42%),
        rgb(0 0 0 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .monochrome-mixer-bars {
    border-bottom-color: rgb(0 0 0 / 18%);
}

body.light-theme :is(#props_container, #floating_panels) .monochrome-mixer-looks button {
    border-color: rgb(0 0 0 / 11%);
    background: rgb(0 0 0 / 3%);
}

/* Adjustment history and named checkpoints */
#props_container .history-panel {
    --history-accent: 101 177 255;
    display: grid;
    min-width: 0;
    gap: 12px;
}

#props_container .history-timeline,
#props_container .history-checkpoints {
    display: grid;
    min-width: 0;
    gap: 8px;
}

#props_container .history-timeline > header,
#props_container .history-checkpoints > header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#props_container .history-timeline > header strong,
#props_container .history-checkpoints > header strong {
    color: var(--button-text-color);
    font-size: calc(0.62 * var(--menu-t));
    font-weight: 680;
}

#props_container .history-timeline > header > span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.46 * var(--menu-t));
    font-variant-numeric: tabular-nums;
}

#props_container .history-shortcut-hint {
    display: grid;
    gap: 5px;
}

#props_container .history-shortcut-hint > span {
    display: flex;
    align-items: center;
    gap: 3px;
}

#props_container .history-shortcut-hint kbd {
    min-width: 18px;
    padding: 1px 4px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 4px;
    background: rgb(255 255 255 / 6%);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 22%);
    font: inherit;
    font-size: calc(0.4 * var(--menu-t));
    line-height: 1.25;
    text-align: center;
}

body.light-theme #props_container .history-shortcut-hint kbd {
    border-color: rgb(0 0 0 / 14%);
    background: rgb(0 0 0 / 4%);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
}

#props_container .history-checkpoints > header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

#props_container .history-checkpoints > header small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.42 * var(--menu-t));
}

#props_container .history-timeline > input[type="range"] {
    width: 100%;
    margin: 2px 0;
    accent-color: rgb(var(--history-accent));
    pointer-events: auto;
}

#props_container .history-state-list,
#props_container .history-checkpoint-list {
    display: flex;
    max-height: min(230px, calc(100vh - 245px));
    min-height: 0;
    flex-direction: column;
    gap: 5px;
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#props_container .history-state {
    display: grid;
    min-height: 30px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    color: var(--button-text-inactive-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 56%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--main-bg-color-props) 88%, var(--main-bg-color-deep));
    font: inherit;
    font-size: calc(0.5 * var(--menu-t));
    text-align: left;
    cursor: pointer;
}

#props_container .history-state:hover,
#props_container .history-state--active {
    color: var(--button-text-color);
    border-color: rgb(var(--history-accent) / 45%);
    background: rgb(var(--history-accent) / 9%);
}

#props_container .history-state--active {
    box-shadow: inset 2px 0 rgb(var(--history-accent));
}

#props_container .history-state-index {
    color: rgb(var(--history-accent));
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

#props_container .history-checkpoint-create {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

#props_container .history-checkpoint-create input,
#props_container .history-checkpoint-copy input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 4px 7px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--main-bg-color-props) 82%, var(--main-bg-color-deep));
    font: inherit;
    font-size: calc(0.5 * var(--menu-t));
    pointer-events: auto;
}

#props_container .history-checkpoint-create input:focus,
#props_container .history-checkpoint-copy input:focus {
    border-color: rgb(var(--history-accent) / 70%);
    outline: 2px solid rgb(var(--history-accent) / 18%);
}

#props_container .history-checkpoint-create button {
    min-width: 54px;
    min-height: 30px;
    pointer-events: auto;
}

#props_container .history-checkpoint {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--button-border-color) 56%, transparent);
    border-radius: 7px;
    background:
      linear-gradient(100deg, rgb(var(--history-accent) / 8%), transparent 65%),
      color-mix(in srgb, var(--main-bg-color-props) 88%, var(--main-bg-color-deep));
}

#props_container .history-checkpoint-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

#props_container .history-checkpoint-copy input {
    height: 24px;
    padding: 2px 4px;
    border-color: transparent;
    background: transparent;
    font-weight: 650;
}

#props_container .history-checkpoint-copy small {
    padding-left: 5px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.39 * var(--menu-t));
}

#props_container .history-checkpoint-actions {
    display: flex;
    gap: 4px;
}

#props_container .history-checkpoint-actions button {
    min-width: 28px;
    min-height: 27px;
    padding: 3px 7px;
    pointer-events: auto;
}

#props_container .history-empty {
    padding: 12px 10px;
    color: var(--button-text-inactive-color);
    border: 1px dashed color-mix(in srgb, var(--button-border-color) 52%, transparent);
    border-radius: 7px;
    font-size: calc(0.46 * var(--menu-t));
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 330px) {
    :is(#props_container, #floating_panels) .adjustment-layer-main {
        grid-template-columns: 24px 30px minmax(0, 1fr);
    }
}

.topcoat-select {
    appearance: none;
}

.topcoat-button-bar .topcoat-button {
    border: 0.5 solid;
}


#license_expire_info {
    position: absolute;
    z-index: 9000;
    right: 3px;
    bottom: 3px;
    font-size: 10px;
    color: grey;
}


#license_expire_info:hover {
    color: white;
}

select.ui-selectmenu-open-custom {
    border: 1px solid #ffffff99;
}

button.ui-button-open-custom {
    border: 1px solid #ffffff99;
}

.ui-selectmenu-open {
    z-index: 9999;
}

.ui-selectmenu-disabled {
    color: var(--button-text-inactive-color);
}

/* disable text for AL angle offset */
body.projection-ab #props_container tr.not-ab,
body.projection-cl #props_container tr.not-cl,
body.projection-wb #props_container tr.not-wb,
body.projection-bp #props_container tr.not-bp,
body.grid-square #props_container tr.not-grid-square,
body.grid-round #props_container tr.not-grid-round,
body.grid-round2 #props_container tr.not-grid-round2,
body.no-support-nits tr.feature-nits,
body.no-support-illuminant tr.feature-illuminant,
body.no-support-nits tr.feature-nits select,
body.no-support-illuminant tr.feature-illuminant select
 {
    color: var(--button-text-inactive-color);
}

#main_tabs {
    font-size: var(--tab-text-size);
    color: var(--button-text-inactive-color);
}

#main_tabs .tab-selected {
    color: var(--button-text-color);
}

#main_tabs .tab-header:hover {
    color: var(--button-text-hover-color);
}

#main_tabs_react {
    position: fixed;
    z-index: 4200;
    inset: 0;
    pointer-events: none;
}

#main_tabs_sep {
    display: none;
}

#main_tabs_react .main-tabs-floating-window {
    position: fixed;
    display: flex;
    width: min(720px, calc(100vw - 16px));
    max-height: none;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 7px;
    background: var(--main-bg-color, #292929);
    box-shadow: 0 14px 38px rgb(0 0 0 / 48%);
    pointer-events: auto;
}

:is(#main_tabs_react, #props_container, #floating_panels) .main-panel-content-host {
    position: relative;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--main-bg-color, #292929);
}

:is(#main_tabs_react, #props_container, #floating_panels) .main-pane-react-content,
#main_tabs_react #legacy_main_panes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

:is(#main_tabs_react, #props_container, #floating_panels) .main-pane-react-content > *,
#main_tabs_react #buy_buttons_panel,
:is(#main_tabs_react, #props_container) #levels_buttons_panel,
:is(#main_tabs_react, #props_container) #levels_block {
    pointer-events: auto;
}

#main_tabs_react #buy_buttons_panel {
    position: absolute;
    z-index: 10;
    inset: 0;
    box-sizing: border-box;
    overflow: auto;
}

#main_panel_content_host_buy #buy_buttons_panel,
#main_panel_content_host_levels #levels_buttons_panel,
#main_panel_content_host_levels #levels_block {
    display: block !important;
}

:is(#main_tabs_react, #props_container) #levels_buttons_panel {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
}

:is(#main_tabs_react, #props_container) #big_canvas_block {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

#main_tabs_react .main-tabs-floating-tabs {
    box-sizing: border-box;
    display: flex;
    min-height: 38px;
    gap: 2px;
    padding: 5px 66px 0 4px;
    overflow: hidden;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%));
}

#main_tabs_react .preset-group-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: rgb(130 190 255 / 88%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#main_tabs_react .main-tabs-accordion-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(0 0 0 / 8%);
}

#main_tabs_react .main-tabs-accordion {
    height: auto;
    min-height: 100%;
}

#main_tabs_react .main-tabs-accordion-header {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 9px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
    text-align: left;
    cursor: pointer;
}

#main_tabs_react .main-tabs-accordion-header.preset-group-header-hidden {
    color: var(--button-text-inactive-color);
    border-radius: 6px;
    background: rgb(0 0 0 / 8%);
}

#main_tabs_react .main-tabs-accordion-header:hover {
    color: var(--button-text-hover-color);
    background: rgb(255 255 255 / 8%);
}

#main_tabs_react .main-tabs-accordion-header .preset-group-chevron {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

#main_tabs_react .main-tabs-accordion-header.preset-group-header-hidden .preset-group-chevron {
    transform: rotate(-45deg);
}

#main_tabs_react .main-tabs-accordion-header.preset-group-header-hidden .preset-group-icon {
    color: var(--button-text-inactive-color);
}

#main_tabs_react .main-tabs-accordion-header .preset-group-heading,
#main_tabs_react .main-tabs-accordion-header .preset-group-title {
    display: block;
    min-width: 0;
}

#main_tabs_react .main-tabs-accordion .main-panel-content-host {
    min-height: 220px;
    flex: 1 0 220px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

#main_tabs_react .preset-group-controls {
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 4px;
}

#main_tabs_react .preset-group-control {
    display: grid;
    width: 25px;
    height: 25px;
    padding: 0;
    place-items: center;
    color: var(--button-text-inactive-color);
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

#main_tabs_react .preset-group-control:hover {
    color: var(--button-text-color);
    background: rgb(255 255 255 / 10%);
}

#main_tabs_react .preset-group-grip {
    cursor: grab;
    touch-action: none;
}

#main_tabs_react .preset-group-grip:active {
    cursor: grabbing;
}

#main_tabs_react .preset-group-resize-handle {
    position: absolute;
    z-index: 1100;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
}

#main_tabs_react .preset-group-resize-handle::after {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--button-text-inactive-color);
    border-bottom: 2px solid var(--button-text-inactive-color);
    content: '';
}

#main_tabs_react .tab-header {
    box-sizing: border-box;
    min-width: 52px;
    height: 32px;
    flex: 0 1 auto;
    padding: 4px 9px;
    overflow: hidden;
    color: var(--button-text-inactive-color);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: transparent;
    font: inherit;
    font-size: var(--tab-text-size);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

#main_tabs_react .tab-header:hover {
    background: rgb(255 255 255 / 7%);
}

#main_tabs_react .tab-header.tab-selected {
    color: #f2f7ff;
    border-color: rgb(98 168 255 / 42%);
    background: rgb(98 168 255 / 18%);
    box-shadow: inset 0 -3px #62a8ff;
    font-weight: 650;
}

#main_tabs_react .tab-header:focus-visible {
    outline: 2px solid #62a8ff;
    outline-offset: -2px;
}

.levels-modified .tab-pane-levels::first-letter {
    color: green;
}

.mask-modified .tab-pane-mask::first-letter {
    color: green;
}

.curves-modified .tab-pane-curve::first-letter {
    color: green;
}

.curve-editor-stage {
    overflow: visible;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgb(75 148 220 / 9%), transparent 42%),
        linear-gradient(145deg, rgb(255 255 255 / 2%), transparent);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 7%),
        0 8px 24px rgb(0 0 0 / 16%);
}

.curve-editor-host {
    overflow: visible;
}

.curve-lift-wheel-rail {
    position: absolute;
    z-index: 5;
    top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--button-text-color);
    border-left: 1px solid color-mix(in srgb, var(--button-text-color) 14%, transparent);
    background: linear-gradient(90deg, rgb(0 0 0 / 8%), transparent 60%);
}

.curve-lift-wheel-direction {
    width: 20px;
    color: var(--button-text-color);
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    text-align: center;
}

.curve-lift-wheel {
    position: relative;
    box-sizing: border-box;
    width: 28px;
    height: clamp(70px, 32%, 116px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--button-text-color) 38%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgb(0 0 0 / 34%), transparent 24% 72%, rgb(0 0 0 / 38%)),
        color-mix(in srgb, var(--button-bg-color) 86%, var(--curve-accent, #62a8ff) 14%);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 18%),
        inset 0 -1px rgb(0 0 0 / 35%),
        0 4px 12px rgb(0 0 0 / 22%);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.curve-lift-wheel::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 5px 0 7px rgb(0 0 0 / 20%), inset -5px 0 7px rgb(0 0 0 / 24%);
    content: '';
    pointer-events: none;
}

.curve-lift-wheel:hover {
    border-color: color-mix(in srgb, var(--curve-accent, #62a8ff) 68%, var(--button-text-color));
    background-color: color-mix(in srgb, var(--curve-accent, #62a8ff) 18%, var(--button-bg-color));
}

.curve-lift-wheel:focus-visible {
    outline: 2px solid #62a8ff;
    outline-offset: 3px;
}

.curve-lift-wheel__cap {
    position: absolute;
    inset: -12px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    transform: translateY(var(--curve-wheel-shift, 0));
    transition: transform 70ms ease-out;
}

.curve-lift-wheel__cap i {
    display: block;
    height: 2px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--button-text-color) 62%, transparent);
    box-shadow: 0 1px rgb(0 0 0 / 48%);
}

.curve-histogram-canvas {
    clip-path: inset(9px round 4px);
    filter: saturate(1.08);
    opacity: 0.84;
}

.react-curve-spliner {
    display: block;
    overflow: visible;
    outline: none;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.react-curve-spliner:focus-visible {
    filter: drop-shadow(0 0 2px rgb(98 168 255 / 85%));
}

.react-curve-spliner__backdrop {
    stroke: rgb(255 255 255 / 9%);
    stroke-width: 1px;
}

.react-curve-spliner__grid {
    opacity: 0.72;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.react-curve-spliner__diagonal {
    opacity: 0.42;
    stroke-dasharray: 4 5;
}

.react-curve-spliner__histogram-glow {
    opacity: 0.5;
    stroke: rgb(74 174 244);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.react-curve-spliner__histogram-line {
    opacity: 0.92;
    stroke: rgb(137 207 255);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.react-curve-spliner__curve {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.react-curve-spliner__point {
    cursor: grab;
}

.react-curve-spliner__point--grabbed {
    cursor: grabbing;
}

.react-curve-spliner__point-halo,
.react-curve-spliner__point-dot {
    transition: opacity 100ms ease, r 100ms ease;
}

.react-curve-spliner__point--hovered .react-curve-spliner__point-dot,
.react-curve-spliner__point--grabbed .react-curve-spliner__point-dot {
    filter: drop-shadow(0 0 4px rgb(117 190 255 / 78%));
}

.react-curve-spliner__readout rect {
    fill: var(--curve-readout-bg, rgb(12 17 24 / 96%));
    stroke: var(--curve-readout-border, rgb(130 195 255 / 42%));
    stroke-width: 1px;
}

.react-curve-spliner__readout text {
    fill: var(--curve-readout-text, #f3f7ff);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.025em;
}

.volume-modified .tab-pane-volume::first-letter {
    color: green;
}

.curve-toolbar {
    box-sizing: border-box;
    z-index: 20;
    container-type: inline-size;
    display: grid;
    gap: 4px;
    padding: 5px;
    color: var(--props-text-color);
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)),
        var(--main-bg-color);
    box-shadow: 0 5px 14px rgb(0 0 0 / 12%);
}

.curve-toolbar-heading {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.curve-type-menu-control {
    position: relative;
    z-index: 40;
    display: inline-flex;
    min-width: 0;
}

.curve-type-menu-badge {
    width: min(210px, 100%);
    min-width: 154px;
    height: 34px;
    padding: 3px 7px 3px 5px;
    color: var(--button-text-color);
    border-color: color-mix(in srgb, var(--button-border-color) 88%, transparent);
    background: var(--button-bg-color);
    box-shadow: inset 0 1px rgb(255 255 255 / 7%);
    letter-spacing: 0;
}

.curve-type-menu-badge:hover,
.curve-type-menu-badge--open {
    color: var(--button-text-hover-color);
    border-color: color-mix(in srgb, var(--curve-accent) 48%, var(--button-border-color));
    background: color-mix(in srgb, var(--curve-accent) 7%, var(--button-bg-color));
    box-shadow:
        inset 0 1px rgb(255 255 255 / 8%),
        0 0 0 1px color-mix(in srgb, var(--curve-accent) 8%, transparent);
}

.curve-type-menu-badge:focus-visible {
    outline-color: color-mix(in srgb, var(--curve-accent) 78%, white);
}

.curve-type-menu-badge__icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--curve-accent);
    border: 1px solid color-mix(in srgb, var(--curve-accent) 32%, var(--button-border-color));
    border-radius: 4px;
    background: color-mix(in srgb, var(--curve-accent) 8%, transparent);
}

.curve-type-menu-badge__icon .curve-type-icon {
    width: 13px;
    height: 13px;
}

.curve-type-menu-badge__copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
    text-align: left;
}

.curve-type-menu-badge__group,
.curve-type-menu-badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-type-menu-badge__group {
    color: var(--button-text-inactive-color);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}

.curve-type-menu-badge__label {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.05;
}

.curve-type-menu-badge .curve-type-menu-badge__chevron {
    flex: 0 0 auto;
}

.curve-type-menu {
    display: grid;
    width: min(480px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 24px));
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, #5a9fe0 44%, var(--button-border-color));
    border-radius: 14px;
    background:
        linear-gradient(155deg, rgb(87 157 217 / 9%), transparent 180px),
        color-mix(in srgb, var(--main-bg-color) 97%, #10243a);
    box-shadow:
        0 24px 58px rgb(0 0 0 / 44%),
        0 5px 16px rgb(0 0 0 / 26%),
        inset 0 1px rgb(255 255 255 / 7%);
}

.curve-type-menu::before {
    left: var(--curve-menu-arrow-left, 20px);
}

.curve-type-menu--above::before {
    top: auto;
    bottom: -5px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, #4c91cf 52%, var(--button-border-color));
    border-bottom: 1px solid color-mix(in srgb, #4c91cf 52%, var(--button-border-color));
}

.curve-type-menu__header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.curve-type-menu__hero-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #94ceff;
    border: 1px solid rgb(115 189 250 / 26%);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgb(111 187 250 / 20%), rgb(53 112 168 / 7%)),
        rgb(0 0 0 / 10%);
    box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

.curve-type-menu__hero-icon .curve-type-icon {
    width: 19px;
    height: 19px;
}

.curve-type-menu__heading {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.curve-type-menu__heading strong {
    color: var(--button-text-color);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -0.01em;
}

.curve-type-menu__heading small {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-type-menu__close {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: var(--button-text-inactive-color);
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: 20px/1 system-ui, sans-serif;
    cursor: pointer;
}

.curve-type-menu__close:hover,
.curve-type-menu__close:focus-visible {
    color: var(--button-text-color);
    background: rgb(255 255 255 / 8%);
    outline: none;
}

.curve-type-menu__search-row {
    padding: 10px 12px 7px;
}

.curve-type-menu__search {
    display: grid;
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    padding: 0 9px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 9px;
    background: rgb(0 0 0 / 13%);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 16%);
}

.curve-type-menu__search:focus-within {
    color: #93cfff;
    border-color: rgb(91 169 235 / 58%);
    box-shadow:
        0 0 0 2px rgb(74 155 226 / 13%),
        inset 0 1px 3px rgb(0 0 0 / 12%);
}

.curve-type-menu__search > span {
    font-size: 18px;
    line-height: 1;
    transform: translateY(-1px);
}

.curve-type-menu__search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: var(--button-text-color);
    border: 0;
    background: transparent;
    font: 11px/1.2 inherit;
    outline: none;
}

.curve-type-menu__search input::placeholder {
    color: color-mix(in srgb, var(--button-text-inactive-color) 78%, transparent);
}

.curve-type-menu__filters {
    display: flex;
    gap: 5px;
    padding: 0 12px 8px;
    overflow-x: auto;
}

.curve-type-menu__filters button {
    min-width: 0;
    height: 26px;
    flex: 0 0 auto;
    padding: 0 10px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 999px;
    background: rgb(255 255 255 / 3%);
    font: 650 10px/1 inherit;
    cursor: pointer;
}

.curve-type-menu__filters button:hover {
    color: var(--button-text-color);
    border-color: rgb(104 178 238 / 35%);
    background: rgb(99 171 231 / 8%);
}

.curve-type-menu__filters button.is-selected {
    color: #edf8ff;
    border-color: rgb(93 174 239 / 66%);
    background: linear-gradient(180deg, rgb(63 138 199 / 72%), rgb(31 91 143 / 76%));
    box-shadow: inset 0 1px rgb(255 255 255 / 12%);
}

.curve-type-menu__filters button:focus-visible {
    outline: 2px solid #62a8ff;
    outline-offset: 1px;
}

.curve-type-menu__result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    color: color-mix(in srgb, var(--button-text-inactive-color) 90%, transparent);
    border-top: 1px solid rgb(255 255 255 / 5%);
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    background: rgb(0 0 0 / 7%);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.curve-type-menu__result-summary span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.curve-type-menu__result-summary i {
    color: #f1ad50;
    font-size: 7px;
    font-style: normal;
}

.curve-type-menu__results {
    min-height: 120px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.curve-type-menu__empty {
    display: grid;
    min-height: 210px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    padding: 24px;
    color: var(--button-text-inactive-color);
    text-align: center;
}

.curve-type-menu__empty > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #84c5f7;
    border: 1px solid rgb(112 186 244 / 22%);
    border-radius: 50%;
    background: rgb(87 162 221 / 8%);
    font-size: 22px;
}

.curve-type-menu__empty strong {
    color: var(--button-text-color);
    font-size: 12px;
}

.curve-type-menu__empty small {
    max-width: 250px;
    font-size: 10px;
    line-height: 1.4;
}

.curve-type-menu__empty button {
    margin-top: 4px;
    padding: 6px 11px;
    color: #dff2ff;
    border: 1px solid rgb(96 176 239 / 38%);
    border-radius: 7px;
    background: rgb(65 140 199 / 16%);
    font: 650 10px/1 inherit;
    cursor: pointer;
}

.curve-type-menu .curve-type-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 5px 10px 10px;
}

.curve-type-menu .curve-type-group + .curve-type-group {
    margin-top: 3px;
    padding-top: 9px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

.curve-type-menu .curve-type-grid,
.curve-type-menu .curve-type-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.curve-type-menu .curve-type-choice--compact .curve-type-tile {
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 2px 4px 2px 2px;
}

.curve-type-menu .curve-type-choice--compact .curve-type-badge {
    width: 18px;
}

.curve-type-menu .curve-type-choice--compact .curve-type-name {
    display: block;
}

.curve-type-menu .curve-type-group {
    gap: 7px;
    padding: 7px 3px 9px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.curve-type-menu .curve-type-group::before,
.curve-type-menu .curve-type-group::after {
    display: none;
}

.curve-type-menu .curve-type-group:hover {
    border-color: transparent;
    box-shadow: none;
}

.curve-type-menu .curve-type-group-copy {
    align-items: center;
    gap: 7px;
    padding: 0 3px;
}

.curve-type-menu .curve-type-group-copy strong {
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 1.1;
}

.curve-type-menu .curve-type-group-copy strong::before {
    display: none;
}

.curve-type-menu .curve-type-group-copy > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-type-menu .curve-type-group-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.curve-type-menu .curve-type-tile,
.curve-type-menu .curve-type-choice--compact .curve-type-tile {
    min-height: 49px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
    padding: 5px 24px 5px 6px;
    border-color: rgb(255 255 255 / 8%);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
        rgb(255 255 255 / 2%);
}

.curve-type-menu .curve-type-badge,
.curve-type-menu .curve-type-choice--compact .curve-type-badge {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.curve-type-menu .curve-type-icon {
    width: 15px;
    height: 15px;
}

.curve-type-menu .curve-type-copy {
    gap: 4px;
}

.curve-type-menu .curve-type-name {
    font-size: 10px;
    line-height: 1.1;
}

.curve-type-menu .curve-type-description {
    font-size: 8px;
    line-height: 1.2;
}

.curve-type-menu .curve-type-check {
    right: 6px;
    bottom: 6px;
    width: 13px;
    height: 13px;
    font-size: 8px;
}

.curve-type-menu .curve-type-modified {
    top: 5px;
    right: 6px;
}

.curve-toolbar-current {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
}

.curve-toolbar-current strong {
    overflow: hidden;
    color: rgb(139 200 255);
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-toolbar-actions {
    display: flex;
    gap: 4px;
}

.curve-toolbar-action,
.curve-toolbar-secondary {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    height: 29px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%)),
        var(--button-bg-color);
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
    font: inherit;
    cursor: pointer;
}

.curve-toolbar-action:hover,
.curve-toolbar-secondary:hover {
    color: var(--button-text-hover-color);
    border-color: rgb(107 184 255 / 35%);
    background-color: rgb(78 156 235 / 8%);
}

.curve-toolbar-action:active,
.curve-toolbar-secondary:active {
    transform: translateY(1px);
}

.curve-toolbar-action:focus-visible,
.curve-toolbar-secondary:focus-visible,
.curve-construction-radio:has(input:focus-visible),
.curve-points-slider input:focus-visible,
.curve-type-choice:has(input:focus-visible) {
    outline: 2px solid #62a8ff;
    outline-offset: 1px;
}

.curve-toolbar-action--active {
    color: rgb(102 194 116);
    border-color: rgb(88 181 105 / 28%);
    background-color: rgb(61 151 78 / 8%);
}

.curve-toolbar-action-icon {
    display: grid;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    place-items: center;
    font-size: calc(0.58 * var(--menu-t));
    line-height: 1;
}

.curve-toolbar-action-icon::before {
    display: block;
    line-height: 1;
}

.curve-toolbar-action-label {
    font-size: calc(0.51 * var(--menu-t));
    font-weight: 620;
}

.curve-type-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.curve-type-group {
    --curve-group-accent: rgb(112 166 220);
    display: flex;
    position: relative;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 4px 3px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.curve-type-group::before {
    content: none;
}

.curve-type-group::after {
    content: none;
}

.curve-type-group:hover {
    border-color: transparent;
    box-shadow: none;
}

.curve-type-group:nth-child(1) { --curve-group-accent: rgb(226 185 91); }
.curve-type-group:nth-child(2) { --curve-group-accent: rgb(88 190 159); }
.curve-type-group:nth-child(3) { --curve-group-accent: rgb(218 104 151); }
.curve-type-group:nth-child(4) { --curve-group-accent: rgb(85 146 232); }
.curve-type-group:nth-child(5) { --curve-group-accent: rgb(67 188 198); }
.curve-type-group:nth-child(6) { --curve-group-accent: rgb(176 113 229); }

.curve-type-group > * {
    position: relative;
    z-index: 1;
}

.curve-type-group-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    padding: 0 3px;
}

.curve-type-group-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--button-text-inactive-color);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}

.curve-type-group-copy strong::before {
    content: none;
}

.curve-type-group-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    color: var(--curve-group-accent);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.curve-type-group-icon .curve-type-icon {
    width: 13px;
    height: 13px;
}

.curve-type-group-copy > span {
    display: none;
}

.curve-type-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}

.curve-type-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(27px, 1fr));
}

.curve-type-choice {
    min-width: 0;
    border-radius: 4px;
    --curve-accent: rgb(128 190 244);
}

.curve-type-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.curve-type-tile {
    box-sizing: border-box;
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    grid-template-columns: 22px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 5px;
    padding: 3px 5px 3px 3px;
    color: var(--button-text-inactive-color);
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: border-color 100ms ease, background-color 100ms ease, transform 100ms ease;
}

.curve-type-choice:hover .curve-type-tile {
    color: var(--button-text-hover-color);
    border-color: color-mix(in srgb, var(--curve-accent) 24%, transparent);
    background-color: color-mix(in srgb, var(--curve-accent) 7%, var(--button-bg-color));
}

.curve-type-choice:active .curve-type-tile {
    transform: translateY(1px);
}

.curve-type-badge {
    box-sizing: border-box;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--curve-accent);
    border: 1px solid color-mix(in srgb, var(--curve-accent) 24%, var(--button-border-color));
    border-radius: 4px;
    background: color-mix(in srgb, var(--curve-accent) 8%, transparent);
    font-size: calc(0.42 * var(--menu-t));
    font-weight: 760;
    line-height: 1;
}

.curve-type-icon {
    width: 13px;
    height: 13px;
    overflow: visible;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}

.curve-type-icon-fill {
    fill: currentcolor;
    fill-opacity: 0.72;
}

.curve-type-icon-solid {
    fill: currentcolor;
    stroke: none;
}

.curve-type-choice--neutral .curve-type-icon path:last-child {
    fill: currentcolor;
    fill-opacity: 0.22;
}

.curve-type-name {
    overflow: hidden;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-type-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.curve-type-description {
    overflow: hidden;
    color: color-mix(in srgb, var(--button-text-inactive-color) 88%, transparent);
    font-size: 8px;
    font-weight: 480;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curve-type-choice--compact .curve-type-tile {
    grid-template-columns: 1fr;
    padding-inline: 2px;
}

.curve-type-choice--compact .curve-type-badge {
    width: 100%;
}

.curve-type-choice--compact .curve-type-name {
    display: none;
}

.curve-type-check {
    position: static;
    display: grid;
    width: 11px;
    height: 11px;
    place-items: center;
    color: var(--curve-accent);
    border-radius: 0;
    background: transparent;
    font-size: 9px;
    font-weight: 800;
    opacity: 0;
}

.curve-type-modified,
.pane-modified-marker {
    display: grid;
    width: 10px;
    height: 10px;
    place-items: center;
    color: white;
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(255 202 84), rgb(224 130 43));
    box-shadow:
        0 1px 3px rgb(0 0 0 / 45%),
        0 0 0 1px rgb(255 223 144 / 35%);
    font-size: 5px;
    line-height: 1;
}

.curve-type-modified {
    position: absolute;
    z-index: 2;
    top: -3px;
    right: 3px;
}

.pane-modified-marker {
    display: inline-grid;
    flex: 0 0 auto;
    margin-left: 2px;
    vertical-align: 1px;
}

.preset-group-title > .pane-modified-marker {
    margin-left: 6px;
}

.floating-panel-accordion-nav-item {
    position: relative;
}

.floating-panel-accordion-nav-item > .pane-modified-marker {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.curve-type-choice input:checked + .curve-type-tile {
    color: var(--button-text-color);
    border-color: color-mix(in srgb, var(--curve-accent) 38%, var(--button-border-color));
    background: color-mix(in srgb, var(--curve-accent) 10%, var(--button-bg-color));
    box-shadow: inset 2px 0 var(--curve-accent);
}

.curve-type-choice input:checked + .curve-type-tile .curve-type-badge {
    color: var(--curve-accent);
    border-color: color-mix(in srgb, var(--curve-accent) 52%, var(--button-border-color));
    background: color-mix(in srgb, var(--curve-accent) 13%, var(--button-bg-color));
}

.curve-type-choice input:checked + .curve-type-tile .curve-type-check {
    opacity: 1;
}

.curve-type-choice--default .curve-type-tile::after {
    position: absolute;
    top: 2px;
    right: 3px;
    color: color-mix(in srgb, var(--curve-accent) 80%, white);
    content: '•';
    font-size: 10px;
    line-height: 1;
    opacity: 0.9;
}

.curve-type-context-menu,
.bezier-tile-context-menu,
.picture-default-context-menu,
.navigator-spatial-mask-context-menu {
    position: fixed;
    z-index: 10030;
    width: 164px;
    box-sizing: border-box;
    padding: 4px;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 78%, transparent);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 5%), transparent),
        var(--menu-bg-color, var(--main-bg-color));
    box-shadow: 0 10px 28px rgb(0 0 0 / 38%);
}

.curve-type-context-menu button,
.bezier-tile-context-menu button,
.picture-default-context-menu button,
.navigator-spatial-mask-context-menu button {
    display: block;
    width: 100%;
    padding: 7px 9px;
    color: inherit;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.curve-type-context-menu button:hover,
.curve-type-context-menu button:focus-visible,
.bezier-tile-context-menu button:hover,
.bezier-tile-context-menu button:focus-visible,
.picture-default-context-menu button:hover,
.picture-default-context-menu button:focus-visible,
.navigator-spatial-mask-context-menu button:hover,
.navigator-spatial-mask-context-menu button:focus-visible {
    background: color-mix(in srgb, var(--active-button-bg-color) 70%, transparent);
    outline: none;
}

.navigator-spatial-mask-context-menu {
    z-index: 90000;
    width: 148px;
}

.bezier-tile-context-menu {
    width: 196px;
}

.liquify-panel-context-menu {
    width: 196px;
}

.panel-attach-context-menu {
    position: fixed;
    z-index: 2147483630;
    display: grid;
    width: 260px;
    max-height: min(360px, calc(100vh - 16px));
    box-sizing: border-box;
    gap: 2px;
    padding: 6px;
    overflow: auto;
    color: var(--button-text-color);
    border: 1px solid color-mix(in srgb, var(--button-border-color) 78%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 36px),
        var(--menu-bg-color, var(--main-bg-color));
    box-shadow: 0 16px 38px rgb(0 0 0 / 46%);
}

.panel-attach-context-menu > header {
    padding: 6px 8px 7px;
    color: var(--faded-text-color);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.panel-attach-context-menu > button {
    display: grid;
    width: 100%;
    min-height: 42px;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: inherit;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.panel-attach-context-menu > button:hover,
.panel-attach-context-menu > button:focus-visible {
    background: color-mix(in srgb, var(--active-button-bg-color) 72%, transparent);
    outline: none;
}

.panel-attach-context-menu > button > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.panel-attach-context-menu > button strong,
.panel-attach-context-menu > button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-attach-context-menu > button strong {
    font-size: 12px;
    font-weight: 650;
}

.panel-attach-context-menu > button small {
    color: var(--faded-text-color);
    font-size: 10px;
}

.panel-attach-context-menu > button > .icon-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.panel-attach-context-menu > button > i {
    color: var(--colorplane-accent);
    font-size: 15px;
    font-style: normal;
    text-align: center;
}

.preset-group-header--movable {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.preset-group-header--movable:active {
    cursor: move;
}

.bezier-tile-context-menu button {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
}

.bezier-tile-context-menu button > span {
    color: rgb(81 174 255);
    font-weight: 800;
    text-align: center;
}

.bezier-tile-context-menu-separator {
    height: 1px;
    margin: 3px 6px;
    background: rgb(127 127 127 / 25%);
}

.picture-default-tile {
    position: relative;
}

.picture-default-tile::after {
    position: absolute;
    z-index: 3;
    top: 2px;
    right: 3px;
    color: rgb(116 190 250);
    content: '•';
    font-size: 10px;
    line-height: 1;
    opacity: 0.95;
    pointer-events: none;
}

.curve-type-choice--light { --curve-accent: rgb(238 197 98); }
.curve-type-choice--chroma { --curve-accent: rgb(115 205 172); }
.curve-type-choice--vivid { --curve-accent: rgb(241 128 192); }
.curve-type-choice--hue { --curve-accent: rgb(194 126 244); }
.curve-type-choice--lab-a { --curve-accent: rgb(237 119 142); }
.curve-type-choice--lab-b { --curve-accent: rgb(105 174 244); }
.curve-type-choice--red { --curve-accent: rgb(235 93 93); }
.curve-type-choice--green { --curve-accent: rgb(82 190 111); }
.curve-type-choice--blue { --curve-accent: rgb(79 145 244); }
.curve-type-choice--cyan { --curve-accent: rgb(61 195 207); }
.curve-type-choice--magenta { --curve-accent: rgb(218 86 185); }
.curve-type-choice--yellow { --curve-accent: rgb(225 190 62); }
.curve-type-choice--neutral { --curve-accent: rgb(164 174 184); }

.curve-toolbar-advanced {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

.curve-toolbar-advanced-title {
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.curve-interpolation {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
}

.curve-construction-radio {
    border-radius: 4px;
}

.curve-construction-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.curve-construction-radio span {
    display: grid;
    height: 25px;
    place-items: center;
    padding: 0 6px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 4px;
    background: var(--button-bg-color);
    font-size: calc(0.43 * var(--menu-t));
    font-weight: 620;
    cursor: pointer;
}

.curve-construction-radio:hover span {
    color: var(--button-text-hover-color);
    border-color: rgb(107 184 255 / 35%);
}

.curve-construction-radio input:checked + span {
    color: var(--selected-control-text-color);
    border-color: rgb(85 166 240 / 52%);
    background: rgb(55 133 207 / 15%);
    box-shadow: inset 0 0 0 1px rgb(73 151 224 / 10%);
}

.curve-points-slider {
    display: grid;
    min-width: 0;
    grid-template-columns: auto 72px 16px;
    align-items: center;
    gap: 4px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
}

.curve-interpolation-controls,
.curve-points-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 3%)),
        rgb(127 127 127 / 10%);
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.curve-interpolation-controls {
    gap: 6px;
}

.curve-points-slider input {
    --slider-track-size: 5px;

    width: 72px;
    height: 18px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
}

.curve-points-slider input::-webkit-slider-runnable-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background:
        linear-gradient(
            90deg,
            #4f9cff 0,
            #71d9de var(--curve-points-progress),
            rgb(0 0 0 / 16%) var(--curve-points-progress),
            rgb(0 0 0 / 16%) 100%
        );
    box-shadow:
        0 1px 1px rgb(0 0 0 / 18%) inset,
        0 1px 0 rgb(255 255 255 / 12%);
}

.curve-points-slider input::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    appearance: none;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    cursor: ew-resize;
}

.curve-points-slider input::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    cursor: ew-resize;
}

.curve-points-slider input:hover::-webkit-slider-thumb,
.curve-points-slider input:focus-visible::-webkit-slider-thumb,
.curve-points-slider input:hover::-moz-range-thumb,
.curve-points-slider input:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
}

.curve-points-slider input:focus-visible {
    outline: none;
}

.curve-points-slider output {
    color: var(--button-text-color);
    font-weight: 700;
    text-align: center;
}

.curve-toolbar-secondary {
    height: 27px;
    font-size: calc(0.48 * var(--menu-t));
    font-weight: 620;
}

@container (max-width: 560px) {
    .curve-toolbar-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .curve-toolbar-action {
        width: 29px;
        padding: 0;
    }

    .curve-toolbar-action-label {
        display: none;
    }

    .curve-type-group {
        padding: 4px;
    }

    .curve-type-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .curve-type-menu .curve-type-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .curve-toolbar-advanced-title,
    .curve-points-slider > span:first-child {
        display: none;
    }

    .curve-points-slider {
        grid-template-columns: 64px 16px;
    }

    .curve-points-slider input {
        width: 64px;
    }
}

@media (max-width: 760px) {
    .curve-type-menu .curve-type-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .curve-type-menu .curve-type-grid,
    .curve-type-menu .curve-type-grid--compact {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lut-modified .tab-pane-lut::first-letter {
    color: green;
}

.huesat-modified .tab-pane-huesat::first-letter {
    color: green;
}

.hsl2-modified .tab-pane-hsl2::first-letter {
    color: green;
}

.huesat-panel {
    --hsl-panel-accent: #6fb5f1;
    --hsl-panel-stroke: var(--tab-border-color);
    --hsl-panel-soft-fill: rgb(0 0 0 / 10%);
    --hsl-panel-soft-hover: rgb(255 255 255 / 7%);
    --hsl-panel-shadow: rgb(0 0 0 / 16%);

    box-sizing: border-box;
    overflow: auto;
    padding: 16px 22px 24px;
    color: var(--props-text-color);
}

.huesat-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.huesat-title {
    color: var(--props-header-text-color);
    font-size: 15px;
    font-weight: 600;
}

.huesat-description {
    max-width: 440px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.75;
}

.huesat-toolbar {
    flex: 0 0 auto;
    margin-left: auto;
}

.huesat-button-group {
    display: inline-flex;
    padding: 3px;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--hsl-panel-stroke);
    border-radius: 10px;
    background: var(--hsl-panel-soft-fill);
}

.huesat-action-button,
.huesat-region-trigger {
    box-sizing: border-box;
    display: inline-flex;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--button-text-inactive-color);
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.huesat-action-button {
    width: 30px;
}

.huesat-action-button:hover,
.huesat-region-trigger:hover {
    color: var(--button-text-color);
    background: var(--hsl-panel-soft-hover);
}

.huesat-action-button--active {
    color: var(--button-text-color);
    background: color-mix(in srgb, var(--hsl-panel-accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hsl-panel-accent) 28%, transparent);
}

.hsl-panel-icon,
.huesat-action-button .grid-toolbar-icon {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.huesat-region-trigger {
    min-width: 108px;
    padding: 0 8px;
    justify-content: flex-start;
    gap: 7px;
    color: var(--button-text-color);
    background: color-mix(in srgb, var(--hsl-panel-accent) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hsl-panel-accent) 18%, transparent);
}

.huesat-region-trigger__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 10px;
    font-weight: 650;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.huesat-region-trigger__chevron {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-top: 4px solid currentcolor;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    opacity: .72;
}

.huesat-region-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: var(--hsl-region-color, conic-gradient(#f44, #fd4, #4c6, #48e, #c5f, #f44));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hsl-region-color, #6fb5f1) 12%, transparent);
}

.huesat-region-dot--reds { --hsl-region-color: #dc4b4b; }
.huesat-region-dot--oranges { --hsl-region-color: #e9912e; }
.huesat-region-dot--yellows { --hsl-region-color: #dfcc38; }
.huesat-region-dot--greens { --hsl-region-color: #54bd68; }
.huesat-region-dot--cyans { --hsl-region-color: #48bbc8; }
.huesat-region-dot--blues { --hsl-region-color: #5b88e0; }
.huesat-region-dot--purples { --hsl-region-color: #a16bd3; }
.huesat-region-dot--magentas { --hsl-region-color: #d267b7; }

.huesat-region-menu {
    position: fixed;
    z-index: 2147483646;
    box-sizing: border-box;
    display: grid;
    width: 176px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--tab-border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--main-bg-color) 96%, #080808);
    box-shadow: 0 12px 30px rgb(0 0 0 / 42%);
}

.huesat-region-menu__title {
    padding: 5px 7px 4px;
    color: var(--button-text-inactive-color);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.huesat-region-menu__item {
    display: grid;
    min-height: 32px;
    padding: 3px 7px;
    grid-template-columns: 12px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    color: var(--button-text-color);
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    text-align: left;
}

.huesat-region-menu__item:hover {
    background: var(--button-bg-hover-color);
}

.huesat-region-menu__item--active {
    background: color-mix(in srgb, var(--hsl-panel-accent, #6fb5f1) 17%, transparent);
}

.huesat-region-menu__check {
    color: var(--hsl-panel-accent, #6fb5f1);
    font-size: 11px;
    text-align: right;
}

.huesat-controls {
    display: grid;
    max-width: 680px;
    padding: 10px 12px;
    gap: 6px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 8px;
    background: rgb(0 0 0 / 8%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
}

.huesat-control-row {
    display: grid;
    grid-template-columns: 82px minmax(120px, 1fr);
    align-items: center;
    min-height: 24px;
    gap: 8px;
}

.huesat-control-row > label {
    color: var(--button-text-inactive-color);
    font-size: 12px;
}

.huesat-white-balance-card {
    display: grid;
    max-width: 680px;
    margin-top: 12px;
    padding: 10px 12px;
    grid-template-columns: 82px minmax(120px, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid rgb(79 156 255 / 20%);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgb(79 156 255 / 7%), transparent 55%),
      rgb(0 0 0 / 9%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 5%) inset;
}

.huesat-white-balance-card > label {
    color: var(--props-header-text-color);
    font-size: 12px;
    font-weight: 600;
}

.huesat-panel .inline-slider {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.huesat-panel .inline-slider input[type='range'] {
    --slider-track-size: 6px;

    width: 100%;
    min-width: 34px;
    height: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

:is(#props_container, #floating_panels) .huesat-panel .inline-slider input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background-color: rgb(0 0 0 / 16%);
    background-image: var(--slider-track-background);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

:is(#props_container, #floating_panels) .huesat-panel .inline-slider input[type='range']::-moz-range-track {
    height: 6px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background-color: rgb(0 0 0 / 16%);
    background-image: var(--slider-track-background);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 20%) inset,
      0 1px 0 rgb(255 255 255 / 14%);
}

.huesat-panel .inline-slider input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.huesat-panel .inline-slider input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
}

.huesat-panel .inline-slider input[type='range']:hover::-webkit-slider-thumb,
.huesat-panel .inline-slider input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

.huesat-panel .inline-slider input[type='range']:hover::-moz-range-thumb,
.huesat-panel .inline-slider input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

.huesat-panel .inline-slider input[type='range']:focus-visible {
    outline: none;
}

.huesat-panel .inline-slider output {
    box-sizing: border-box;
    min-width: 52px;
    padding: 3px 5px;
    flex: 0 0 auto;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.huesat-mask-card {
    max-width: 680px;
    margin-top: 12px;
    padding: 11px 12px 14px;
    border: 1px solid rgb(79 156 255 / 20%);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgb(79 156 255 / 7%), transparent 55%),
      rgb(0 0 0 / 9%);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 5%) inset,
      0 8px 22px rgb(0 0 0 / 6%);
}

.huesat-mask-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.huesat-mask-title {
    color: var(--props-header-text-color);
    font-size: 12px;
    font-weight: 600;
}

.huesat-mask-description {
    margin-top: 2px;
    color: var(--button-text-inactive-color);
    font-size: 10px;
    line-height: 1.35;
}

.huesat-mask-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 1px;
}

.huesat-mask-legend span {
    padding: 2px 6px;
    border-radius: 99px;
    font-size: 9px;
    line-height: 1.2;
}

.huesat-mask-legend-core {
    color: #d9edff;
    border: 1px solid rgb(79 156 255 / 45%);
    background: rgb(79 156 255 / 24%);
}

.huesat-mask-legend-feather {
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(113 217 222 / 28%);
    background: rgb(113 217 222 / 10%);
}

.huesat-mask-slider-shell {
    position: relative;
    height: 58px;
    margin-top: 5px;
}

.huesat-mask-slider-shell .ui-slider-label {
    display: none;
}

.huesat-mask-slider-shell .ui-slider {
    overflow: visible;
    height: 10px;
    border: 1px solid rgb(0 0 0 / 28%) !important;
    border-radius: 99px;
    background: rgb(0 0 0 / 16%);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 28%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

.huesat-mask-slider-shell .huesat-slider-canvas {
    overflow: hidden;
    border-radius: 99px;
    filter: saturate(1.08);
}

.huesat-mask-slider-shell .ui-slider-region {
    box-sizing: border-box;
    height: calc(100% + 2px);
    padding: 0;
    top: -1px;
    border-radius: 99px;
}

.huesat-mask-slider-shell .ui-mask-region-mid {
    border-top: 2px solid rgb(79 156 255 / 85%);
    border-bottom: 2px solid rgb(79 156 255 / 85%);
    background: rgb(79 156 255 / 18%);
}

.huesat-mask-slider-shell .ui-mask-region-side {
    border-top: 1px solid rgb(113 217 222 / 55%);
    border-bottom: 1px solid rgb(113 217 222 / 55%);
    background: rgb(113 217 222 / 10%);
}

.huesat-mask-slider-shell #custom-handle-left,
.huesat-mask-slider-shell #custom-handle-right {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    top: 50%;
    margin-top: calc(var(--slider-thumb-size) / -2);
    margin-left: calc(var(--slider-thumb-size) / -2);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill) !important;
    box-shadow: var(--slider-thumb-shadow);
    cursor: ew-resize;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.huesat-mask-slider-shell #custom-handle-leftMask,
.huesat-mask-slider-shell #custom-handle-rightMask {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    top: 50%;
    margin-top: calc(var(--slider-thumb-size) / -2);
    margin-left: calc(var(--slider-thumb-size) / -2);
    border: 2px solid #71d9de;
    border-radius: 50%;
    background: var(--slider-thumb-fill) !important;
    box-shadow: var(--slider-thumb-shadow);
    cursor: ew-resize;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.huesat-mask-slider-shell #custom-handle-leftMask {
    border-color: #71d9de;
}

.huesat-mask-slider-shell #custom-handle-rightMask {
    border-color: #71d9de;
}

.huesat-mask-slider-shell #custom-handle-left:hover,
.huesat-mask-slider-shell #custom-handle-right:hover,
.huesat-mask-slider-shell #custom-handle-leftMask:hover,
.huesat-mask-slider-shell #custom-handle-rightMask:hover {
    z-index: 3;
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

.huesat-mask-card--disabled .huesat-mask-legend,
.huesat-mask-card--disabled .huesat-mask-slider-shell {
    opacity: 0.55;
}

.hsl2-panel {
    --hsl-panel-accent: #6fb5f1;
    --hsl-panel-stroke: var(--tab-border-color);
    --hsl-panel-soft-fill: rgb(0 0 0 / 10%);
    --hsl-panel-soft-hover: rgb(255 255 255 / 7%);
    --hsl-panel-shadow: rgb(0 0 0 / 16%);

    box-sizing: border-box;
    overflow: auto;
    padding: 16px 22px 24px;
    color: var(--props-text-color);
}

.hsl2-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
}

.hsl2-title {
    color: var(--props-header-text-color);
    font-size: 15px;
    font-weight: 600;
}

.hsl2-description {
    max-width: 390px;
    margin: 3px 0 0;
    font-size: 11px;
    opacity: 0.75;
}

.hsl2-tabs {
    display: flex;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--hsl-panel-stroke);
    border-radius: 10px;
    background: var(--hsl-panel-soft-fill);
}

.hsl2-tab {
    position: relative;
    display: inline-flex;
    min-width: 94px;
    padding: 7px 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--button-text-inactive-color);
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .03em;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.hsl2-tab .hsl-panel-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.hsl2-tab:hover {
    color: var(--button-text-color);
    background: var(--hsl-panel-soft-hover);
}

.hsl2-tab-active {
    color: var(--button-text-color);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--hsl-panel-accent) 16%, transparent),
      var(--hsl-panel-soft-hover)
    );
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--hsl-panel-accent) 24%, transparent),
      0 3px 12px var(--hsl-panel-shadow);
}

.hsl2-tab-active::after {
    position: absolute;
    right: 14px;
    bottom: 3px;
    left: 14px;
    height: 1px;
    background: var(--hsl-panel-accent);
    box-shadow: 0 0 7px var(--hsl-panel-accent);
    content: '';
}

.hsl2-sections {
    max-width: 680px;
}

.hsl2-section {
    min-width: 0;
    padding: 10px 12px 12px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 8px;
    background: rgb(0 0 0 / 8%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
}

.hsl2-section h3 {
    margin: 0 0 8px;
    color: var(--props-header-text-color);
    font-size: 12px;
    font-weight: 600;
}

.hsl2-row {
    display: grid;
    grid-template-columns: 52px minmax(120px, 1fr);
    align-items: center;
    height: 25px;
    column-gap: 8px;
}

.hsl2-row label {
    font-size: 12px;
}

.huesat-slider-canvas {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
}

.hsl2-panel .inline-slider {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.hsl2-panel .inline-slider input[type='range'] {
    --slider-track-size: 5px;

    width: 100%;
    min-width: 34px;
    height: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

:is(#props_container, #floating_panels) .hsl2-panel .inline-slider input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background-color: rgb(0 0 0 / 16%);
    background-image: var(--slider-track-background);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 18%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

:is(#props_container, #floating_panels) .hsl2-panel .inline-slider input[type='range']::-moz-range-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background-color: rgb(0 0 0 / 16%);
    background-image: var(--slider-track-background);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 18%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

.hsl2-panel .inline-slider input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.hsl2-panel .inline-slider input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.hsl2-panel .inline-slider input[type='range']:hover::-webkit-slider-thumb,
.hsl2-panel .inline-slider input[type='range']:focus-visible::-webkit-slider-thumb,
.hsl2-panel .inline-slider input[type='range']:hover::-moz-range-thumb,
.hsl2-panel .inline-slider input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

.hsl2-panel .inline-slider input[type='range']:focus-visible {
    outline: none;
}

.hsl2-panel .inline-slider output {
    box-sizing: border-box;
    min-width: 38px;
    padding: 3px 5px;
    flex: 0 0 auto;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.hsl2-reds { --hsl2-color: #dc4b4b; }
.hsl2-oranges { --hsl2-color: #e9912e; }
.hsl2-yellows { --hsl2-color: #dfcc38; }
.hsl2-greens { --hsl2-color: #54bd68; }
.hsl2-cyans { --hsl2-color: #48bbc8; }
.hsl2-blues { --hsl2-color: #5b88e0; }
.hsl2-purples { --hsl2-color: #a16bd3; }
.hsl2-magentas { --hsl2-color: #d267b7; }

/* Standard style control backgrounds: hue is a spectrum, saturation runs
 * from neutral to the selected range, and lightness runs black–color–white. */

@media (max-width: 850px) {
    .hsl2-sections { max-width: 500px; }
}

.wheels-modified .tab-pane-wheels::first-letter {
    color: #7dffcb;
}

#wheel_panel {
    --wheel-panel-bg: var(--main-bg-color);
    --wheel-panel-card: var(--main-bg-color-props);
    --wheel-panel-stroke: var(--tab-border-color);
    --wheel-panel-text: var(--props-header-text-color);
    --wheel-panel-muted: var(--props-text-color);
    --wheel-panel-accent: #6fb5f1;
    --wheel-panel-shell: var(--main-bg-color-deep);
    --wheel-panel-toolbar-start: var(--main-bg-color-props);
    --wheel-panel-toolbar-end: var(--main-bg-color-deep);
    --wheel-panel-soft-fill: rgb(0 0 0 / 14%);
    --wheel-panel-soft-hover: rgb(255 255 255 / 7%);
    --wheel-panel-card-highlight: rgb(255 255 255 / 5%);
    --wheel-panel-channel-text: var(--button-text-color);
    --wheel-panel-shadow: rgb(0 0 0 / 22%);
    --wheel-channel-r: #d8514d;
    --wheel-channel-g: #249866;
    --wheel-channel-b: #4d68c9;
    --wheel-channel-y: #94851f;
    --wheel-curve-bg: #24272c;
    --wheel-curve-grid: rgb(255 255 255 / 8%);
    --wheel-curve-axis: rgb(255 255 255 / 28%);
    --wheel-curve-r: #ff6b66;
    --wheel-curve-g: #51d38c;
    --wheel-curve-b: #8298ff;
    --wheel-curve-y: #e6eaf0;
    --wheel-curve-blend: screen;
    color: var(--wheel-panel-text);
    background:
        radial-gradient(circle at 15% 5%, rgb(69 143 205 / 8%), transparent 31%),
        radial-gradient(circle at 86% 12%, rgb(93 169 232 / 6%), transparent 26%),
        linear-gradient(180deg, var(--wheel-panel-card), var(--wheel-panel-bg) 52%, var(--wheel-panel-shell));
}

body.light-theme #wheel_panel {
    --wheel-panel-card: rgb(255 255 255 / 64%);
    --wheel-panel-text: #31363d;
    --wheel-panel-muted: #676d74;
    --wheel-panel-accent: #287fb9;
    --wheel-panel-shell: #d4d6d6;
    --wheel-panel-toolbar-start: #f5f6f6;
    --wheel-panel-toolbar-end: #dfe2e1;
    --wheel-panel-soft-fill: rgb(29 42 48 / 7%);
    --wheel-panel-soft-hover: rgb(255 255 255 / 65%);
    --wheel-panel-card-highlight: rgb(255 255 255 / 52%);
    --wheel-panel-channel-text: #34393f;
    --wheel-panel-shadow: rgb(35 43 46 / 13%);
    --wheel-channel-r: #b83c3a;
    --wheel-channel-g: #13754c;
    --wheel-channel-b: #3f58ad;
    --wheel-channel-y: #746812;
    --wheel-curve-bg: #f5f6f7;
    --wheel-curve-grid: rgb(35 47 56 / 10%);
    --wheel-curve-axis: rgb(35 47 56 / 38%);
    --wheel-curve-r: #c53f3a;
    --wheel-curve-g: #177c50;
    --wheel-curve-b: #425ebc;
    --wheel-curve-y: #424b55;
    --wheel-curve-blend: multiply;
}

body.dark-theme #wheel_panel {
    --wheel-panel-card: rgb(62 63 64 / 88%);
    --wheel-panel-text: #dedede;
    --wheel-panel-muted: #aaa;
    --wheel-panel-accent: #79bff2;
    --wheel-panel-shell: #282929;
    --wheel-panel-toolbar-start: #4a4b4c;
    --wheel-panel-toolbar-end: #363737;
    --wheel-channel-r: #ff7771;
    --wheel-channel-g: #62d99a;
    --wheel-channel-b: #8da1ff;
    --wheel-channel-y: #ddd28a;
    --wheel-curve-bg: #25282c;
    --wheel-curve-grid: rgb(255 255 255 / 8%);
    --wheel-curve-axis: rgb(255 255 255 / 28%);
}

.wheel-tabs-shell {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 58px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--wheel-panel-stroke);
    background: color-mix(in srgb, var(--wheel-panel-shell) 88%, transparent);
    backdrop-filter: blur(18px);
}

.wheel-panel-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wheel-panel-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.wheel-panel-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wheel-panel-accent);
    box-shadow: 0 0 7px color-mix(in srgb, var(--wheel-panel-accent) 70%, transparent);
}

.wheel-tabs {
    position: relative;
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 10px;
    background: var(--wheel-panel-soft-fill);
}

.wheel-tab {
    position: relative;
    min-width: 76px;
    padding: 7px 12px;
    color: var(--wheel-panel-muted);
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.04em;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.wheel-tab:hover {
    color: var(--wheel-panel-text);
    background: var(--wheel-panel-soft-hover);
}

.wheel-tab-active {
    color: var(--wheel-panel-text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--wheel-panel-accent) 16%, transparent), var(--wheel-panel-soft-hover));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wheel-panel-accent) 24%, transparent), 0 3px 12px var(--wheel-panel-shadow);
}

.wheel-tab-active::after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 3px;
    left: 15px;
    height: 1px;
    background: var(--wheel-panel-accent);
    box-shadow: 0 0 7px var(--wheel-panel-accent);
    animation: wheel-tab-line-in 220ms ease-out both;
}

.wheel-options-header-trigger[aria-expanded='true'] {
    color: var(--colorplane-ui-accent);
    background: rgb(var(--colorplane-ui-accent-rgb) / 12%);
    outline: 0;
}

.wheel-options-trigger__dots {
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 1;
}

.wheel-options-menu {
    position: fixed;
    z-index: 2147483646;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow: auto;
    color: var(--button-text-color);
    border: 1px solid var(--tab-border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--main-bg-color-props) 96%, var(--main-bg-color-deep));
    box-shadow: 0 18px 46px rgb(0 0 0 / 48%);
    backdrop-filter: blur(16px) saturate(125%);
}

.wheel-options-menu header {
    padding: 9px 11px 8px;
    color: var(--button-text-inactive-color);
    border-bottom: 1px solid var(--tab-border-color);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.wheel-options-menu button {
    display: grid;
    width: 100%;
    min-height: 64px;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    color: inherit;
    border: 0;
    border-bottom: 1px solid var(--tab-border-color);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.wheel-options-menu button:last-child {
    border-bottom: 0;
}

.wheel-options-menu button:hover,
.wheel-options-menu button:focus-visible,
.wheel-options-menu button[aria-checked='true'] {
    outline: 0;
    background: color-mix(in srgb, var(--colorplane-ui-accent) 12%, transparent);
}

.wheel-options-menu__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--colorplane-ui-accent);
    border: 1px solid rgb(var(--colorplane-ui-accent-rgb) / 28%);
    border-radius: 50%;
    background: rgb(var(--colorplane-ui-accent-rgb) / 8%);
}

.wheel-options-menu__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.wheel-options-menu__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.wheel-options-menu__copy strong {
    font-size: 11px;
    font-weight: 680;
}

.wheel-options-menu__copy small {
    color: var(--button-text-inactive-color);
    font-size: 9px;
    line-height: 1.35;
}

.wheel-options-menu button > i {
    color: var(--colorplane-ui-accent);
    font-size: 12px;
    font-style: normal;
    text-align: center;
}

.prism-description {
    width: 100%;
    padding: 2px 12px 0;
    color: var(--props-text-color);
    font-size: 11px;
    opacity: 0.75;
    text-align: center;
}

.hue-canvas {
    position: relative;
    opacity: 0.8;
}

#ps_hung {
    position: absolute;
    left: 50%;
    top: 90%;
    min-width: 11em;
    max-width: 20em;
    transform: translate(-50%, -100%);
    background-color: var(--main-bg-color-deep);
    z-index: 9999;
    padding: 15px;
    border-radius: 5px;
    color: var(--main-text-color-deep);
    text-align: center;
}

body.closing .cp-close-button {
    color: #8b0000; /* dark red */
}


.icon-loop-top {
    position: absolute;
    transform: translateY(-50%);
    color: var(--spectrogram-top-color);
}

.icon-loop-bottom {
    position: absolute;
    transform: translateY(-50%);
    color: var(--spectrogram-bottom-color);
}

body.some-sample-active .appearance-sample-button {
    color: var(--spectrogram-sample-color);
}

.color-circle-active {
    text-shadow: 0 0 0.5em;
}

.color-picker-conflict .color-circle-active {
    text-shadow: 0 0 0.5em red;
}

.color-picker-text {
    color: var(--button-text-inactive-color);
    font-size: var(--menu-t);
}

.color-bar-table {
    height: 100%;
}

.ui-slider-label {
    font-size: var(--slider--label-text-size);
    position: relative;
    top: 5px;
    left: 10px;
    color: var(--button-text-color);
}

.lut-size-sliders-wrapper > div {
    display: table-cell;
}

.lut-size-sliders-lock {
    vertical-align: middle;
    color: var(--button-shadow-color);
    font-size: var(--slider--label-text-size);
}

.tip-header {
    text-align: center;
    border-bottom: 0.1px solid var(--tab-border-color);
    font-size: calc(var(--info-text-size)*0.8);
}

#props_container,
#sample_block {
    background-color: var(--main-bg-color-props);
}

.grid-controls-panel-host > #props_container2 {
    padding: 0;
    pointer-events: none;
}

.grid-controls-panel-host :is(.preset-group-container--detached, .collapsed-dock-launcher, .bottom-dock-launcher) {
    pointer-events: auto;
}

.grid-controls-panel-host .preset-group-container--docked-right {
    max-height: 100vh;
    margin: 0;
    background: var(--main-bg-color-props);
    box-shadow: -10px 0 26px rgb(0 0 0 / 14%);
}

.grid-controls-launcher,
.creative-adjustments-launcher,
.raw-settings-launcher {
    z-index: 2147483600;
    cursor: pointer !important;
    touch-action: manipulation;
}

.grid-controls-launcher:active,
.creative-adjustments-launcher:active,
.raw-settings-launcher:active {
    cursor: pointer !important;
}

.raw-settings-launcher--empty {
    opacity: 0.72;
    color: #999;
    border-color: rgb(190 190 190 / 28%);
    background: rgb(42 42 42 / 82%);
    box-shadow:
        0 6px 20px rgb(0 0 0 / 22%),
        inset 0 1px 0 rgb(255 255 255 / 7%);
}

.raw-settings-launcher--empty:hover {
    border-color: rgb(190 190 190 / 28%);
    background: rgb(52 52 52 / 88%);
    box-shadow:
        0 8px 24px rgb(0 0 0 / 26%),
        0 0 0 3px rgb(190 190 190 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 7%);
}

.raw-settings-launcher--empty .panel-launcher-icons > .preset-group-icon {
    color: #999 !important;
    filter: none;
}

.raw-settings-launcher--empty.bottom-dock-launcher--open {
    opacity: 1;
    color: #d9efff;
    border-color: rgb(155 207 255 / 86%);
    background: rgb(48 72 96 / 92%);
}

.raw-settings-launcher--empty.bottom-dock-launcher--open .panel-launcher-icons > .preset-group-icon {
    color: #d9efff !important;
    filter: drop-shadow(0 0 3px rgb(98 168 255 / 24%));
}

#props_container2 {
    padding: 8px 0 12px;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 6px 9px 9px;
    border-collapse: collapse;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table,
.props-cat {
    margin-bottom: 0;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody {
    display: block;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 6px 1px;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr + tr {
    border-top: 1px solid rgb(255 255 255 / 5%);
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr > td {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    vertical-align: middle;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr > td:first-child {
    width: 100%;
    padding: 0;
    color: var(--button-text-inactive-color);
    font-size: calc(0.6 * var(--menu-t));
    font-weight: 600;
    letter-spacing: 0.045em;
    line-height: 1.1;
    text-transform: uppercase;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .checkbox-option-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .checkbox-option-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: rgb(130 190 255 / 82%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .checkbox-option-font-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .checkbox-option-font-icon::before {
    margin: 0;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr > td:last-child {
    width: 100%;
    min-width: 0;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr:has(> td:last-child input[type='checkbox']) {
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 7px;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr:has(> td:last-child input[type='checkbox']) > td {
    width: auto;
    flex: 0 0 auto;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr:has(> td:last-child input[type='checkbox']) > td:first-child {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--props-text-color);
    font-size: calc(0.68 * var(--menu-t));
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr:has(> td:last-child input[type='checkbox']) > td:last-child {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .preset-group-body > table > tbody > tr:has(> td:last-child input[type='checkbox']) input[type='checkbox'] {
    margin: 0;
}

#props_container h4 {
    margin-block-end: 0px;
    margin-block-start: 0px;
    color: var(--props-header-text-color);
}

#presets_grid {
position: absolute;
width: 100%;
}

#props_container {
    color: var(--props-text-color);
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .settings-grid-type {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .settings-grid-type .settings-web-grid,
:is(#props_container, #floating_panels [data-floating-panel-name='Grid settings']) .settings-grid-type .grid-type-choice {
    width: 100%;
}

#props_container .settings-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

#props_container .spectrogram-look-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#props_container .spectrogram-look-grid .settings-choice-tile {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

#props_container .spectrogram-look-grid .settings-choice-copy {
    justify-items: center;
}

#props_container .settings-choice-wrap {
    min-width: 0;
    border-radius: 4px;
}

#props_container .settings-choice-wrap--wide {
    grid-column: 1 / -1;
}

#props_container .settings-choice-tile {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 4px;
    text-align: left;
}

#props_container #flat_lut_illuminant_react .settings-choice-tile--temperature {
    background-color: var(--illuminant-temperature-color);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(0 0 0 / 48%));
}

#props_container #flat_lut_illuminant_react .settings-choice-wrap:hover .settings-choice-tile--temperature {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(0 0 0 / 40%));
}

#props_container .settings-choice-badge {
    box-sizing: border-box;
    display: grid;
    width: 25px;
    height: 23px;
    place-items: center;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 4px;
    background: rgb(0 0 0 / 10%);
    font-size: calc(0.52 * var(--menu-t));
    font-weight: 700;
    line-height: 1;
}

#props_container .settings-choice-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

#props_container .settings-choice-name {
    color: var(--button-text-color);
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 650;
    line-height: 1;
}

#props_container .settings-choice-detail {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.43 * var(--menu-t));
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#props_container .settings-choice-grid input:checked + .settings-choice-tile .settings-choice-badge {
    color: white;
    border-color: rgb(104 190 255 / 75%);
    background: linear-gradient(180deg, rgb(82 177 255), rgb(34 119 211));
    box-shadow: 0 0 8px rgb(44 151 255 / 25%);
}

#props_container .lut-precision-help {
    margin-bottom: 5px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.2;
}

#props_container .lut-precision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#props_container .lut-precision-wrap {
    min-width: 0;
    border-radius: 4px;
}

#props_container .lut-precision-choice {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    height: 30px;
    place-items: center;
    padding: 0;
    border-radius: 4px;
    color: var(--button-text-color);
    font-size: calc(0.62 * var(--menu-t));
    font-weight: 650;
}

#props_container .lut-precision-grid input:checked + .lut-precision-choice {
    color: white;
    border-color: rgb(104 190 255 / 75%);
    background: linear-gradient(180deg, rgb(82 177 255), rgb(34 119 211));
    box-shadow: 0 0 8px rgb(44 151 255 / 25%);
}

#props_container .point-style-header {
    display: grid;
    margin-bottom: 6px;
    gap: 2px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.15;
}

#props_container .point-style-status {
    color: rgb(51 139 221);
    font-weight: 650;
}

#props_container .point-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#props_container .point-style-wrap {
    min-width: 0;
    border-radius: 5px;
}

#props_container .point-style-choice {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    grid-template-rows: 28px auto;
    place-items: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 5px;
    text-align: center;
    transition: border-color 100ms ease, background-color 100ms ease, transform 100ms ease;
}

#props_container .point-style-wrap--active .point-style-choice {
    border-color: rgb(76 164 242 / 58%);
    background-color: rgb(74 157 235 / 10%);
}

#props_container .point-style-wrap:active .point-style-choice {
    transform: translateY(1px);
}

#props_container .point-style-swatch {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: rgb(255 255 255 / 55%);
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 6px;
    background: rgb(0 0 0 / 10%);
    font-size: calc(0.9 * var(--menu-t));
    font-weight: 600;
    line-height: 1;
}

#props_container .point-style-swatch--sphere {
    color: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, white 0 8%, rgb(118 196 255) 18%, rgb(39 112 182) 62%, rgb(12 42 74) 100%);
}

#props_container .point-style-swatch--gauss {
    color: transparent;
    border: 0;
    background: radial-gradient(circle, rgb(121 201 255 / 95%) 0, rgb(70 157 236 / 48%) 36%, transparent 72%);
}

#props_container .point-style-swatch--grain {
    font-size: calc(1.05 * var(--menu-t));
    letter-spacing: 1px;
}

#props_container .point-style-swatch--round {
    color: rgb(102 187 255);
    border-radius: 50%;
}

#props_container .point-style-name {
    overflow: hidden;
    max-width: 100%;
    color: var(--button-text-color);
    font-size: calc(0.49 * var(--menu-t));
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#props_container .point-style-grid input:checked + .point-style-choice {
    border-color: rgb(104 190 255 / 75%);
    background: linear-gradient(180deg, rgb(82 177 255 / 24%), rgb(34 119 211 / 12%)), var(--button-bg-color);
    box-shadow: 0 0 8px rgb(44 151 255 / 18%);
}

#props_container .point-style-grid input:checked + .point-style-choice .point-style-swatch {
    color: white;
    border-color: rgb(104 190 255 / 65%);
    box-shadow: 0 0 8px rgb(44 151 255 / 22%);
}

#props_container .color-model-title {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#props_container .color-model-add {
    min-width: 0;
    height: 21px;
    padding: 0 7px;
    color: rgb(51 139 221);
    border: 1px solid rgb(51 139 221 / 34%);
    border-radius: 10px;
    background: rgb(51 139 221 / 7%);
    font: inherit;
    font-size: calc(0.5 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0;
    line-height: 19px;
    text-transform: none;
    cursor: pointer;
}

#props_container .color-model-add:hover {
    color: var(--button-text-color);
    border-color: rgb(51 139 221 / 62%);
    background: rgb(51 139 221 / 15%);
}

#props_container .color-model-header {
    display: grid;
    margin-bottom: 6px;
    gap: 2px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.15;
}

#props_container .color-model-status {
    color: rgb(51 139 221);
    font-weight: 650;
}

#props_container .color-model-preview-background {
    display: flex;
    margin-bottom: 6px;
    align-items: center;
    gap: 3px;
}

#props_container .color-model-preview-background-label {
    margin-right: auto;
    color: var(--button-text-inactive-color);
    font-size: calc(0.47 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#props_container .color-model-preview-background-option {
    display: flex;
    min-width: 0;
    padding: 3px 7px;
    align-items: center;
    gap: 4px;
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    border-radius: 999px;
    background: var(--button-bg-color);
    cursor: pointer;
}

#props_container .color-model-preview-background-option > input {
    position: static;
    z-index: auto;
    width: 11px;
    height: 11px;
    margin: 0;
    accent-color: rgb(51 139 221);
    opacity: 1;
    pointer-events: auto;
}

#props_container .color-model-preview-background-button {
    display: block;
    min-width: 0;
    font-size: calc(0.45 * var(--menu-t));
    line-height: 1;
}

#props_container .color-model-preview-background-option > input:focus-visible + .color-model-preview-background-button {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#props_container .color-model-preview-background-option:has(> input:checked) {
    color: rgb(153 211 255);
    border-color: rgb(104 190 255 / 58%);
    background: rgb(51 139 221 / 18%);
}

#props_container .color-model-support {
    display: grid;
    margin-top: 7px;
    gap: 4px;
}

#props_container .color-model-support-title {
    color: var(--button-text-inactive-color);
    font-size: calc(0.47 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#props_container .color-model-support-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

#props_container .color-model-support-chip,
#props_container .color-model-support-empty {
    padding: 2px 5px;
    color: rgb(51 139 221);
    border: 1px solid rgb(51 139 221 / 34%);
    border-radius: 999px;
    background: rgb(51 139 221 / 10%);
    font-size: calc(0.43 * var(--menu-t));
    line-height: 1.15;
}

#props_container .color-model-support-empty {
    color: var(--button-text-inactive-color);
    border-color: rgb(127 127 127 / 16%);
    background: rgb(127 127 127 / 5%);
}

#props_container .color-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#props_container .color-model-wrap {
    position: relative;
    min-width: 0;
    border-radius: 5px;
}

#props_container .color-model-select {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#props_container .color-model-wrap--dragging {
    opacity: 0.42;
}

#props_container .color-model-wrap--drop-before::before,
#props_container .color-model-wrap--drop-after::after {
    position: absolute;
    z-index: 3;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 999px;
    background: rgb(75 174 255);
    box-shadow: 0 0 7px rgb(42 150 255 / 70%);
    content: "";
    pointer-events: none;
}

#props_container .color-model-wrap--drop-before::before {
    left: -3px;
}

#props_container .color-model-wrap--drop-after::after {
    right: -3px;
}

#props_container .color-model-choice {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 6px;
    border-radius: 5px;
    background-color: var(--button-bg-color);
    background-image:
      linear-gradient(180deg, rgb(0 0 0 / 2%) 15%, rgb(0 0 0 / 8%) 48%, rgb(0 0 0 / 68%) 100%),
      var(--model-image);
    background-position: center;
    background-size: cover;
    text-align: center;
    transition: border-color 100ms ease, filter 100ms ease, transform 100ms ease;
}

#props_container .color-model-grid--photo .color-model-choice {
    background-image:
      linear-gradient(180deg, rgb(0 0 0 / 1%) 15%, rgb(0 0 0 / 12%) 48%, rgb(0 0 0 / 72%) 100%),
      var(--navigator-preview-image);
}

#props_container .color-model-drag-grip {
    position: absolute;
    top: 4px;
    left: 5px;
    color: rgb(255 255 255 / 64%);
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    text-shadow: 0 1px 2px rgb(0 0 0 / 90%);
    transition: opacity 100ms ease;
}

#props_container .color-model-wrap:hover .color-model-drag-grip,
#props_container .color-model-wrap--dragging .color-model-drag-grip {
    opacity: 1;
}

#props_container .color-model-wrap--active .color-model-choice {
    border-color: rgb(76 164 242 / 58%);
    filter: saturate(1.08) brightness(1.04);
}

#props_container .color-model-select:active .color-model-choice {
    transform: translateY(1px);
}

#props_container .color-model-info {
    position: absolute;
    z-index: 4;
    top: 4px;
    right: 4px;
    display: grid;
    width: 19px;
    height: 19px;
    padding: 0;
    place-items: center;
    color: rgb(232 244 255 / 88%);
    border: 1px solid rgb(190 223 255 / 58%);
    border-radius: 50%;
    background: rgb(15 31 49 / 88%);
    box-shadow: 0 1px 5px rgb(0 0 0 / 42%);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(.82);
    transition: opacity 100ms ease, transform 100ms ease, border-color 100ms ease, background 100ms ease;
}

#props_container .color-model-wrap:hover .color-model-info,
#props_container .color-model-info:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

#props_container .color-model-info:hover,
#props_container .color-model-info:focus-visible {
    color: #fff;
    border-color: rgb(126 204 255 / 92%);
    outline: 0;
    background: rgb(35 112 184 / 94%);
}

#props_container .color-model-info svg {
    width: 14px;
    height: 14px;
    overflow: visible;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 1.5;
}

#props_container .color-model-name {
    overflow: hidden;
    max-width: 100%;
    color: var(--model-name-color, white);
    font-size: calc(0.52 * var(--menu-t));
    font-weight: 700;
    line-height: 1;
    text-align: left;
    text-shadow: 0 1px 2px rgb(0 0 0 / 90%);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#props_container .color-model-check {
    position: absolute;
    top: 4px;
    right: 27px;
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    color: white;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    background: rgb(34 119 211 / 92%);
    box-shadow: 0 1px 4px rgb(0 0 0 / 34%);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
}

#props_container .color-model-grid input:checked + .color-model-choice {
    border-color: rgb(104 190 255 / 75%);
    background-image:
      linear-gradient(180deg, rgb(45 145 236 / 7%) 15%, rgb(15 91 170 / 10%) 48%, rgb(0 20 44 / 72%) 100%),
      var(--model-image);
    box-shadow: 0 0 8px rgb(44 151 255 / 18%);
}

#props_container .color-model-grid--photo input:checked + .color-model-choice {
    background-image:
      linear-gradient(180deg, rgb(45 145 236 / 4%) 15%, rgb(15 91 170 / 12%) 48%, rgb(0 20 44 / 76%) 100%),
      var(--navigator-preview-image);
}

#props_container .color-model-grid input:checked + .color-model-choice .color-model-check {
    opacity: 1;
}

/* Used by tools/generate-color-model-previews.ts. The background canvas is
   captured directly; histogram, grid, handles, and every support layer stay out. */
body.capture-color-model-preview :is(
    canvas,
    .grid-lines-svg,
    .remap-hover-svg,
    .grid-zoom-hud,
    .collapsed-dock-launcher,
    .bottom-dock-launcher,
    .grid-floating-toolbar,
    .grid-toolbar-drag-preview
) {
    visibility: hidden !important;
}

body.capture-color-model-preview #canvas3smal {
    visibility: visible !important;
    opacity: 1 !important;
}

#props_container .bezier-controller {
    display: grid;
    margin-top: 9px;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

#props_container .bezier-controller-title {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.1;
}

#props_container .bezier-controller-title > span:first-child {
    color: var(--props-text-color);
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#props_container .bezier-add {
    min-height: 22px;
    padding: 2px 7px;
    color: rgb(91 177 255);
    border: 1px solid rgb(78 166 244 / 44%);
    border-radius: 6px;
    background: rgb(55 143 225 / 8%);
    font: inherit;
    font-weight: 680;
    cursor: pointer;
}

#props_container .bezier-add:hover,
#props_container .bezier-add[aria-expanded='true'] {
    color: var(--selected-control-text-color);
    border-color: rgb(91 181 255 / 72%);
    background: rgb(55 143 225 / 18%);
}

#props_container .bezier-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

#props_container .bezier-choice-wrap {
    min-width: 0;
    border-radius: 4px;
}

#props_container .bezier-choice {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    grid-template-rows: 25px auto;
    place-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 4px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.45 * var(--menu-t));
    font-weight: 650;
}

#props_container .bezier-choice svg {
    display: block;
    width: 34px;
    max-width: 100%;
    height: 24px;
    overflow: visible;
}

#props_container .bezier-choice-guide {
    fill: none;
    stroke: rgb(127 127 127 / 28%);
    stroke-dasharray: 2 2;
    stroke-width: 1;
}

#props_container .bezier-choice-curve {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

#props_container .bezier-choice-wrap--active .bezier-choice {
    color: var(--selected-control-text-color);
    border-color: rgb(76 164 242 / 48%);
    background-color: rgb(74 157 235 / 9%);
}

#props_container .bezier-choice-grid input:checked + .bezier-choice {
    color: var(--selected-control-text-color);
    border-color: rgb(104 190 255 / 72%);
    background: linear-gradient(180deg, rgb(82 177 255 / 20%), rgb(34 119 211 / 10%)), var(--button-bg-color);
    box-shadow: 0 0 7px rgb(44 151 255 / 16%);
}

#props_container .bezier-inline-editor {
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgb(82 169 244 / 26%);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgb(62 151 231 / 7%), transparent),
        color-mix(in srgb, var(--main-bg-color-props) 92%, black);
}

#props_container .bezier-inline-editor-heading,
#props_container .bezier-inline-editor-values,
#props_container .bezier-inline-editor-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

#props_container .bezier-inline-editor-heading > span:first-child {
    color: var(--props-text-color);
    font-size: calc(0.55 * var(--menu-t));
    font-weight: 680;
}

#props_container .bezier-inline-editor-heading > span:last-child,
#props_container .bezier-inline-editor-values,
#props_container .bezier-inline-editor-actions > span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.42 * var(--menu-t));
}

#props_container .bezier-inline-editor-canvas {
    display: block;
    width: 100%;
    height: 132px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 5px;
    background: rgb(0 0 0 / 13%);
    cursor: crosshair;
    touch-action: none;
}

#props_container .bezier-editor-grid,
#props_container .bezier-editor-diagonal,
#props_container .bezier-editor-guide,
#props_container .bezier-editor-curve {
    fill: none;
    vector-effect: non-scaling-stroke;
}

#props_container .bezier-editor-grid {
    stroke: rgb(127 127 127 / 12%);
    stroke-width: 1;
}

#props_container .bezier-editor-diagonal {
    stroke: rgb(127 127 127 / 32%);
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

#props_container .bezier-editor-guide {
    stroke: rgb(85 171 247 / 42%);
    stroke-width: 1;
}

#props_container .bezier-editor-curve {
    stroke: rgb(92 183 255);
    stroke-linecap: round;
    stroke-width: 2.4;
}

#props_container .bezier-editor-handle {
    fill: rgb(51 145 231);
    stroke: rgb(213 239 255);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: grab;
}

#props_container .bezier-editor-handle:active {
    cursor: grabbing;
}

#props_container .bezier-inline-editor-actions {
    justify-content: flex-end;
}

#props_container .bezier-inline-editor-actions > span {
    margin-right: auto;
}

#props_container .bezier-inline-editor-actions button {
    min-height: 24px;
    padding: 3px 8px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 5px;
    background: var(--button-bg-color);
    font: inherit;
    font-size: calc(0.46 * var(--menu-t));
    cursor: pointer;
}

#props_container .bezier-inline-editor-actions button:hover {
    border-color: rgb(91 181 255 / 54%);
}

#props_container .bezier-inline-editor-actions .bezier-editor-apply {
    color: white;
    border-color: rgb(71 163 241 / 68%);
    background: rgb(41 133 216);
}

#props_container .grid-type-choice {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    height: 30px;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: calc(0.64 * var(--menu-t));
}

#props_container .grid-type-icon {
    width: 15px;
    flex: 0 0 auto;
    font-size: calc(0.85 * var(--menu-t));
    text-align: center;
}

#props_container .grid-type-hexagon-icon svg {
    display: block;
    width: 15px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.2;
}

#props_container .settings-projection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

#props_container .settings-projection-grid .settings-projection-wb {
    grid-column: 1 / -1;
}

#props_container .settings-rgb-projection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#props_container .settings-rgb-projection-grid .projection-type-choice {
    min-height: 42px;
    grid-template-columns: 22px minmax(0, 1fr);
    justify-items: stretch;
    gap: 5px;
    padding: 5px;
    text-align: left;
}

#props_container .settings-rgb-projection-grid .projection-type-name {
    font-size: calc(0.46 * var(--menu-t));
}

#props_container .projection-type-name--stacked {
    display: grid;
    align-content: center;
    gap: 2px;
    line-height: 1;
}

#props_container .rgb-2d-style-help {
    margin-bottom: 6px;
    padding: 5px 6px;
    color: var(--button-text-inactive-color);
    border-left: 2px solid rgb(84 174 255 / 70%);
    border-radius: 0 4px 4px 0;
    background: rgb(71 153 230 / 8%);
    font-size: calc(0.55 * var(--menu-t));
    line-height: 1.3;
    text-align: left;
}

#props_container .rgb-2d-style-help strong {
    color: var(--button-text-color);
    font-weight: 650;
}

#props_container .settings-rgb-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#props_container .settings-rgb-style-grid .topcoat-button-bar__item {
    min-width: 0;
    border-radius: 4px;
}

#props_container .settings-rgb-style-grid .topcoat-button {
    width: 100%;
}

#props_container .rgb-2d-style-choice {
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    min-height: 48px;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 5px 2px;
    border-radius: 4px;
    text-align: center;
}

#props_container .rgb-2d-style-name {
    color: var(--button-text-color);
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 650;
    line-height: 1;
}

#props_container .rgb-2d-style-formula {
    color: var(--button-text-inactive-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(0.43 * var(--menu-t));
    line-height: 1;
    white-space: nowrap;
}

#props_container .settings-rgb-style-grid input:checked + .rgb-2d-style-choice .rgb-2d-style-name {
    color: var(--selected-control-text-color);
    text-shadow: 0 0 8px rgb(44 151 255 / 25%);
}

#props_container .settings-rgb-style-grid input:checked + .rgb-2d-style-choice .rgb-2d-style-formula {
    color: var(--button-text-color);
}

#props_container .settings-projection-grid .topcoat-button-bar__item {
    min-width: 0;
    border-radius: 4px;
}

#props_container .settings-projection-grid .topcoat-button {
    width: 100%;
}

#props_container .projection-type-choice {
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    min-height: 34px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 4px;
    text-align: left;
}

#props_container .projection-type-choice--tone {
    grid-template-columns: 22px minmax(0, 1fr) 15px;
}

#props_container .projection-tone-icon {
    width: 15px;
    height: 15px;
    color: var(--button-text-inactive-color);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

#props_container .projection-type-code {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 4px;
    background: rgb(0 0 0 / 10%);
    font-size: calc(0.64 * var(--menu-t));
    font-weight: 700;
    line-height: 1;
}

#props_container .projection-type-name {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    font-weight: 500;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#props_container .settings-projection-grid input:checked + .projection-type-choice .projection-type-code {
    color: white;
    border-color: rgb(104 190 255 / 75%);
    background: linear-gradient(180deg, rgb(82 177 255), rgb(34 119 211));
    box-shadow: 0 0 8px rgb(44 151 255 / 25%);
}

#props_container .settings-projection-grid input:checked + .projection-type-choice .projection-type-name {
    color: var(--button-text-color);
}

#props_container .settings-projection-grid input:checked + .projection-type-choice .projection-tone-icon {
    color: var(--button-text-color);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

#props_container .shift-sliders {
    display: grid;
    gap: 5px;
}

#props_container .shift-slider output {
    min-width: 48px;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range'] {
    --slider-track-size: 5px;

    width: 100%;
    min-width: 34px;
    height: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 18%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']::-moz-range-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 18%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']:hover::-webkit-slider-thumb,
:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']:hover::-moz-range-thumb,
:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider input[type='range']:focus-visible {
    outline: none;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider output {
    box-sizing: border-box;
    min-width: 38px;
    padding: 3px 5px;
    flex: 0 0 auto;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.inline-slider input {
  pointer-events: auto;
}

.inline-slider .inline-slider-value {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 38px;
    min-height: 19px;
    padding: 2px 5px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.inline-slider .inline-slider-value:focus-within {
    border-color: var(--slider-thumb-stroke);
    box-shadow: 0 0 0 2px rgb(79 156 255 / 18%);
}

.inline-slider .inline-slider-value input[type='number'] {
    box-sizing: content-box;
    min-width: 2ch;
    max-width: 8ch;
    height: 1em;
    padding: 0;
    color: inherit;
    border: 0;
    outline: 0;
    appearance: textfield;
    background: transparent;
    font: inherit;
    font-variant-numeric: inherit;
    line-height: 1;
    text-align: right;
}

.inline-slider .inline-slider-value input[type='number']::-webkit-inner-spin-button,
.inline-slider .inline-slider-value input[type='number']::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.inline-slider .inline-slider-value > span {
    white-space: pre;
}

.inline-slider--disabled .inline-slider-value {
    cursor: not-allowed;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider-stepper {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider-stepper button {
    display: grid;
    width: 17px;
    height: 17px;
    padding: 0;
    place-items: center;
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    background: var(--button-bg-color);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider-stepper button:hover {
    background: var(--hover-button-bg-color);
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider--disabled {
    opacity: 0.4;
}

:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider--disabled input,
:is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider--disabled button {
    cursor: not-allowed;
}

.mask-settings-panel {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 8px;
    color: var(--props-text-color);
}

.mask-settings-section {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(127 127 127 / 16%);
    border-radius: 7px;
    background:
      linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 58%),
      rgb(127 127 127 / 6%);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 7%) inset,
      0 2px 8px rgb(0 0 0 / 7%);
}

.mask-settings-section__header {
    display: grid;
    gap: 2px;
    padding: 8px 9px 7px;
    border-bottom: 1px solid rgb(127 127 127 / 13%);
}

.mask-settings-section__eyebrow {
    color: var(--props-text-color);
    font-size: calc(0.62 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.mask-settings-section__hint {
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.1;
}

.mask-settings-controls {
    display: grid;
    gap: 8px;
    padding: 8px 9px 9px;
}

.mask-settings-control {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.mask-settings-control > label {
    color: var(--button-text-inactive-color);
    font-size: calc(0.61 * var(--menu-t));
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1;
}

.mask-settings-panel .inline-slider {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.mask-settings-panel .inline-slider input[type='range'] {
    --slider-track-size: 5px;

    width: 100%;
    min-width: 34px;
    height: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.mask-settings-panel .inline-slider input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 99px;
    background:
      linear-gradient(90deg,
        #4f9cff 0,
        #71d9de var(--slider-progress),
        rgb(0 0 0 / 16%) var(--slider-progress),
        rgb(0 0 0 / 16%) 100%);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 18%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
}

.mask-settings-panel .inline-slider input[type='range']::-webkit-slider-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    margin-top: var(--slider-thumb-track-offset);
    appearance: none;
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.mask-settings-panel .inline-slider input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--slider-thumb-stroke);
    border-radius: 50%;
    background: var(--slider-thumb-fill);
    box-shadow: var(--slider-thumb-shadow);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.mask-settings-panel .inline-slider input[type='range']:hover::-webkit-slider-thumb,
.mask-settings-panel .inline-slider input[type='range']:focus-visible::-webkit-slider-thumb,
.mask-settings-panel .inline-slider input[type='range']:hover::-moz-range-thumb,
.mask-settings-panel .inline-slider input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-active);
    transform: scale(1.08);
}

.mask-settings-panel .inline-slider input[type='range']:focus-visible {
    outline: none;
}

.mask-settings-panel .inline-slider output {
    box-sizing: border-box;
    min-width: 38px;
    padding: 3px 5px;
    flex: 0 0 auto;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 4px;
    background: rgb(0 0 0 / 13%);
    font-size: calc(0.68 * var(--menu-t));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.mask-settings-invert {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
    border-top: 1px solid rgb(127 127 127 / 13%);
    font-size: calc(0.62 * var(--menu-t));
}

.mask-settings-presets {
    padding-bottom: 8px;
}

.mask-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 8px 4px 0;
}

.mask-preset-grid > * {
    min-width: 0;
}

.mask-preset {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    height: auto;
    padding: 0;
    border-radius: 5px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: border-color 100ms ease, background-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
}

.mask-preset:hover {
    border-color: rgb(79 156 255 / 62%);
    background-color: rgb(79 156 255 / 10%);
}

.mask-preset:active {
    transform: translateY(1px);
}

.mask-preset--selected,
.mask-preset[aria-pressed='true'] {
    border-color: rgb(104 190 255 / 78%);
    background-color: rgb(53 143 229 / 24%) !important;
    box-shadow:
      0 0 0 1px rgb(79 156 255 / 22%) inset,
      0 0 8px rgb(44 151 255 / 18%);
}

.mask-settings-panel .topcoat-checkbox {
    cursor: pointer;
}

.mask-settings-panel .topcoat-checkbox input[type='checkbox'] {
    width: 32px;
    height: 18px;
    margin: 0 -32px 0 0;
    cursor: pointer;
}

.mask-settings-panel .topcoat-checkbox__checkmark {
    width: 32px;
    height: 18px;
    flex: 0 0 auto;
    cursor: pointer;
}

.mask-settings-panel .topcoat-checkbox__checkmark:before {
    width: 32px;
    height: 18px;
    border: 1px solid rgb(0 0 0 / 24%);
    border-radius: 99px;
    background: rgb(0 0 0 / 18%);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 16%) inset,
      0 1px 0 rgb(255 255 255 / 12%);
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.mask-settings-panel .topcoat-checkbox__checkmark:after {
    top: 3px;
    left: 3px !important;
    width: 12px;
    height: 12px;
    opacity: 1;
    border: 0;
    border-radius: 50%;
    background: #f5f7f8;
    box-shadow:
      0 1px 3px rgb(0 0 0 / 35%),
      0 0 0 1px rgb(0 0 0 / 8%);
    transform: none;
    transition: transform 150ms cubic-bezier(.2, .8, .2, 1), background 150ms ease;
}

.mask-settings-panel .topcoat-checkbox input[type='checkbox']:checked + .topcoat-checkbox__checkmark:before {
    border-color: #3b8ff3;
    background: linear-gradient(135deg, #4f9cff, #68d2d7);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 12%) inset,
      0 0 0 2px rgb(79 156 255 / 12%);
}

.mask-settings-panel .topcoat-checkbox input[type='checkbox']:checked + .topcoat-checkbox__checkmark:after {
    background: #fff;
    transform: translateX(14px);
}

.mask-settings-panel .topcoat-checkbox:hover .topcoat-checkbox__checkmark:before {
    border-color: rgb(79 156 255 / 65%);
}

.mask-settings-panel .topcoat-checkbox input[type='checkbox']:focus-visible + .topcoat-checkbox__checkmark:before {
    outline: 2px solid rgb(79 156 255 / 45%);
}

#props_container #color_space_popup {
    left: 0;
    width: max-content;
    min-width: 100%;
    transform: none;
}

#props_container #color_space_popup .ui-menu {
    width: 100%;
    min-width: 100%;
}


#lut_tool_type_react .ui-menu-item-wrapper,
#lut_aggr_type_react .ui-menu-item-wrapper,
#lut_hover_type_react .ui-menu-item-wrapper {
    display: flex;
    white-space: nowrap;
}

.menu-item-icon:before {
    margin-top: 0.2em;
}

.select-menu-overlay {
    position: absolute;
    z-index: 10;
    margin-top: 0;
    top: calc(-0.09*var(--btn-size-t));
    line-height: var(--btn-size-h);
    left: 0.2em;
    color: var(--button-text-color);
    pointer-events: none;
    text-shadow: 0 -1px rgb(0 0 0 / 69%);
    font-size: var(--btn-size-t);
}

.ui-menu {
    font-size: var(--btn-size-t);
}

.ui-menu-item-wrapper {
    font-size: var(--btn-size-t);
}

#lut_tool_type_react select,
#lut_aggr_type_react select,
#lut_hover_type_react select {
    width: 2.7em;
}

body.disabled-tips .native-tooltip{
  display:none;
}


body.disabled-tips .native-tooltip[data-theme="palette-comp"]{
  display: block !important;
}

.native-tooltip {
  position: fixed;
  z-index: 2147483647;
  box-sizing: border-box;
  max-width: min(350px, calc(100vw - 8px));
  border: 1px solid var(--tab-border-color);
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-size: var(--tippy-font-size);
  line-height: 1.4;
  outline: 0;
  pointer-events: none;
}

.native-tooltip[data-handoff-group] {
  will-change: top, left, opacity, transform;
  transition:
    top 160ms cubic-bezier(0.2, 0.75, 0.25, 1),
    left 160ms cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 110ms ease,
    transform 160ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.native-tooltip[data-handoff-state='from'] {
  opacity: 0.72;
  transform: scale(0.985);
}

.native-tooltip[data-handoff-state='to'] {
  opacity: 1;
  transform: scale(1);
}

.native-tooltip--departing {
  opacity: 0;
  pointer-events: none;
}

.native-tooltip--handoff {
  transform: translate3d(
    var(--tooltip-handoff-x, 0),
    var(--tooltip-handoff-y, 0),
    0
  );
  will-change: transform;
}

.native-tooltip--handoff.native-tooltip--handoff-active {
  transform: translate3d(0, 0, 0);
  transition: transform 180ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.native-tooltip--handoff .native-tooltip__content {
  animation: native-tooltip-content-handoff 140ms ease-out both;
}

.native-tooltip__bridge {
  position: absolute;
  z-index: 0;
  opacity: 0;
  background: rgb(98 168 255 / 8%);
  pointer-events: auto;
  transition:
    opacity 90ms ease-out,
    left 180ms cubic-bezier(0.2, 0.72, 0.25, 1),
    top 180ms cubic-bezier(0.2, 0.72, 0.25, 1),
    width 180ms cubic-bezier(0.2, 0.72, 0.25, 1),
    height 180ms cubic-bezier(0.2, 0.72, 0.25, 1),
    clip-path 180ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.native-tooltip[data-intent-bridge='true'] > .native-tooltip__bridge {
  pointer-events: none;
}

.native-tooltip[data-intent-bridge='true'].native-tooltip--approaching > .native-tooltip__bridge {
  pointer-events: auto;
}

.native-tooltip[data-placement='left'] > .native-tooltip__bridge {
  background: linear-gradient(90deg, rgb(98 168 255 / 13%), rgb(98 168 255 / 3%));
}

.native-tooltip[data-placement='right'] > .native-tooltip__bridge {
  background: linear-gradient(270deg, rgb(98 168 255 / 13%), rgb(98 168 255 / 3%));
}

.native-tooltip[data-placement='top'] > .native-tooltip__bridge {
  background: linear-gradient(180deg, rgb(98 168 255 / 13%), rgb(98 168 255 / 3%));
}

.native-tooltip[data-placement='bottom'] > .native-tooltip__bridge {
  background: linear-gradient(0deg, rgb(98 168 255 / 13%), rgb(98 168 255 / 3%));
}

.native-tooltip__bridge:hover {
  opacity: 1;
}

.native-tooltip:has(> .native-tooltip__bridge:hover) {
  border-color: rgb(98 168 255 / 48%);
  box-shadow: 0 0 0 1px rgb(98 168 255 / 12%);
}

.native-tooltip--departing .native-tooltip__bridge {
  opacity: 0;
  pointer-events: none;
}

@keyframes native-tooltip-content-handoff {
  from {
    opacity: 0.42;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .native-tooltip--handoff,
  .native-tooltip--handoff.native-tooltip--handoff-active {
    transform: none;
    transition: none;
  }

  .native-tooltip--handoff .native-tooltip__content {
    animation: none;
  }

  .native-tooltip__bridge {
    transition: none;
  }
}

.native-tooltip__content {
  position: relative;
  z-index: 1;
  padding: 5px 9px;
}

.native-tooltip--help {
  max-width: min(310px, calc(100vw - 8px));
  pointer-events: auto;
  translate: 0 0;
  transition: translate 180ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.native-tooltip--approaching {
  translate:
    var(--tooltip-approach-x, 0)
    var(--tooltip-approach-y, 0);
}

@media (prefers-reduced-motion: reduce) {
  .native-tooltip--help {
    transition: none;
  }
}

.native-tooltip__content--help {
  padding: 7px 9px 6px;
}

.native-tooltip__summary {
  min-width: 0;
}

.native-tooltip__help-footer {
  margin-top: 6px;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgb(255 255 255 / 58%);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: max(8px, calc(var(--tippy-font-size) * 0.82));
}

.native-tooltip__help-footer button {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #b9d9ff;
  border: 1px solid rgb(98 168 255 / 42%);
  border-radius: 4px;
  background: rgb(98 168 255 / 14%);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.native-tooltip__help-footer button:hover,
.native-tooltip__help-footer button:focus-visible {
  color: #fff;
  border-color: #62a8ff;
  outline: 0;
  background: rgb(98 168 255 / 30%);
}

.native-tooltip[data-theme='color-model-help'] {
  width: min(260px, calc(100vw - 8px));
}

.native-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  border: solid var(--tab-border-color);
  background: #333;
  transform: rotate(45deg);
}

.native-tooltip[data-placement='top'] > .native-tooltip__arrow {
  bottom: -5px;
  left: calc(var(--tooltip-arrow-left, 50%) - 4px);
  border-width: 0 1px 1px 0;
}

.native-tooltip[data-placement='bottom'] > .native-tooltip__arrow {
  top: -5px;
  left: calc(var(--tooltip-arrow-left, 50%) - 4px);
  border-width: 1px 0 0 1px;
}

.native-tooltip[data-placement='left'] > .native-tooltip__arrow {
  top: calc(var(--tooltip-arrow-top, 50%) - 4px);
  right: -5px;
  border-width: 1px 1px 0 0;
}

.native-tooltip[data-placement='right'] > .native-tooltip__arrow {
  top: calc(var(--tooltip-arrow-top, 50%) - 4px);
  left: -5px;
  border-width: 0 0 1px 1px;
}

.topcoat-button-bar {
  display: inline-block;
}

.cp-menu-wrap {
    font-size: 1rem;
}


/* TODO do this in the component instead */
#color_space_popup {
    left: 100%;
    transform: translateX(-100%);
}

/* TODO do this in the component instead */
#appearance_point_style_react_popup {
    left: 100%;
    transform: translateX(-100%);
}

.flat-menu div {
    margin-left: 5px;
    margin-right: 5px;
}

#buy_buttons_panel {
  container-type: inline-size;
  color: var(--main-text-color-deep);
  background:
    radial-gradient(circle at 7% 4%, rgb(65 147 255 / 18%), transparent 34%),
    radial-gradient(circle at 93% 92%, rgb(132 84 255 / 13%), transparent 36%),
    color-mix(in srgb, var(--main-bg-color) 82%, #111);
}

#buy_text {
  box-sizing: border-box;
  display: grid;
  width: min(100%, 920px);
  min-height: 100%;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.92fr);
  align-items: center;
  gap: clamp(20px, 5cqw, 52px);
  padding: clamp(28px, 6cqw, 64px);
  font-size: var(--buy-text-size);
}

.buy-panel-pitch,
.buy-panel-activation {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.buy-panel-eyebrow,
.buy-panel-activation-heading > span,
#thankyou > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--main-text-color-deep) 68%, #78b9ff);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.buy-panel-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6eafff;
  box-shadow: 0 0 0 4px rgb(92 166 255 / 13%), 0 0 18px rgb(92 166 255 / 58%);
}

#buy-panel-title {
  max-width: 560px;
  margin: 0;
  color: color-mix(in srgb, var(--main-text-color-deep) 30%, white);
  font-size: clamp(30px, 6.2cqw, 54px);
  font-weight: 740;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

#buy-panel-title span {
  display: block;
  color: #79b8ff;
}

.buy-panel-lede {
  max-width: 540px;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--main-text-color-deep) 82%, transparent);
  font-size: 0.78em;
  line-height: 1.55;
}

.buy-panel-benefits {
  display: grid;
  gap: 9px;
  margin: 22px 0 24px;
  padding: 0;
  list-style: none;
}

.buy-panel-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: color-mix(in srgb, var(--main-text-color-deep) 80%, transparent);
  font-size: 0.7em;
  line-height: 1.4;
}

.buy-panel-benefits strong {
  color: color-mix(in srgb, var(--main-text-color-deep) 38%, white);
  font-weight: 650;
}

.buy-panel-plans {
  display: grid;
  max-width: 430px;
  gap: 7px;
  margin: 0 0 14px;
}

.buy-panel-plans > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 9px;
  background: rgb(255 255 255 / 4%);
  color: color-mix(in srgb, var(--main-text-color-deep) 42%, white);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.buy-panel-plans > a:hover,
.buy-panel-plans > a:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 48%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  outline: none;
  transform: translateY(-1px);
}

.buy-panel-plans > a > span {
  display: grid;
  gap: 2px;
}

.buy-panel-plans > a > span:last-child {
  grid-auto-flow: column;
  align-items: baseline;
  gap: 4px;
  text-align: right;
}

.buy-panel-plans strong,
.buy-panel-plans b {
  color: color-mix(in srgb, var(--main-text-color-deep) 22%, white);
  font-size: 0.72em;
  font-weight: 720;
}

.buy-panel-plans b {
  color: var(--colorplane-accent-soft);
  font-size: 0.86em;
}

.buy-panel-plans small {
  color: color-mix(in srgb, var(--main-text-color-deep) 58%, transparent);
  font-size: 0.5em;
  font-weight: 500;
}

.buy-panel-check {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgb(111 178 255 / 32%);
  border-radius: 50%;
  background: rgb(74 142 224 / 13%);
  color: #8dc5ff;
  font-size: 11px;
  font-weight: 800;
}

.buy-panel-cta {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 430px;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px 12px 20px;
  border: 1px solid rgb(165 211 255 / 62%);
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 18%), transparent 36%),
    linear-gradient(135deg, #377fd8, #6556d9);
  box-shadow:
    0 12px 28px rgb(25 80 161 / 30%),
    inset 0 1px rgb(255 255 255 / 24%);
  color: white;
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(0 0 0 / 18%);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.buy-panel-cta:hover {
  border-color: rgb(208 233 255 / 86%);
  box-shadow:
    0 16px 36px rgb(25 80 161 / 42%),
    inset 0 1px rgb(255 255 255 / 28%);
  color: white;
  transform: translateY(-1px);
}

.buy-panel-cta:active {
  transform: translateY(1px);
}

.buy-panel-cta:focus-visible,
.buy-panel-verify:focus-visible,
.buy-panel-fields input:focus-visible {
  outline: 2px solid #91c8ff;
  outline-offset: 2px;
}

.buy-panel-cta > span:first-child {
  display: grid;
  gap: 2px;
}

.buy-panel-cta strong {
  font-size: 0.84em;
  font-weight: 720;
}

.buy-panel-cta small {
  color: rgb(255 255 255 / 72%);
  font-size: 0.58em;
}

.buy-panel-cta-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  font-size: 21px;
  transition: transform 140ms ease;
}

.buy-panel-cta:hover .buy-panel-cta-arrow {
  transform: translateX(2px);
}

.buy-panel-browser-note {
  max-width: 430px;
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--main-text-color-deep) 60%, transparent);
  font-size: 0.56em;
  text-align: center;
}

.buy-panel-trust {
  display: grid;
  max-width: 430px;
  gap: 5px;
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid rgb(108 208 151 / 20%);
  border-radius: 9px;
  background: rgb(72 176 116 / 7%);
  color: color-mix(in srgb, var(--main-text-color-deep) 62%, transparent);
  font-size: 0.48em;
  line-height: 1.4;
}

.buy-panel-trust strong {
  color: #83dca9;
  font-size: 1.18em;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.buy-panel-trust span::before {
  margin-right: 6px;
  color: #72d49b;
  content: '✓';
}

.buy-panel-activation {
  box-sizing: border-box;
  padding: clamp(20px, 3.8cqw, 34px);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)),
    color-mix(in srgb, var(--main-bg-color-deep) 76%, transparent);
  box-shadow:
    0 20px 48px rgb(0 0 0 / 18%),
    inset 0 1px rgb(255 255 255 / 5%);
}

.buy-panel-activation-heading h2,
#thankyou h2 {
  margin: 0;
  color: color-mix(in srgb, var(--main-text-color-deep) 32%, white);
  font-size: 1.14em;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.buy-panel-activation-heading p,
#thankyou p {
  margin: 8px 0 20px;
  color: color-mix(in srgb, var(--main-text-color-deep) 65%, transparent);
  font-size: 0.62em;
  line-height: 1.5;
}

.buy-panel-fields {
  display: grid;
  gap: 13px;
}

.buy-panel-fields label {
  display: grid;
  gap: 6px;
  color: color-mix(in srgb, var(--main-text-color-deep) 78%, transparent);
  font-size: 0.58em;
  font-weight: 650;
}

.buy-panel-fields input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: rgb(0 0 0 / 19%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 14%);
  color: color-mix(in srgb, var(--main-text-color-deep) 26%, white);
  font: inherit;
  font-size: 1.35em;
  font-weight: 450;
  pointer-events: auto;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.buy-panel-fields input::placeholder {
  color: color-mix(in srgb, var(--main-text-color-deep) 42%, transparent);
}

.buy-panel-fields input:hover {
  border-color: rgb(255 255 255 / 20%);
}

.buy-panel-fields input:focus {
  border-color: rgb(108 177 255 / 74%);
  background: rgb(0 0 0 / 25%);
  box-shadow: 0 0 0 3px rgb(81 158 247 / 10%), inset 0 1px 3px rgb(0 0 0 / 16%);
  outline: none;
}

#license_key_input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.015em;
}

.buy-panel-verify {
  width: 100%;
  min-height: 42px;
  margin-top: 16px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 8%);
  color: color-mix(in srgb, var(--main-text-color-deep) 30%, white);
  font: inherit;
  font-size: 0.66em;
  font-weight: 680;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.buy-panel-verify:hover {
  border-color: rgb(120 184 255 / 52%);
  background: rgb(75 142 220 / 18%);
  color: white;
}

.buy-panel-status {
  min-height: 1.4em;
  margin-top: 10px;
  color: #ff9e9e;
  font-size: 0.56em;
  line-height: 1.4;
  text-align: center;
}

#thankyou {
  box-sizing: border-box;
  width: min(calc(100% - 48px), 460px);
  margin: auto;
  padding: 42px;
  border: 1px solid rgb(122 198 154 / 24%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgb(73 189 119 / 12%), transparent 42%),
    color-mix(in srgb, var(--main-bg-color-deep) 82%, transparent);
  box-shadow: 0 24px 54px rgb(0 0 0 / 22%);
  text-align: center;
}

#buy_buttons_panel > #thankyou[style*="display: none"] {
  display: none !important;
}

#buy_buttons_panel > #thankyou:not([style*="display: none"]) {
  display: block;
  position: absolute;
  inset: 0;
  height: max-content;
}

#thankyou > span {
  justify-content: center;
  color: #7dd7a2;
}

#thankyou p {
  margin-bottom: 0;
}

.buy-panel-success-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid rgb(118 218 158 / 34%);
  border-radius: 50%;
  background: rgb(63 180 109 / 12%);
  box-shadow: 0 0 28px rgb(68 188 116 / 15%);
  color: #82dfa8;
  font-size: 24px;
  font-weight: 800;
}

body.light-theme #buy_buttons_panel {
  background:
    radial-gradient(circle at 7% 4%, rgb(62 145 242 / 15%), transparent 34%),
    radial-gradient(circle at 93% 92%, rgb(130 90 236 / 10%), transparent 36%),
    #eef2f7;
  color: #243044;
}

body.light-theme .buy-panel-eyebrow,
body.light-theme .buy-panel-activation-heading > span,
body.light-theme #thankyou > span {
  color: #4974a2;
}

body.light-theme #buy-panel-title {
  color: #182437;
}

body.light-theme #buy-panel-title span {
  color: #327ecf;
}

body.light-theme .buy-panel-lede,
body.light-theme .buy-panel-benefits li {
  color: #44536a;
}

body.light-theme .buy-panel-benefits strong {
  color: #1c293c;
}

body.light-theme .buy-panel-check {
  border-color: rgb(55 128 208 / 24%);
  background: rgb(55 128 208 / 9%);
  color: #3279c7;
}

body.light-theme .buy-panel-plans > a {
  border-color: rgb(39 65 96 / 12%);
  background: rgb(255 255 255 / 55%);
  color: #2a394d;
}

body.light-theme .buy-panel-plans strong,
body.light-theme .buy-panel-plans b {
  color: #1e2d41;
}

body.light-theme .buy-panel-plans small {
  color: #6b788b;
}

body.light-theme .buy-panel-browser-note {
  color: #647189;
}

body.light-theme .buy-panel-trust {
  border-color: rgb(53 145 91 / 18%);
  background: rgb(53 145 91 / 7%);
  color: #506579;
}

body.light-theme .buy-panel-trust strong {
  color: #318258;
}

body.light-theme .buy-panel-activation {
  border-color: rgb(39 65 96 / 12%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(245 248 252 / 80%)),
    #f8fafc;
  box-shadow:
    0 20px 48px rgb(35 54 78 / 12%),
    inset 0 1px white;
}

body.light-theme .buy-panel-activation-heading h2,
body.light-theme #thankyou h2 {
  color: #1d293b;
}

body.light-theme .buy-panel-activation-heading p,
body.light-theme #thankyou p {
  color: #657188;
}

body.light-theme .buy-panel-fields label {
  color: #46546a;
}

body.light-theme .buy-panel-fields input {
  border-color: #c8d3e0;
  background: rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 2px rgb(34 55 80 / 6%);
  color: #1c293c;
}

body.light-theme .buy-panel-fields input::placeholder {
  color: #8b97a9;
}

body.light-theme .buy-panel-fields input:hover {
  border-color: #aebdce;
}

body.light-theme .buy-panel-fields input:focus {
  border-color: #4e91d8;
  background: white;
  box-shadow: 0 0 0 3px rgb(55 133 218 / 10%);
}

body.light-theme .buy-panel-verify {
  border-color: #c8d5e3;
  background: #edf3f9;
  color: #2c3d53;
}

body.light-theme .buy-panel-verify:hover {
  border-color: #7eadda;
  background: #e1edf9;
  color: #173a62;
}

body.light-theme #thankyou {
  border-color: rgb(53 145 91 / 18%);
  background:
    radial-gradient(circle at 50% 0%, rgb(73 189 119 / 10%), transparent 42%),
    rgb(255 255 255 / 90%);
  box-shadow: 0 24px 54px rgb(35 54 78 / 12%);
}

.buy-warning {
  color: #ff9e9e;
}

@container (max-width: 600px) {
  #buy_text {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 30px;
    padding: 30px;
  }

  .buy-panel-pitch {
    max-width: 560px;
  }

  .buy-panel-activation {
    width: 100%;
    max-width: 560px;
  }
}

@container (max-width: 390px) {
  #buy_text {
    padding: 22px 18px 28px;
  }

  #buy-panel-title {
    font-size: 30px;
  }

  .buy-panel-cta {
    min-height: 58px;
  }
}

.topcoat-checkbox {
  vertical-align: middle;
}

/* Color-model configuration: the selector tiles, expanded into a draggable library. */
#conf_wrap {
  background:
    radial-gradient(circle at 15% -20%, rgb(68 148 225 / 12%), transparent 38%),
    var(--main-bg-color);
}

#conf_wrap .window-header {
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: color-mix(in srgb, var(--main-bg-color-props) 90%, transparent);
}

#conf_wrap .window-header-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
  user-select: none;
}

#conf_wrap .window-header-title {
  color: var(--main-text-color-deep);
  font-size: 15px;
  font-weight: 720;
  letter-spacing: .01em;
}

#conf_wrap .window-header-subtitle {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#conf_wrap .control-btn.close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 7px;
  background: transparent;
}

#conf_wrap .control-btn.close:hover {
  color: white;
  background: rgb(255 88 88 / 25%);
}

.colorspace-config-content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.colorspace-config-toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px;
}

.colorspace-config-heading {
  color: var(--main-text-color-deep);
  font-size: 12px;
  font-weight: 700;
}

.colorspace-config-summary,
.colorspace-config-hint {
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.35;
}

.colorspace-config-hint {
  text-align: right;
}

.colorspace-config-main {
  display: flex;
  flex: 1;
  min-height: 0;
}

.colorspace-tile-region {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.colorspace-tile-grid {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: clamp(4px, .8cqh, 7px);
  grid-auto-rows: 61px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: start;
  padding: 0 14px 10px;
}

.colorspace-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 7px;
  color: white;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background-color: var(--button-bg-color);
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 4%) 15%, rgb(0 0 0 / 10%) 48%, rgb(0 0 0 / 72%) 100%),
    var(--model-image);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  cursor: grab;
  font-family: inherit;
  touch-action: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease, opacity 120ms ease, transform 120ms ease;
  user-select: none;
}

.colorspace-tile:not(.colorspace-tile--enabled) {
  border-color: rgb(255 255 255 / 7%);
}

.colorspace-tile--enabled {
  border-color: rgb(104 190 255 / 65%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 0 10px rgb(44 151 255 / 13%);
}

.colorspace-tile:hover {
  z-index: 1;
  border-color: rgb(126 204 255 / 82%);
  filter: saturate(1.08) brightness(1.08);
  opacity: 1;
  box-shadow: 0 5px 14px rgb(0 0 0 / 28%);
  transform: translateY(-1px);
}

.colorspace-tile:active {
  cursor: grabbing;
  transform: translateY(0) scale(.98);
}

.colorspace-tile--dragging {
  cursor: grabbing;
  filter: saturate(.5) brightness(.7);
  opacity: .34;
  transform: scale(.96);
}

.colorspace-tile-grid--dragging .colorspace-tile:not(.colorspace-tile--dragging) {
  filter: grayscale(.18) saturate(.58) brightness(.86);
}

.colorspace-tile:focus-visible {
  outline: 2px solid #4b9cff;
  outline-offset: 2px;
}

.colorspace-tile-name {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: calc(100% - 8px);
  color: var(--model-name-color, white);
  font-size: clamp(9px, 1.6cqh, 11px);
  font-weight: 720;
  line-height: 1;
  text-align: left;
  text-shadow: 0 1px 2px rgb(0 0 0 / 95%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colorspace-tile-cube {
  position: absolute;
  z-index: 0;
  top: 1px;
  right: 7px;
  width: 52px;
  height: 52px;
  overflow: visible;
  color: color-mix(in srgb, var(--model-name-color, white) 72%, white);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 55%));
  opacity: .28;
  pointer-events: none;
  transform: rotate(-4deg);
  transform-origin: center;
  transition: opacity 120ms ease, transform 120ms ease;
}

.colorspace-tile-cube-face {
  fill: currentColor;
  opacity: .055;
}

.colorspace-tile-cube-face--back {
  opacity: .025;
}

.colorspace-tile-cube-edges {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.colorspace-tile:not(.colorspace-tile--enabled) .colorspace-tile-cube {
  opacity: .17;
}

.colorspace-tile:hover .colorspace-tile-cube,
.colorspace-tile--enabled .colorspace-tile-cube {
  opacity: .44;
  transform: translate(-1px, -1px) rotate(-4deg);
}

.colorspace-tile-grip {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 5px;
  color: rgb(255 255 255 / 58%);
  font-size: 13px;
  line-height: 1;
  opacity: .55;
  text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
}

.colorspace-tile:hover .colorspace-tile-grip {
  opacity: 1;
}

.colorspace-tile-check {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: white;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: rgb(34 119 211 / 92%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 34%);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
}

.colorspace-tile--enabled .colorspace-tile-check {
  opacity: 1;
}

.colorspace-inspector {
  display: flex;
  flex: 0 0 220px;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid rgb(255 255 255 / 8%);
  background: color-mix(in srgb, var(--main-bg-color-props) 90%, transparent);
}

.colorspace-description-panel {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 16px;
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.45;
}

.colorspace-inspector-eyebrow {
  margin-bottom: 5px;
  color: rgb(82 169 246);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.colorspace-inspector-title {
  overflow: hidden;
  margin-bottom: 12px;
  color: var(--main-text-color-deep);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colorspace-description-content {
  max-width: 100%;
}

.colorspace-description-panel .label-desc {
  margin-top: 7px;
}

.colorspace-footer {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
  padding: 12px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.colorspace-config-button {
  min-width: 76px;
  height: 32px;
  padding: 0 12px;
  color: var(--main-text-color-deep);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 6%);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.colorspace-config-button:hover {
  border-color: rgb(92 179 255 / 58%);
  background: rgb(92 179 255 / 12%);
}

.colorspace-config-button--filter {
  min-width: 0;
  grid-column: 1 / -1;
  color: var(--button-text-inactive-color);
}

.colorspace-config-button--filter.is-active {
  color: rgb(104 190 255);
}

.colorspace-config-button--primary {
  color: white;
  border-color: rgb(67 155 235 / 74%);
  background: linear-gradient(180deg, rgb(65 158 242), rgb(32 112 205));
  box-shadow: 0 3px 10px rgb(21 93 177 / 26%);
}

@container (max-width: 760px) {
  .colorspace-config-hint,
  #conf_wrap .window-header-subtitle {
    display: none;
  }

  .colorspace-tile-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .colorspace-inspector {
    display: flex;
    flex: 0 0 180px;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 8%);
  }

  .colorspace-description-panel {
    padding: 12px;
  }

  .colorspace-inspector-title {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .colorspace-footer {
    width: auto;
    border-top: 1px solid rgb(255 255 255 / 8%);
    border-left: 0;
  }
}

tr.tr-sep td {
   border-top: calc(var(--scale-factor) * 16px) solid transparent;
}

#pick_color_block {
    box-sizing: border-box;
    position: absolute;
    z-index: 4;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px;
    padding: 0 6px;
    height: 100px;
    color: var(--props-text-color);
    border-top: 1px solid rgb(255 255 255 / 8%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 45%),
        var(--main-bg-color-props);
    box-shadow: 0 -5px 14px rgb(0 0 0 / 12%);
}

.lab-curve-visuals {
    display: flex;
    height: 100px;
    align-items: center;
    gap: 6px;
}

.lab-curve-angle-map {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
}

.lab-curve-opponent-swatch {
    display: grid;
    width: 40px;
    height: 40px;
    overflow: hidden;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 6px;
    box-shadow:
        0 2px 7px rgb(0 0 0 / 24%),
        0 0 0 2px rgb(255 255 255 / 4%);
}

.lab-curve-opponent-swatch > div {
    border: 0 !important;
}

.lab-curve-controls {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 4px;
    padding: 5px 0;
}

.lab-curve-controls-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
}

.lab-curve-controls-heading strong {
    color: var(--button-text-color);
    font-size: calc(0.49 * var(--menu-t));
    font-weight: 700;
}

.lab-curve-controls-heading span {
    overflow: hidden;
    color: var(--button-text-inactive-color);
    font-size: calc(0.39 * var(--menu-t));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-curve-actions {
    display: flex;
    min-width: 0;
    gap: 3px;
}

.lab-curve-action,
.lab-curve-drag-control {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    height: 26px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 7px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 5%), transparent),
        var(--button-bg-color);
    font: inherit;
    font-size: calc(0.43 * var(--menu-t));
    font-weight: 620;
    cursor: pointer;
}

.lab-curve-action:hover,
.lab-curve-drag-control:hover {
    color: var(--button-text-hover-color);
    border-color: rgb(107 184 255 / 35%);
}

.lab-curve-action:active,
.lab-curve-drag-control:active {
    transform: translateY(1px);
}

.lab-curve-action:focus-visible,
.lab-curve-drag-control:focus-visible {
    outline: 2px solid #62a8ff;
    outline-offset: 1px;
}

.lab-curve-action--active {
    color: var(--selected-control-text-color);
    border-color: rgb(85 166 240 / 52%);
    background: rgb(55 133 207 / 15%);
}

.lab-curve-drag-controls {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
}

.lab-curve-drag-control {
    justify-content: space-between;
    cursor: ew-resize;
}

.lab-curve-drag-control strong {
    color: rgb(139 200 255);
    font-size: inherit;
}

.lab-curve-drag-control span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


span.checkbox-text {
   color: var(--props-text-color);
}

.palette-sample {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.wheel-handle {
  background: #dddddd;
  box-shadow: 0 0 3px #9ecaed;
}

.wheel-handle:hover {
  box-shadow: 0 0 10px #9ecaff;
}

.volume-handle {
  box-sizing: border-box;
  min-width: 12px;
  min-height: 12px;
  border: 2px solid rgb(216 239 255 / 92%);
  background: rgb(28 36 47 / 94%);
  box-shadow:
    0 0 0 2px rgb(72 164 238 / 22%),
    0 2px 6px rgb(0 0 0 / 42%);
  cursor: grab;
}

.volume-handle:hover {
  border-color: #fff;
  box-shadow:
    0 0 0 3px rgb(83 178 255 / 28%),
    0 0 12px rgb(104 191 255 / 58%);
}

.volume-handle--shadows {
  border-color: #fff;
  background: #050505;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 82%),
    0 2px 6px rgb(0 0 0 / 52%);
}

.volume-handle--highlights {
  border-color: #111;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 94%),
    0 2px 6px rgb(0 0 0 / 52%);
}

.volume-handle--highlights:hover {
  border-color: #050505;
}


.lut-modified-ab .settings-projection-ab div { color: green; }
.lut-modified-al .settings-projection-al div { color: green; }
.lut-modified-bl .settings-projection-bl div { color: green; }
.lut-modified-hl .settings-projection-hl div { color: green; }
.lut-modified-ha .settings-projection-ha div { color: green; }
.lut-modified-cl .settings-projection-cl div { color: green; }
.lut-modified-wb .settings-projection-wb div { color: green; }
.lut-modified-bp .settings-projection-bp div { color: green; }
.lut-modified-ww .settings-projection-ww div { color: green; }
.lut-modified-bb .settings-projection-bb div { color: green; }

.lut-modified-rg .settings-projection-rg div { color: green; }
.lut-modified-gb .settings-projection-gb div { color: green; }
.lut-modified-br .settings-projection-br div { color: green; }

#license_info {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 200px; /* Need a specific value to work */
  background-color: var(--main-bg-color-props);
  border:1px solid var(--tab-border-color) !important;
  z-index: 9100;
  display: none;
  padding: 30px;
}

body.can-see-license-info  #license_info {
  display: block;
}

#reset_license_btn {
  color: red;
}

.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--main-bg-color);
    z-index: 9998;
    padding: 15px;
    border-radius: 5px;
    color: var(--props-text-color);
    border: 0.3px solid var(--tab-border-color);
}

.modal-backdrop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    z-index: 9997;
    opacity: 90%;
}

label.topcoat-button-bar__item:has(> input[disabled]) {
    opacity: 0.5;
}
label.topcoat-button-bar__item:has(> input[disabled]) div:before {
    color: red !important;
}

.tools-sliders span:hover {
    color: var(--button-text-hover-color);
}
.tools-sliders span {
    color: var(--button-text-color);
    font-size: calc(var(--btn-size-t) * 0.8);
}

#props_container .tools-panel {
    display: grid;
    gap: 10px;
    padding: 9px;
}

#props_container .preset-group-container:has(.tools-panel) {
    overflow: visible;
}

#props_container .tools-shortcuts {
    position: sticky;
    z-index: 12;
    top: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
    margin: -2px -2px 1px;
    padding: 5px;
    border: 1px solid rgb(126 193 255 / 23%);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgb(49 58 69 / 96%), rgb(31 38 47 / 96%)),
      var(--main-bg-color-props);
    box-shadow:
      0 8px 22px rgb(0 0 0 / 24%),
      inset 0 1px rgb(255 255 255 / 7%);
    backdrop-filter: blur(12px);
}

#props_container .tools-shortcuts--with-next {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#props_container .tools-shortcut {
    --tool-accent: 137 199 255;
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    min-height: 35px;
    grid-template-rows: 15px auto;
    place-items: center;
    gap: 2px;
    padding: 4px 3px;
    color: var(--button-text-inactive-color);
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: calc(0.49 * var(--menu-t));
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

#props_container .tools-shortcut > span:first-child {
    color: rgb(var(--tool-accent));
    font-size: calc(0.62 * var(--menu-t));
}

#props_container .tools-shortcut:hover {
    color: var(--button-text-hover-color);
    border-color: rgb(var(--tool-accent) / 32%);
    background: rgb(var(--tool-accent) / 11%);
}

#props_container .tools-shortcut:active {
    transform: translateY(1px);
}

#props_container .tools-shortcut:focus-visible {
    outline: 2px solid rgb(var(--tool-accent));
    outline-offset: -1px;
}

#props_container .tools-shortcut--select,
#props_container .tool-group--select {
    --tool-accent: 105 177 255;
}

#props_container .tools-shortcut--refine,
#props_container .tool-group--refine {
    --tool-accent: 179 145 255;
}

#props_container .tools-shortcut--move,
#props_container .tool-group--move {
    --tool-accent: 239 178 100;
}

#props_container .tools-shortcut--smooth,
#props_container .tool-group--smooth {
    --tool-accent: 105 211 167;
}

#props_container .tools-shortcut--next,
#props_container .tool-group--next {
    --tool-accent: 242 139 132;
}

#props_container .tool-section.tool-group {
    border-color: rgb(var(--tool-accent) / 19%);
    background:
      linear-gradient(90deg, rgb(var(--tool-accent) / 7%), transparent 46%),
      rgb(255 255 255 / 2.5%);
    box-shadow:
      inset 3px 0 rgb(var(--tool-accent) / 48%),
      inset 0 1px rgb(255 255 255 / 2%);
}

#props_container .tool-adjustments.tool-group--move > .tool-section:not(.tool-group--smooth) {
    border-color: rgb(var(--tool-accent) / 19%);
    background:
      linear-gradient(90deg, rgb(var(--tool-accent) / 6%), transparent 46%),
      rgb(255 255 255 / 2.5%);
    box-shadow:
      inset 3px 0 rgb(var(--tool-accent) / 42%),
      inset 0 1px rgb(255 255 255 / 2%);
}

#props_container .tool-group .tool-action-icon {
    color: rgb(var(--tool-accent));
    border-color: rgb(var(--tool-accent) / 24%);
    background: rgb(var(--tool-accent) / 10%);
}

#props_container .tool-group .tool-action:hover,
#props_container .tool-group .tool-drag-control:hover {
    border-color: rgb(var(--tool-accent) / 38%);
    background-color: rgb(var(--tool-accent) / 9%);
}

#props_container .tool-group .tool-action:active,
#props_container .tool-group .tool-drag-control:active {
    border-color: rgb(var(--tool-accent) / 58%);
}

#props_container .tool-group .tool-action:focus-visible,
#props_container .tool-group .tool-drag-control:focus-visible,
#props_container .tool-group .tool-mode:has(input:focus-visible) {
    outline-color: rgb(var(--tool-accent));
}

#props_container .tool-group .tool-mode:has(input:checked) {
    border-color: rgb(var(--tool-accent) / 56%);
    background: linear-gradient(180deg, rgb(var(--tool-accent) / 17%), rgb(var(--tool-accent) / 7%));
}

#props_container .tool-group .tool-mode input {
    accent-color: rgb(var(--tool-accent));
}

#props_container .tool-group .tool-drag-arrows {
    color: rgb(var(--tool-accent) / 90%);
}

#props_container .tool-group-heading .tool-step-number {
    border-color: rgb(var(--tool-accent) / 78%);
    background: linear-gradient(180deg, rgb(var(--tool-accent) / 92%), rgb(var(--tool-accent) / 62%));
    box-shadow: 0 2px 8px rgb(var(--tool-accent) / 20%);
}

#props_container #tools-select,
#props_container #tools-refine,
#props_container #tools-move,
#props_container #tools-smooth,
#props_container #tools-next {
    scroll-margin-top: 58px;
}

#props_container .tool-intro {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    color: var(--button-text-color);
    border: 1px solid rgb(83 169 255 / 27%);
    border-radius: 6px;
    background: linear-gradient(135deg, rgb(70 155 245 / 13%), rgb(70 155 245 / 4%));
}

#props_container .tool-intro strong {
    font-size: calc(0.68 * var(--menu-t));
    line-height: 1.15;
}

#props_container .tool-intro span {
    color: var(--button-text-inactive-color);
    font-size: calc(0.56 * var(--menu-t));
    line-height: 1.35;
}

#props_container .tool-intro b {
    color: var(--button-text-color);
    font-weight: 650;
}

#props_container .tool-workflow-heading {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin-top: 2px;
}

#props_container .tool-workflow-heading > span:last-child {
    display: grid;
    gap: 2px;
}

#props_container .tool-workflow-heading strong {
    color: var(--button-text-color);
    font-size: calc(0.69 * var(--menu-t));
    line-height: 1.15;
}

#props_container .tool-workflow-heading small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.53 * var(--menu-t));
    line-height: 1.25;
}

#props_container .tool-step-number {
    box-sizing: border-box;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    color: white;
    border: 1px solid rgb(130 205 255 / 72%);
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(74 170 255), rgb(30 111 198));
    box-shadow: 0 2px 8px rgb(33 129 222 / 22%);
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 750;
}

#props_container .tool-section {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 6px;
    background: rgb(255 255 255 / 2.5%);
}

#props_container .tool-section h4 {
    color: var(--button-text-color);
    font-size: calc(0.6 * var(--menu-t));
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1.15;
}

#props_container .tool-section p {
    margin: -1px 0 1px;
    color: var(--button-text-inactive-color);
    font-size: calc(0.51 * var(--menu-t));
    line-height: 1.3;
}

#props_container .tool-section .tool-subheading {
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

#props_container .tool-action-grid,
#props_container .tool-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

#props_container .tool-action,
#props_container .tool-drag-control {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%)),
      var(--button-bg-color);
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#props_container .tool-action {
    grid-template-columns: 27px minmax(0, 1fr);
}

#props_container .tool-action:hover,
#props_container .tool-drag-control:hover {
    color: var(--button-text-hover-color);
    border-color: rgb(107 184 255 / 35%);
    background-color: rgb(78 156 235 / 8%);
}

#props_container .tool-action:active,
#props_container .tool-drag-control:active {
    transform: translateY(1px);
    border-color: rgb(107 184 255 / 55%);
}

#props_container .tool-action:focus-visible,
#props_container .tool-drag-control:focus-visible,
#props_container .tool-mode:has(input:focus-visible) {
    outline: 2px solid #62a8ff;
    outline-offset: 1px;
}

#props_container .tool-action-icon {
    box-sizing: border-box;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: rgb(141 202 255);
    border: 1px solid rgb(119 191 255 / 20%);
    border-radius: 5px;
    background: rgb(66 151 235 / 9%);
    font-size: calc(0.62 * var(--menu-t));
}

#props_container .tool-action-copy,
#props_container .tool-drag-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

#props_container .tool-action-name,
#props_container .tool-drag-name {
    color: inherit;
    font-size: calc(0.57 * var(--menu-t));
    font-weight: 650;
    line-height: 1.05;
}

#props_container .tool-action-detail,
#props_container .tool-drag-detail {
    color: var(--button-text-inactive-color);
    font-size: calc(0.48 * var(--menu-t));
    line-height: 1.15;
}

#props_container .tool-drag-name {
    font-size: calc(0.62 * var(--menu-t));
}

#props_container .tool-drag-detail {
    font-size: calc(0.52 * var(--menu-t));
}

#props_container .tool-adjustments {
    display: grid;
    gap: 10px;
    margin-top: 3px;
    padding-top: 11px;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

#props_container .tool-mode-grid {
    display: grid;
    gap: 4px;
}

#props_container .tool-mode {
    box-sizing: border-box;
    display: grid;
    min-height: 43px;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 5px;
    background: rgb(0 0 0 / 8%);
    cursor: pointer;
}

#props_container .tool-mode:has(input:checked) {
    border-color: rgb(84 174 255 / 56%);
    background: linear-gradient(180deg, rgb(75 165 250 / 17%), rgb(49 127 211 / 7%));
}

#props_container .tool-mode input {
    position: static;
    z-index: auto;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    opacity: 1;
    accent-color: #4ca6f8;
}

#props_container .tool-mode > span {
    display: grid;
    gap: 2px;
}

#props_container .tool-mode strong {
    color: var(--button-text-color);
    font-size: calc(0.56 * var(--menu-t));
    font-weight: 650;
    line-height: 1.05;
}

#props_container .tool-mode small {
    color: var(--button-text-inactive-color);
    font-size: calc(0.47 * var(--menu-t));
    line-height: 1.15;
}

#props_container .tool-drag-control {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    cursor: ew-resize;
    touch-action: none;
}

#props_container .tool-drag-value {
    min-width: 38px;
    padding: 4px 6px;
    color: var(--button-text-color);
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 4px;
    background: rgb(0 0 0 / 26%);
    box-shadow: inset 0 1px rgb(255 255 255 / 5%);
    font-size: calc(0.62 * var(--menu-t));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#props_container .tool-drag-arrows {
    color: rgb(135 199 255 / 90%);
    font-size: calc(0.64 * var(--menu-t));
    text-align: center;
}

#props_container .tool-advanced {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

#props_container .tool-advanced summary {
    color: var(--button-text-color);
    font-size: calc(0.54 * var(--menu-t));
    font-weight: 600;
    cursor: pointer;
}

#props_container .tool-advanced summary span {
    margin-left: 5px;
    padding: 2px 4px;
    color: var(--button-text-inactive-color);
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 3px;
    font-size: calc(0.4 * var(--menu-t));
    font-weight: 500;
    text-transform: uppercase;
}

#props_container .tool-advanced:not([open]) > :not(summary) {
    display: none !important;
}

#props_container .tool-advanced[open] {
    display: grid;
    gap: 6px;
}

#props_container .tool-advanced[open] summary {
    margin-bottom: 1px;
}

.hide-when-not-in-progress { opacity: 0; }
body.in-progress .hide-when-not-in-progress { opacity: 1; }

.icon-spin5::before {
    content: '★'; /* The character you want to rotate (star in this case) */
    display: inline-block; /* Needed for animation to work */
    animation: rotate 2s infinite linear
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.sliders-header {
    margin-top: 20px;
    border-top: 0.1px solid var(--tab-border-color);
}

.control-group {
   color: var(--wheel-panel-text);
}

.color-wheel {
    position: relative;
    box-sizing: border-box;
    width: min(164px, 100%);
    min-width: 112px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 4px auto 16px;
    background:
        radial-gradient(circle at center, transparent 58%, rgb(0 0 0 / 20%) 59%, rgb(255 255 255 / 18%) 60%, transparent 61%),
        conic-gradient(from 90deg, #3c43ff 0deg, #00d9ff 65deg, #1cf58a 126deg, #f5ea4e 184deg, #ff563f 244deg, #ff39c7 306deg, #3c43ff 360deg);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 12%),
        0 15px 34px rgb(0 0 0 / 46%),
        0 0 28px color-mix(in srgb, var(--wheel-panel-accent) 14%, transparent);
    cursor: crosshair;
    isolation: isolate;
    transition: filter 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}

.color-wheel:hover {
    filter: saturate(1.08) brightness(1.04);
    transform: scale(1.012);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 16%),
        0 18px 38px rgb(0 0 0 / 42%),
        0 0 34px color-mix(in srgb, var(--wheel-panel-accent) 18%, transparent);
}

.color-wheel::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 36%, rgb(47 54 70 / 94%), rgb(16 20 29 / 97%) 58%, rgb(4 6 10 / 99%) 100%);
    box-shadow: inset 0 0 32px rgb(0 0 0 / 72%), inset 0 0 0 1px rgb(255 255 255 / 6%);
    pointer-events: none;
}

.color-wheel-glow {
    position: absolute;
    z-index: -1;
    inset: 10%;
    border-radius: 50%;
    background: conic-gradient(from 90deg, #5360ff, #00e3ff, #32ff9b, #fff05e, #ff604d, #ff42cd, #5360ff);
    filter: blur(22px);
    opacity: 0.19;
    pointer-events: none;
}

.color-wheel-lines {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 13px;
    left: 13px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%) 18%, rgb(255 255 255 / 18%) 82%, transparent);
    pointer-events: none;
}

.color-wheel-lines2 {
    position: absolute;
    z-index: 1;
    top: 13px;
    bottom: 13px;
    left: 50%;
    width: 1px;
    background: linear-gradient(transparent, rgb(255 255 255 / 18%) 18%, rgb(255 255 255 / 18%) 82%, transparent);
    pointer-events: none;
}

.adjustment-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
    gap: 5px;
}

.adjustment-info-offset .wheel-channel-b {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: calc(50% - 2.5px);
    justify-self: center;
}

.wheel-control-card {
    position: relative;
    box-sizing: border-box;
    container-type: inline-size;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 15px;
    background:
        linear-gradient(145deg, var(--wheel-panel-card-highlight), transparent 45%),
        var(--wheel-panel-card);
    box-shadow: 0 12px 24px var(--wheel-panel-shadow), inset 0 1px var(--wheel-panel-card-highlight);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.wheel-control-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 15%;
    left: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wheel-panel-accent) 52%, transparent), transparent);
}

.wheel-control-card:hover {
    z-index: 1;
    border-color: color-mix(in srgb, var(--wheel-panel-accent) 34%, transparent);
    box-shadow: 0 17px 34px var(--wheel-panel-shadow), inset 0 1px var(--wheel-panel-card-highlight);
    transform: translateY(-1px);
}

.wheel-control-disabled {
    border-color: color-mix(in srgb, var(--wheel-panel-stroke) 65%, transparent);
}

.wheel-control-disabled .color-wheel,
.wheel-control-disabled .adjustment-info,
.wheel-control-disabled .wheel-control-heading > div:first-child {
    opacity: 0.24;
    filter: saturate(0.3);
}

.wheel-control-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 38px;
    margin-bottom: 6px;
    cursor: ew-resize;
}

.wheel-control-kicker,
.wheel-section-overline {
    color: var(--wheel-panel-accent);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

.wheel-control-title {
    margin-top: 3px;
    color: var(--wheel-panel-text);
    font-size: 16px;
    font-weight: 580;
    letter-spacing: -0.02em;
}

.wheel-control-index {
    color: color-mix(in srgb, var(--wheel-panel-text) 18%, transparent);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.08em;
}

.wheel-control-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wheel-power-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    color: var(--wheel-panel-muted);
    border: 0;
    border-radius: 5px;
    outline: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: color 140ms ease, background 140ms ease;
}

.wheel-power-switch:hover,
.wheel-power-switch:focus-visible {
    color: var(--wheel-panel-text);
    background: var(--wheel-panel-soft-hover);
}

.wheel-power-state {
    min-width: 17px;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-align: right;
}

.wheel-power-track {
    position: relative;
    box-sizing: border-box;
    width: 25px;
    height: 13px;
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 999px;
    background: var(--wheel-panel-soft-fill);
    transition: border-color 150ms ease, background 150ms ease;
}

.wheel-power-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wheel-panel-muted);
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.wheel-power-switch-on {
    color: var(--wheel-panel-accent);
}

.wheel-power-switch-on .wheel-power-track {
    border-color: color-mix(in srgb, var(--wheel-panel-accent) 62%, transparent);
    background: color-mix(in srgb, var(--wheel-panel-accent) 19%, var(--wheel-panel-soft-fill));
}

.wheel-power-switch-on .wheel-power-knob {
    background: var(--wheel-panel-accent);
    box-shadow: 0 0 5px color-mix(in srgb, var(--wheel-panel-accent) 65%, transparent);
    transform: translateX(12px);
}

.wheel-channel {
    position: relative;
    display: block;
    min-width: 0;
    padding: 6px 7px;
    color: var(--wheel-panel-channel-text);
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 6px;
    background: var(--wheel-panel-soft-fill);
    cursor: ew-resize;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.wheel-channel:hover {
    border-color: color-mix(in srgb, var(--wheel-panel-accent) 45%, transparent);
    background: color-mix(in srgb, var(--wheel-panel-accent) 8%, var(--wheel-panel-soft-fill));
    transform: translateY(-1px);
}

.wheel-channel-label {
    position: absolute;
    top: 50%;
    left: 7px;
    color: var(--wheel-panel-muted);
    font-size: 7px;
    font-weight: 800;
    transform: translateY(-50%);
}

.wheel-channel-value {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.wheel-channel-r .wheel-channel-value { color: var(--wheel-channel-r); }
.wheel-channel-g .wheel-channel-value { color: var(--wheel-channel-g); }
.wheel-channel-b .wheel-channel-value { color: var(--wheel-channel-b); }
.wheel-channel-y .wheel-channel-value { color: var(--wheel-channel-y); }

@container (min-width: 220px) {
    .adjustment-info {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (min-width: 165px) {
    .adjustment-info-offset {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .adjustment-info-offset .wheel-channel-b {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }
}

.wheel-card-grid {
    display: grid;
    gap: 12px;
    padding: 0 18px;
}

.wheel-card-grid-standard {
    grid-template-columns: repeat(4, minmax(112px, 1fr));
}

.wheel-card-grid-pair {
    grid-template-columns: repeat(2, minmax(180px, 270px));
    justify-content: center;
}

.wheel-card-grid-prism {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    max-width: 820px;
    margin: auto;
}

.wheel-card-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wheel-card-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

#wheel_panel.wheel-panel-dock-compact .wheel-tabs-shell {
    height: 44px;
    gap: 8px;
    padding: 5px 10px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-panel-identity,
#wheel_panel.wheel-panel-dock-compact .wheel-control-kicker,
#wheel_panel.wheel-panel-dock-compact .wheel-control-index,
#wheel_panel.wheel-panel-dock-compact .wheel-power-state {
    display: none;
}

#wheel_panel.wheel-panel-dock-compact .wheel-tabs {
    width: 100%;
}

#wheel_panel.wheel-panel-dock-compact .wheel-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 7px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-card-grid {
    gap: 7px;
    padding-inline: 9px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-control-card {
    padding: 7px;
    border-radius: 10px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-control-heading {
    align-items: center;
    min-height: 24px;
    margin-bottom: 2px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-control-title {
    margin-top: 0;
    font-size: 12px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-control-actions {
    gap: 3px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-power-switch {
    gap: 0;
    padding: 2px;
}

#wheel_panel.wheel-panel-dock-compact .color-wheel {
    width: min(112px, 100%);
    min-width: 0;
    margin: 1px auto 7px;
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 12%),
        0 7px 16px rgb(0 0 0 / 38%),
        0 0 16px color-mix(in srgb, var(--wheel-panel-accent) 12%, transparent);
}

#wheel_panel.wheel-panel-dock-compact .adjustment-info,
#wheel_panel.wheel-panel-dock-compact .adjustment-info-offset {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
}

#wheel_panel.wheel-panel-dock-compact .adjustment-info-offset .wheel-channel-b {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
}

#wheel_panel.wheel-panel-dock-compact .wheel-channel {
    min-height: 27px;
    padding: 12px 2px 2px;
    font-size: 8px;
}

#wheel_panel.wheel-panel-dock-compact .wheel-channel-label {
    top: 4px;
    left: 50%;
    font-size: 6px;
    transform: translateX(-50%);
}

#wheel_panel.wheel-panel-dock-compact .wheel-curve-card {
    margin-top: 9px;
}

.wheel-curve-card {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(180px, 1.3fr);
    align-items: center;
    gap: 22px;
    max-width: 620px;
    margin: 14px auto 28px;
    padding: 18px 22px;
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 15px;
    background: linear-gradient(125deg, var(--wheel-panel-card), color-mix(in srgb, var(--wheel-panel-shell) 82%, transparent));
    box-shadow: 0 15px 32px var(--wheel-panel-shadow);
}

.wheel-curve-title {
    margin: 6px 0;
    color: var(--wheel-panel-text);
    font-size: 18px;
}

.wheel-curve-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wheel-curve-detach {
    display: grid;
    width: 25px;
    height: 25px;
    padding: 0;
    place-items: center;
    color: var(--wheel-panel-muted);
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 6px;
    background: var(--wheel-panel-soft-fill);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.wheel-curve-detach:hover,
.wheel-curve-detach:focus-visible {
    color: var(--wheel-panel-accent);
    border-color: color-mix(in srgb, var(--wheel-panel-accent) 42%, transparent);
    background: color-mix(in srgb, var(--wheel-panel-accent) 9%, var(--wheel-panel-soft-fill));
    outline: 0;
}

.wheel-curve-caption {
    color: var(--wheel-panel-muted);
    font-size: 10px;
    line-height: 1.5;
}

.wheel-curve-visual {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--wheel-panel-stroke);
    border-radius: 10px;
    background:
        linear-gradient(145deg, var(--wheel-panel-card-highlight), transparent 55%),
        var(--wheel-panel-soft-fill);
    box-shadow: inset 0 1px var(--wheel-panel-card-highlight);
}

.wheel-curve-canvas {
    width: min(360px, 100%);
    min-width: 0;
    aspect-ratio: 1.55;
    border-radius: 7px;
    background-color: var(--wheel-curve-bg);
    box-shadow: 0 8px 20px var(--wheel-panel-shadow);
}

.wheel-curve-card-compact {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 18px;
}

.signal-curve-floating {
    --wheel-panel-text: #e4e8ed;
    --wheel-panel-muted: #9ba3ad;
    --wheel-panel-accent: #79bff2;
    --wheel-panel-stroke: rgb(255 255 255 / 11%);
    --wheel-panel-card-highlight: rgb(255 255 255 / 4%);
    --wheel-panel-shadow: rgb(0 0 0 / 24%);
    --wheel-curve-bg: transparent;
    --wheel-curve-grid: rgb(255 255 255 / 8%);
    --wheel-curve-axis: rgb(255 255 255 / 28%);
    --wheel-curve-r: #ff6b66;
    --wheel-curve-g: #51d38c;
    --wheel-curve-b: #8298ff;
    --wheel-curve-y: #e6eaf0;
    --wheel-curve-blend: screen;
    --button-text-color: #e4e8ed;
    --button-text-inactive-color: #8d96a1;
    pointer-events: auto;
    color: var(--wheel-panel-text);
    background: rgb(12 15 19 / 48%) !important;
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 10px 26px rgb(0 0 0 / 24%) !important;
}

.signal-curve-floating > .preset-group-header {
    cursor: default;
    background: rgb(10 13 17 / 34%) !important;
}

.signal-curve-panel-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: var(--wheel-panel-accent);
    font-size: 18px;
}

.signal-curve-floating-body {
    box-sizing: border-box;
    display: flex;
    min-height: 0;
    padding: 3px;
    flex-direction: column;
    gap: 4px;
    background: transparent;
}

.signal-curve-floating-body .wheel-curve-visual {
    min-height: 0;
    padding: 2px;
    flex: 1 1 auto;
    align-items: center;
    border-color: rgb(255 255 255 / 8%);
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.signal-curve-floating-body .wheel-curve-canvas {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 4px;
    background-color: transparent;
    box-shadow: none;
}

.signal-curve-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: var(--wheel-panel-muted);
    font-size: 8px;
    font-weight: 700;
}

.signal-curve-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.signal-curve-legend i {
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.signal-curve-legend-r { color: var(--wheel-curve-r); }
.signal-curve-legend-g { color: var(--wheel-curve-g); }
.signal-curve-legend-b { color: var(--wheel-curve-b); }
.signal-curve-legend-y { color: var(--wheel-curve-y); }

#wheel_panel .wheel-handle {
    z-index: 3;
    box-sizing: border-box;
    border: 2px solid #fff;
    background: #0c1118;
    box-shadow: 0 0 0 3px rgb(0 0 0 / 42%), 0 0 14px rgb(255 255 255 / 70%);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

#wheel_panel .wheel-handle:hover {
    box-shadow: 0 0 0 3px rgb(0 0 0 / 50%), 0 0 20px var(--wheel-panel-accent);
    transform: scale(1.22);
}

@keyframes wheel-tab-line-in {
    from { opacity: 0; transform: scaleX(0.2); }
    to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    #wheel_panel *,
    #wheel_panel *::before,
    #wheel_panel *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 760px) {
    .wheel-panel-identity { display: none; }
    .wheel-tabs-shell { justify-content: center; }
    .wheel-tab { min-width: 62px; padding-inline: 8px; }
}

@media (max-width: 430px) {
    .wheel-curve-card { grid-template-columns: 1fr; margin-inline: 18px; }
}

.topcoat-checkbox__checkmark:after {
  /* Unset default 1px */
  left: unset !important;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay-body {
  background-color: var(--main-bg-color);
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--button-text-color);
  color: var(--props-text-color);
  padding: 10px
}

/* Compact session network meter, inspired by classic dial-up transfer monitors. */
.network-speed-overlay {
  --network-download: var(--colorplane-accent);
  --network-upload: var(--colorplane-accent-soft);
  position: fixed;
  z-index: 9990;
  right: 12px;
  bottom: 12px;
  box-sizing: border-box;
  width: 238px;
  overflow: hidden;
  padding: 0;
  color: #dbe9f8;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 28%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(22 29 40 / 86%), rgb(10 16 27 / 88%)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(var(--colorplane-accent-rgb) / 3%) 8px);
  box-shadow:
    0 10px 30px rgb(0 0 0 / 48%),
    inset 0 1px rgb(255 255 255 / 7%),
    0 0 0 1px rgb(0 0 0 / 60%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transform-origin: bottom right;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.network-speed-overlay::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgb(0 0 0 / 10%) 3px
  );
  content: '';
  pointer-events: none;
}

.network-speed-overlay.is-visible {
  opacity: .9;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.network-speed-overlay.is-dragging {
  cursor: grabbing;
  opacity: .96;
}

.network-speed-overlay__drag-handle {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  color: rgb(var(--colorplane-accent-rgb) / 72%);
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.network-speed-overlay__drag-handle:hover,
.network-speed-overlay__drag-handle:focus-visible {
  color: #eaf4ff;
  outline: 1px solid rgb(var(--colorplane-accent-rgb) / 64%);
  background: rgb(var(--colorplane-accent-rgb) / 12%);
}

.network-speed-overlay.is-expanded {
  width: min(468px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}

.network-speed-overlay__summary {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 9px 7px 28px;
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: grab;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  touch-action: none;
}

.network-speed-overlay.is-dragging .network-speed-overlay__summary {
  cursor: grabbing;
}

.network-speed-overlay__summary:focus-visible {
  box-shadow: inset 0 0 0 1px var(--network-download);
}

.network-speed-overlay__context-menu {
  position: fixed;
  z-index: 2147483630;
  min-width: 184px;
  padding: 5px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 32%);
  border-radius: 8px;
  background: rgb(18 25 36 / 96%);
  box-shadow: 0 12px 28px rgb(0 0 0 / 42%);
}

.network-speed-overlay__context-menu button {
  width: 100%;
  padding: 8px 10px;
  color: #dbeafe;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font: 12px/1.2 inherit;
  text-align: left;
}

.network-speed-overlay__context-menu button:hover,
.network-speed-overlay__context-menu button:focus-visible {
  outline: none;
  background: rgb(var(--colorplane-accent-rgb) / 16%);
}

.network-speed-overlay__summary:hover .network-speed-overlay__graph {
  border-color: rgb(104 231 213 / 38%);
}

.network-speed-overlay__header,
.network-speed-overlay__rates > span,
.network-speed-overlay__totals {
  display: flex;
  align-items: center;
}

.network-speed-overlay__header {
  position: relative;
  z-index: 1;
  gap: 6px;
  margin-bottom: 6px;
  color: rgb(192 219 217 / 72%);
  font-size: 8px;
  text-transform: uppercase;
}

.network-speed-overlay__header strong {
  color: #e7f7f5;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .13em;
}

.network-speed-overlay__header > :last-child {
  margin-left: auto;
  color: rgb(140 251 225 / 78%);
}

.network-speed-overlay__lamp {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--network-download);
  box-shadow: 0 0 8px var(--network-download);
  animation: network-speed-lamp 850ms steps(2, end) infinite;
}

.network-speed-overlay__graph {
  position: relative;
  z-index: 1;
  display: block;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgb(104 201 190 / 18%);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgb(89 246 210 / 3%), transparent 58%),
    rgb(0 5 7 / 74%);
  box-shadow: inset 0 0 14px rgb(0 0 0 / 65%);
}

.network-speed-overlay__graph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.network-speed-overlay__grid-line {
  fill: none;
  stroke: rgb(160 232 222 / 9%);
  stroke-width: .6;
}

.network-speed-overlay__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
}

.network-speed-overlay__line--download {
  stroke: var(--network-download);
  filter: drop-shadow(0 0 2px rgb(89 246 210 / 72%));
}

.network-speed-overlay__line--upload {
  stroke: var(--network-upload);
  filter: drop-shadow(0 0 2px rgb(255 180 84 / 66%));
}

.network-speed-overlay__graph-label {
  position: absolute;
  top: 3px;
  right: 4px;
  color: rgb(205 237 232 / 28%);
  font-size: 6px;
  letter-spacing: .11em;
}

.network-speed-overlay__rates {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 6px;
  gap: 6px;
}

.network-speed-overlay__rates > span {
  min-width: 0;
  gap: 4px;
  color: rgb(201 222 220 / 54%);
  font-size: 7px;
}

.network-speed-overlay__rates strong {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #effcf9;
  font-size: 9px;
  font-weight: 690;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-speed-overlay__direction {
  font-size: 12px;
  line-height: 1;
}

.network-speed-overlay__direction--download {
  color: var(--network-download);
}

.network-speed-overlay__direction--upload {
  color: var(--network-upload);
}

.network-speed-overlay__totals {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 5px;
  color: rgb(188 213 210 / 44%);
  border-top: 1px solid rgb(144 219 210 / 10%);
  font-size: 7px;
}

.network-speed-overlay__tasks {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 150px;
  max-height: min(520px, calc(100vh - 176px));
  flex-direction: column;
  border-top: 1px solid rgb(113 203 193 / 22%);
  background:
    linear-gradient(180deg, rgb(3 11 14 / 94%), rgb(8 15 18 / 98%)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(118 235 214 / 3%) 8px);
}

.network-speed-overlay__tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 7px;
  color: rgb(140 251 225 / 66%);
  border-bottom: 1px solid rgb(144 219 210 / 10%);
  font-size: 7px;
}

.network-speed-overlay__tasks-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.network-speed-overlay__tasks-header strong {
  color: #e7f7f5;
  font-size: 9px;
  letter-spacing: .12em;
}

.network-speed-overlay__tasks-header div span {
  color: rgb(188 213 210 / 38%);
  letter-spacing: .08em;
}

.network-speed-overlay__tasks-header .network-speed-overlay__tasks-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.network-speed-overlay__autoscroll {
  padding: 3px 5px 2px;
  color: rgb(188 213 210 / 46%);
  border: 1px solid rgb(113 203 193 / 18%);
  border-radius: 2px;
  outline: 0;
  background: rgb(89 246 210 / 3%);
  cursor: pointer;
  font: inherit;
  font-size: 6px;
  letter-spacing: .04em;
}

.network-speed-overlay__autoscroll:hover,
.network-speed-overlay__autoscroll:focus-visible {
  color: #e7f7f5;
  border-color: rgb(113 203 193 / 42%);
}

.network-speed-overlay__autoscroll.is-enabled {
  color: #071513;
  border-color: var(--network-download);
  background: var(--network-download);
  box-shadow: 0 0 7px rgb(89 246 210 / 42%);
}

.network-speed-overlay__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  color: rgb(188 213 210 / 44%);
  border-bottom: 1px solid rgb(144 219 210 / 8%);
  font-size: 7px;
  text-transform: uppercase;
}

.network-speed-overlay__legend > :last-child {
  margin-left: auto;
}

.network-speed-overlay__legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.network-speed-overlay__legend i {
  display: block;
  width: 11px;
  height: 3px;
  border-radius: 1px;
}

.network-speed-overlay__legend .is-reading {
  background: var(--network-download);
  box-shadow: 0 0 5px rgb(89 246 210 / 50%);
}

.network-speed-overlay__legend .is-repeat {
  background: #ff5266;
  box-shadow: 0 0 5px rgb(255 82 102 / 64%);
}

.network-speed-overlay__legend .is-write {
  background: var(--network-upload);
  box-shadow: 0 0 5px rgb(255 180 84 / 58%);
}

.network-speed-overlay__task-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(98 190 178 / 44%) transparent;
  scrollbar-width: thin;
}

.network-speed-overlay__empty {
  padding: 36px 12px;
  color: rgb(188 213 210 / 42%);
  font-size: 8px;
  text-align: center;
}

.network-speed-file {
  position: relative;
  border-bottom: 1px solid rgb(144 219 210 / 9%);
}

.network-speed-file.is-child {
  margin-left: 17px;
  border-left: 1px solid rgb(104 201 190 / 17%);
  background: rgb(89 246 210 / 1.5%);
}

.network-speed-file.is-child::before {
  position: absolute;
  width: 11px;
  height: 1px;
  margin-top: 19px;
  margin-left: -17px;
  background: rgb(104 201 190 / 21%);
  content: '';
}

.network-speed-file__summary {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px 7px;
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.network-speed-file__summary:hover,
.network-speed-file__summary:focus-visible {
  background: rgb(112 234 216 / 4%);
}

.network-speed-file__summary:focus-visible {
  box-shadow: inset 2px 0 var(--network-download);
}

.network-speed-file__topline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.network-speed-file__topline strong {
  min-width: 0;
  overflow: hidden;
  color: #e6f2f1;
  font-size: 9px;
  font-weight: 660;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-speed-file__chevron {
  flex: 0 0 auto;
  width: 9px;
  color: rgb(140 251 225 / 54%);
  font-size: 13px;
  line-height: 1;
  transform-origin: center;
  transition: transform 120ms ease;
}

.network-speed-file.is-expanded .network-speed-file__chevron {
  transform: rotate(90deg);
}

.network-speed-file__count {
  flex: 0 0 auto;
  color: rgb(188 213 210 / 46%);
  font-size: 7px;
}

.network-speed-file__summary .network-speed-task__path {
  display: block;
  margin-left: 51px;
}

.network-speed-file__coverage {
  display: block;
}

.network-speed-file__coverage .network-speed-task__accessed {
  opacity: .58;
}

.network-speed-file__coverage .network-speed-task__accessed.is-repeat {
  z-index: 2;
  background: linear-gradient(90deg, rgb(255 82 102 / 66%), #ff5266);
  box-shadow: 0 0 9px rgb(255 82 102 / 76%);
  animation: network-access-repeat 620ms ease-in-out 4 alternate;
}

.network-speed-file__coverage .network-speed-task__accessed.is-write {
  z-index: 1;
  background: linear-gradient(90deg, rgb(255 180 84 / 58%), var(--network-upload));
  box-shadow: 0 0 7px rgb(255 180 84 / 62%);
}

.network-speed-directory__file-strip {
  display: flex;
  min-height: 19px;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 3px 4px;
  border: 1px solid rgb(104 201 190 / 12%);
  border-radius: 2px;
  background: rgb(0 5 7 / 62%);
}

.network-speed-directory__file-strip > span {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  color: rgb(188 213 210 / 45%);
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-speed-directory__file-strip i {
  display: block;
  width: 4px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--network-download);
  box-shadow: 0 0 5px rgb(89 246 210 / 54%);
}

.network-speed-directory__file-strip .network-speed-directory__no-files {
  justify-content: center;
  color: rgb(188 213 210 / 30%);
}

.network-speed-file__summary-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 5px;
  color: rgb(188 213 210 / 42%);
  font-size: 7px;
}

.network-speed-file__summary-meta span:nth-child(2) {
  text-align: center;
}

.network-speed-file__summary-meta span:last-child {
  color: rgb(140 251 225 / 48%);
  text-align: right;
}

.network-speed-file__tree {
  position: relative;
  border-top: 1px solid rgb(144 219 210 / 8%);
  background:
    linear-gradient(90deg, rgb(89 246 210 / 3%), transparent 36%),
    rgb(0 5 7 / 42%);
}

.network-speed-file__children {
  border-top: 1px solid rgb(144 219 210 / 8%);
  background:
    linear-gradient(90deg, rgb(89 246 210 / 3%), transparent 44%),
    rgb(0 5 7 / 34%);
}

.network-speed-directory__listing-label {
  padding: 5px 10px 4px 35px;
  color: rgb(188 213 210 / 28%);
  border-bottom: 1px solid rgb(144 219 210 / 7%);
  font-size: 6px;
  letter-spacing: .08em;
}

.network-speed-file__tree::before {
  position: absolute;
  top: 0;
  bottom: 11px;
  left: 18px;
  width: 1px;
  background: rgb(104 201 190 / 17%);
  content: '';
}

.network-speed-task {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 7px 10px 7px 8px;
  border-bottom: 1px solid rgb(144 219 210 / 8%);
  background: rgb(255 255 255 / 0%);
}

.network-speed-task:last-child {
  border-bottom: 0;
}

.network-speed-task:hover {
  background: rgb(112 234 216 / 3%);
}

.network-speed-task.is-error {
  background: rgb(255 82 102 / 5%);
}

.network-speed-file__branch {
  position: relative;
  z-index: 1;
  flex: 0 0 27px;
  padding-top: 1px;
  color: rgb(104 201 190 / 30%);
  background: rgb(3 10 12);
  font-size: 8px;
  line-height: 14px;
}

.network-speed-task__body {
  min-width: 0;
  flex: 1 1 auto;
}

.network-speed-task__topline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.network-speed-task__topline strong {
  min-width: 0;
  overflow: hidden;
  color: #e6f2f1;
  font-size: 9px;
  font-weight: 660;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-speed-task__amount {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 3px;
  color: rgb(188 213 210 / 48%);
  font-size: 6px;
  text-transform: uppercase;
}

.network-speed-task__amount b {
  color: var(--network-download);
  font-size: 8px;
  font-weight: 720;
  letter-spacing: -.01em;
  text-shadow: 0 0 6px rgb(89 246 210 / 28%);
}

.network-speed-task.is-write .network-speed-task__amount b {
  color: var(--network-upload);
  text-shadow: 0 0 6px rgb(255 180 84 / 28%);
}

.network-speed-task__type {
  flex: 0 0 auto;
  min-width: 35px;
  padding: 2px 3px 1px;
  color: rgb(135 238 216 / 76%);
  border: 1px solid rgb(113 203 193 / 19%);
  border-radius: 2px;
  background: rgb(89 246 210 / 5%);
  font-size: 6px;
  letter-spacing: .08em;
  text-align: center;
}

.network-speed-task__again {
  flex: 0 0 auto;
  color: #ff7988;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: .06em;
  text-shadow: 0 0 7px rgb(255 82 102 / 64%);
}

.network-speed-task__state {
  flex: 0 0 auto;
  margin-left: auto;
  color: rgb(188 213 210 / 36%);
  font-size: 6px;
  text-transform: uppercase;
}

.network-speed-task.is-connecting .network-speed-task__state,
.network-speed-task.is-reading .network-speed-task__state {
  color: var(--network-download);
}

.network-speed-task.is-error .network-speed-task__state {
  color: #ff7988;
}

.network-speed-task.is-write .network-speed-task__type {
  color: var(--network-upload);
  border-color: rgb(255 180 84 / 24%);
  background: rgb(255 180 84 / 6%);
}

.network-speed-task__path {
  overflow: hidden;
  margin: 4px 0 5px 44px;
  color: rgb(188 213 210 / 38%);
  font-size: 7px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-speed-task__access {
  position: relative;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgb(104 201 190 / 12%);
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      rgb(156 228 218 / 7%) 0,
      rgb(156 228 218 / 7%) calc(6.25% - 1px),
      transparent calc(6.25% - 1px),
      transparent 6.25%
    ),
    rgb(0 5 7 / 74%);
  box-shadow: inset 0 0 7px rgb(0 0 0 / 70%);
}

.network-speed-task__accessed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 2px;
  background:
    linear-gradient(90deg, rgb(89 246 210 / 56%), var(--network-download));
  box-shadow: 0 0 7px rgb(89 246 210 / 58%);
}

.network-speed-task__position {
  position: absolute;
  z-index: 4;
  top: -1px;
  width: 1px;
  height: 9px;
  background: #f3fffc;
  box-shadow: 0 0 4px rgb(243 255 252 / 90%);
}

.network-speed-task.is-reading .network-speed-task__accessed {
  animation: network-access-reading 950ms ease-in-out infinite alternate;
}

.network-speed-task.is-repeat .network-speed-task__accessed {
  background: linear-gradient(90deg, rgb(255 82 102 / 58%), #ff5266);
  box-shadow: 0 0 9px rgb(255 82 102 / 76%);
  animation: network-access-repeat 620ms ease-in-out 4 alternate;
}

.network-speed-task.is-write .network-speed-task__accessed {
  background: linear-gradient(90deg, rgb(255 180 84 / 58%), var(--network-upload));
  box-shadow: 0 0 7px rgb(255 180 84 / 62%);
}

.network-speed-task__meta {
  display: grid;
  grid-template-columns: minmax(132px, 1.25fr) minmax(76px, .7fr) minmax(140px, 1.25fr);
  margin-top: 5px;
  color: rgb(188 213 210 / 48%);
  font-size: 7px;
}

.network-speed-task__meta span:nth-child(2) {
  text-align: center;
}

.network-speed-task__meta span:last-child {
  text-align: right;
}

@keyframes network-speed-lamp {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: .35; }
}

@keyframes network-access-reading {
  from { filter: brightness(.78); }
  to { filter: brightness(1.25); }
}

@keyframes network-access-repeat {
  from { opacity: .45; filter: brightness(.86); }
  to { opacity: 1; filter: brightness(1.55); }
}

@media (max-width: 520px) {
  .network-speed-overlay {
    right: 7px;
    bottom: 7px;
    width: 214px;
  }

  .network-speed-overlay.is-expanded {
    width: calc(100vw - 14px);
  }

  .network-speed-task__meta {
    grid-template-columns: 1fr 1fr;
  }

  .network-speed-task__meta span:last-child {
    grid-column: 1 / -1;
    margin-top: 3px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-speed-overlay {
    transition: opacity 1ms linear;
  }

  .network-speed-overlay__lamp {
    animation: none;
  }

  .network-speed-task.is-reading .network-speed-task__accessed,
  .network-speed-task.is-repeat .network-speed-task__accessed {
    animation: none;
  }
}

/* Preset library */
#preset_container {
  --preset-accent: var(--colorplane-accent);
  --preset-accent-strong: var(--colorplane-accent-strong);
  --preset-border: color-mix(in srgb, var(--button-text-color) 13%, transparent);
  --preset-surface: color-mix(in srgb, var(--main-bg-color) 94%, var(--button-text-color) 6%);
  --preset-surface-raised: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-text-color) 12%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--button-text-color);
  background:
    radial-gradient(circle at 12% 0%, rgb(87 157 255 / 8%), transparent 34%),
    var(--main-bg-color);
}

#preset_buttons_panel {
  box-sizing: border-box;
  width: 100%;
  min-height: 149px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--preset-border);
  background: color-mix(in srgb, var(--main-bg-color) 93%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / 3%) inset;
}

.preset-panel-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.preset-panel-heading > div:first-child {
  display: grid;
  min-width: 0;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 7px;
}

.preset-panel-kicker {
  grid-column: 1 / -1;
  color: var(--button-text-inactive-color);
  font-size: calc(0.48 * var(--menu-t));
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}

.preset-panel-title {
  overflow: hidden;
  color: var(--button-text-color);
  font-size: calc(0.9 * var(--menu-t));
  font-weight: 680;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.look-library-filters {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.look-library-filters::-webkit-scrollbar {
  display: none;
}

.look-library-filter {
  box-sizing: border-box;
  height: 25px;
  flex: 0 0 auto;
  padding: 0 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 99px;
  background: transparent;
  font: inherit;
  font-size: calc(0.5 * var(--menu-t));
  font-weight: 640;
  cursor: pointer;
}

.look-library-filter:hover {
  color: var(--button-text-color);
  background: rgb(87 157 255 / 7%);
}

.look-library-filter--active {
  color: #e9f3ff;
  border-color: rgb(87 157 255 / 38%);
  background: rgb(87 157 255 / 16%);
}

.look-library-filter:focus-visible {
  outline: 2px solid var(--preset-accent);
  outline-offset: 1px;
}

.look-library-search {
  box-sizing: border-box;
  display: flex;
  height: 29px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--preset-border);
  border-radius: 7px;
  background: rgb(0 0 0 / 8%);
}

.look-library-search:focus-within {
  color: var(--button-text-color);
  border-color: color-mix(in srgb, var(--preset-accent) 65%, var(--preset-border));
  box-shadow: 0 0 0 2px rgb(87 157 255 / 11%);
}

.look-library-search svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.look-library-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--button-text-color);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: calc(0.5 * var(--menu-t));
}

.look-library-search input::placeholder {
  color: var(--button-text-inactive-color);
}

.look-library-intensity {
  display: grid;
  min-height: 26px;
  grid-template-columns: minmax(86px, auto) minmax(100px, 1fr) 42px;
  align-items: center;
  gap: 9px;
  color: var(--button-text-color);
  font-size: calc(0.47 * var(--menu-t));
  font-weight: 640;
}

.look-library-intensity input {
  --slider-track-size: 5px;

  width: 100%;
  min-width: 0;
  height: 18px;
  padding: 0;
  margin: 0;
  appearance: none;
  pointer-events: auto;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}

.look-library-intensity input::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      var(--preset-accent) 0,
      var(--preset-accent-strong) var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 18%) inset;
}

.look-library-intensity input::-moz-range-track {
  height: 5px;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      var(--preset-accent) 0,
      var(--preset-accent-strong) var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 18%) inset;
}

.look-library-intensity input::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-track-offset);
  appearance: none;
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
}

.look-library-intensity input::-moz-range-thumb {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
}

.look-library-intensity input:focus-visible {
  outline: 2px solid var(--preset-accent);
  outline-offset: 2px;
}

.look-library-intensity output {
  color: var(--preset-accent-strong);
  font-size: calc(0.47 * var(--menu-t));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.look-library-hint {
  margin: -1px 0 0;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: calc(0.43 * var(--menu-t));
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-panel-count,
#preset_container .preset-group-count {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--preset-border);
  border-radius: 99px;
  background: rgb(0 0 0 / 8%);
  font-size: calc(0.48 * var(--menu-t));
  font-weight: 650;
  line-height: 1;
}

.preset-panel-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.preset-panel-action {
  box-sizing: border-box;
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--button-text-color);
  border: 1px solid var(--preset-border);
  border-radius: 7px;
  background: var(--preset-surface-raised);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 8%) inset,
    0 2px 7px rgb(0 0 0 / 10%);
  font: inherit;
  font-size: calc(0.62 * var(--menu-t));
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease,
    transform 130ms ease;
}

.look-library-filter-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  place-items: center;
  border-radius: 99px;
  background: rgb(87 157 255 / 15%);
  font-size: 0.88em;
  line-height: 1;
}

.look-library-filter--active .look-library-filter-count {
  background: rgb(255 255 255 / 13%);
}

.preset-panel-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preset-panel-action--primary {
  color: #f7fbff;
  border-color: rgb(116 180 255 / 66%);
  background: linear-gradient(180deg, #659fff, var(--preset-accent-strong));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 24%) inset,
    0 4px 12px rgb(24 92 181 / 26%);
}

.preset-panel-action--quiet {
  width: 36px;
  padding: 0;
  color: var(--button-text-inactive-color);
  background: transparent;
  box-shadow: none;
}

.preset-panel-action:hover {
  border-color: color-mix(in srgb, var(--preset-accent) 62%, var(--preset-border));
  transform: translateY(-1px);
}

.preset-panel-action--primary:hover {
  background: linear-gradient(180deg, #75aaff, #3988ee);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 28%) inset,
    0 6px 16px rgb(24 92 181 / 32%);
}

.preset-panel-action:active {
  transform: translateY(0);
}

.preset-panel-action:focus-visible,
#preset_container .preset-button:focus-visible,
#preset_container .preset-group-header:focus-visible,
#preset_container .preset-card-actions button:focus-visible,
#preset_container .preset-card-info:focus-visible,
#preset_container .look-preview-source button:focus-visible {
  outline: 2px solid var(--preset-accent);
  outline-offset: 2px;
}

#presets_grid {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

#presets_grid_inside {
  box-sizing: border-box;
  min-height: 100%;
  padding: 12px 14px 62px;
}

/* The phone Film simulation is one reading surface: its heading, filters,
 * intensity control, recommendation, and style cards scroll together. */
body.phone-layout #preset_container {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body.phone-layout #preset_buttons_panel {
  min-height: 0;
  flex: 0 0 auto;
  padding: 8px 10px 7px;
  gap: 6px;
}

body.phone-layout #presets_grid {
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
}

body.phone-layout #presets_grid_inside {
  min-height: 0;
  padding: 10px 10px 24px;
}

body.phone-layout .look-preview-source {
  position: relative;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 7px 10px 0;
}

.look-preview-source {
  position: absolute;
  z-index: 8;
  right: 16px;
  bottom: 13px;
  display: flex;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--button-text-color) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-bg-color) 92%, var(--button-text-color) 8%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 8%) inset,
    0 5px 18px rgb(0 0 0 / 32%);
}

.look-preview-source button {
  box-sizing: border-box;
  display: flex;
  height: 25px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: calc(0.43 * var(--menu-t));
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.look-preview-source button:hover {
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--button-text-color) 9%, transparent);
}

.look-preview-source button.is-active {
  color: #fff;
  background: #286dbf;
  box-shadow: 0 1px 0 rgb(255 255 255 / 17%) inset;
}

.look-preview-source__icon {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 13px;
  height: 10px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.look-preview-source__icon--reference {
  border-color: rgb(255 255 255 / 72%);
  background: linear-gradient(120deg, #c84e67, #df9a50 30%, #d5cb66 48%, #5aa68b 67%, #5579b7 84%, #7d5b9f);
}

.look-preview-source__icon--photo::before {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 42%, currentColor 43% 58%, transparent 59%),
    linear-gradient(45deg, transparent 46%, currentColor 47% 61%, transparent 62%);
  content: '';
}

.look-recommendation {
  display: grid;
  margin-bottom: 11px;
  padding: 10px 11px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--button-text-color);
  border: 1px solid rgb(112 151 255 / 28%);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgb(129 101 255 / 16%), transparent 42%),
    linear-gradient(135deg, rgb(87 157 255 / 8%), rgb(139 94 220 / 6%)),
    var(--preset-surface);
  box-shadow: 0 5px 16px rgb(0 0 0 / 8%);
}

.look-recommendation__spark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #bcaaff;
  border: 1px solid rgb(169 145 255 / 28%);
  border-radius: 8px;
  background: rgb(131 97 244 / 11%);
  font-size: 15px;
}

.look-recommendation__copy {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 7px;
}

.look-recommendation__copy > span {
  color: color-mix(in srgb, var(--preset-accent) 76%, var(--button-text-color));
  font-size: calc(0.42 * var(--menu-t));
  font-weight: 720;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.look-recommendation__copy > strong {
  overflow: hidden;
  font-size: calc(0.58 * var(--menu-t));
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-recommendation__copy > p {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: calc(0.44 * var(--menu-t));
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-recommendation > button {
  height: 28px;
  padding: 0 9px;
  color: #e9f4ff;
  border: 1px solid rgb(87 157 255 / 42%);
  border-radius: 6px;
  background: rgb(57 126 219 / 34%);
  font: inherit;
  font-size: calc(0.49 * var(--menu-t));
  font-weight: 670;
  cursor: pointer;
}

.look-recommendation > button:hover:not(:disabled) {
  border-color: rgb(111 174 255 / 68%);
  background: rgb(57 126 219 / 48%);
}

.look-recommendation > button:disabled {
  color: var(--button-text-inactive-color);
  border-color: var(--preset-border);
  background: transparent;
  cursor: default;
}

.look-recommendation > button:focus-visible {
  outline: 2px solid var(--preset-accent);
  outline-offset: 2px;
}

.variants-pane {
  --preset-border: color-mix(in srgb, var(--button-text-color) 13%, transparent);
  --preset-surface: color-mix(in srgb, var(--main-bg-color) 94%, var(--button-text-color) 6%);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px 14px;
  overflow: auto;
  color: var(--button-text-color);
  background:
    radial-gradient(circle at 50% 42%, rgb(146 99 255 / 10%), transparent 45%),
    var(--main-bg-color);
}

.style-explorer {
  width: min(100%, 980px);
  margin: 0 auto;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, #a57cff 40%, var(--preset-border));
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 48%, rgb(146 99 255 / 12%), transparent 50%),
    var(--preset-surface);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 5%) inset,
    0 12px 32px rgb(0 0 0 / 12%);
}

.style-explorer__header {
  display: flex;
  min-height: 60px;
  padding: 9px 12px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--preset-border);
}

.style-explorer__header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.style-explorer__header > div:first-child > span {
  color: color-mix(in srgb, #a57cff 72%, var(--button-text-color));
  font-size: calc(0.44 * var(--menu-t));
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.style-explorer__header strong {
  font-size: calc(0.76 * var(--menu-t));
  font-weight: 690;
}

.style-explorer__header p {
  margin: 1px 0 0;
  color: var(--button-text-inactive-color);
  font-size: calc(0.49 * var(--menu-t));
  line-height: 1.3;
}

.style-explorer__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.style-explorer__actions button {
  height: 27px;
  padding: 0 8px;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--preset-border);
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: calc(0.46 * var(--menu-t));
  cursor: pointer;
}

.style-explorer__actions button:hover {
  color: var(--button-text-color);
  border-color: color-mix(in srgb, #a57cff 50%, var(--preset-border));
}

.style-explorer__actions button:focus-visible {
  outline: 2px solid #a57cff;
  outline-offset: 2px;
}

.style-explorer__intensity {
  display: grid;
  min-height: 45px;
  padding: 7px 12px;
  grid-template-columns: minmax(145px, auto) minmax(120px, 1fr) minmax(52px, auto);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--preset-border);
  background: color-mix(in srgb, #a57cff 4%, transparent);
}

.style-explorer__intensity > span {
  display: grid;
  gap: 1px;
}

.style-explorer__intensity strong {
  font-size: calc(0.48 * var(--menu-t));
  font-weight: 670;
}

.style-explorer__intensity small {
  color: var(--button-text-inactive-color);
  font-size: calc(0.39 * var(--menu-t));
  line-height: 1.2;
}

.style-explorer__intensity input {
  --slider-track-size: 6px;

  width: 100%;
  min-width: 0;
  height: 18px;
  padding: 0;
  margin: 0;
  appearance: none;
  pointer-events: auto;
  background: transparent;
  cursor: ew-resize;
}

.style-explorer__intensity input::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      #4f9cff 0,
      #71d9de var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 20%) inset,
    0 1px 0 rgb(255 255 255 / 14%);
}

.style-explorer__intensity input::-moz-range-track {
  height: 6px;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 99px;
  background:
    linear-gradient(90deg,
      #4f9cff 0,
      #71d9de var(--slider-progress),
      rgb(0 0 0 / 16%) var(--slider-progress),
      rgb(0 0 0 / 16%) 100%);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 20%) inset,
    0 1px 0 rgb(255 255 255 / 14%);
}

.style-explorer__intensity input::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-track-offset);
  appearance: none;
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.style-explorer__intensity input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border: 2px solid var(--slider-thumb-stroke);
  border-radius: 50%;
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.style-explorer__intensity input:hover::-webkit-slider-thumb,
.style-explorer__intensity input:focus-visible::-webkit-slider-thumb,
.style-explorer__intensity input:hover::-moz-range-thumb,
.style-explorer__intensity input:focus-visible::-moz-range-thumb {
  box-shadow: var(--slider-thumb-shadow-active);
  transform: scale(1.08);
}

.style-explorer__intensity input:focus-visible {
  outline: none;
}

.style-explorer__intensity output {
  color: color-mix(in srgb, #a57cff 72%, var(--button-text-color));
  font-size: calc(0.47 * var(--menu-t));
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  text-align: right;
}

.style-explorer__history {
  background: transparent;
}

.style-explorer__intensity input:disabled {
  cursor: default;
  opacity: .42;
  pointer-events: none;
}

.style-explorer__orbit {
  position: relative;
  width: min(100%, 1000px);
  aspect-ratio: 1.5;
  margin: 0 auto;
  overflow: hidden;
}

.style-explorer__ring {
  position: absolute;
  border: 1px dashed color-mix(in srgb, #a57cff 24%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.style-explorer__ring--inner {
  width: 54%;
  height: 58%;
  background: rgb(146 99 255 / 2%);
}

.style-explorer__ring--outer {
  width: 86%;
  height: 90%;
}

.style-explorer__ring::after {
  position: absolute;
  padding: 2px 5px;
  color: color-mix(in srgb, #a57cff 58%, var(--button-text-inactive-color));
  border-radius: 10px;
  background: var(--preset-surface);
  font-size: calc(0.36 * var(--menu-t));
  letter-spacing: .06em;
  text-transform: uppercase;
  content: "";
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
}

.style-explorer__ring--inner::after {
  content: "subtle";
}

.style-explorer__ring--outer::after {
  content: "more";
}

.style-variation {
  position: absolute;
  z-index: 2;
  width: clamp(66px, 10.5%, 105px);
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  color: #fff;
  border: 1px solid var(--preset-border);
  border-radius: 7px;
  background: var(--checked-bg-color);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.style-variation:hover,
.style-variation--previewing,
.style-variation--selected {
  z-index: 5;
  border-color: #9872ee;
  box-shadow:
    0 0 0 1px rgb(152 114 238 / 25%) inset,
    0 6px 16px rgb(0 0 0 / 20%);
  transform: translate(-50%, -50%) scale(1.09);
}

.style-variation--ring-0 {
  z-index: 4;
  width: clamp(126px, 20%, 200px);
  border-color: color-mix(in srgb, #a57cff 64%, var(--preset-border));
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgb(152 114 238 / 13%),
    0 10px 25px rgb(0 0 0 / 24%);
}

.style-variation--ring-1 {
  width: clamp(60px, 9.5%, 95px);
  opacity: .94;
}

.style-variation > img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

.style-variation__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgb(5 7 12 / 80%));
  pointer-events: none;
}

.style-variation__copy {
  position: absolute;
  right: 5px;
  bottom: 4px;
  left: 5px;
  display: grid;
  min-width: 0;
  gap: 2px;
}

.style-variation__copy strong,
.style-variation__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 74%);
  white-space: nowrap;
}

.style-variation__copy strong {
  font-size: calc(0.47 * var(--menu-t));
  font-weight: 680;
}

.style-variation__copy small {
  color: rgb(255 255 255 / 68%);
  font-size: calc(0.34 * var(--menu-t));
  letter-spacing: .05em;
  text-transform: uppercase;
}

.style-variation--ring-0 .style-variation__copy {
  right: 8px;
  bottom: 7px;
  left: 8px;
}

.style-variation--ring-0 .style-variation__copy strong {
  font-size: calc(0.62 * var(--menu-t));
}

.style-variation__loading {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--button-text-inactive-color);
  font-size: calc(0.4 * var(--menu-t));
  inset: 0;
}

.style-variation__loading i {
  width: 13px;
  height: 13px;
  border: 2px solid rgb(152 114 238 / 20%);
  border-top-color: #9872ee;
  border-radius: 50%;
  animation: preset-spin 750ms linear infinite;
}

.style-explorer > footer {
  display: flex;
  padding: 0 14px 7px;
  align-items: center;
  justify-content: center;
  color: var(--button-text-inactive-color);
  font-size: calc(0.39 * var(--menu-t));
}

.style-explorer > footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.variants-pane__empty {
  display: grid;
  width: min(420px, calc(100% - 30px));
  min-height: 280px;
  place-content: center;
  justify-items: center;
  margin: max(20px, 8vh) auto;
  padding: 28px;
  color: var(--button-text-color);
  border: 1px solid var(--preset-border);
  border-radius: 13px;
  background: var(--preset-surface);
  text-align: center;
}

.variants-pane__empty > span {
  margin-bottom: 12px;
  color: #a57cff;
  font-size: 42px;
}

.variants-pane__empty strong {
  font-size: calc(.8 * var(--menu-t));
}

.variants-pane__empty p {
  max-width: 330px;
  margin: 8px 0 18px;
  color: var(--button-text-inactive-color);
  font-size: calc(.5 * var(--menu-t));
  line-height: 1.5;
}

.variants-pane__empty button {
  min-height: 32px;
  padding: 0 12px;
  color: #fff;
  border: 1px solid rgb(165 124 255 / 58%);
  border-radius: 7px;
  background: rgb(124 81 221 / 70%);
  font: inherit;
  cursor: pointer;
}

@media (max-width: 560px) {
  .variants-pane {
    padding: 8px;
  }

  .style-explorer__header p {
    max-width: 290px;
  }

  .style-explorer__intensity {
    grid-template-columns: 1fr minmax(52px, auto);
  }

  .style-explorer__intensity > span {
    grid-column: 1 / -1;
  }

  .style-explorer__orbit {
    min-width: 500px;
  }
}

#preset_container .preset-groups {
  display: grid;
  gap: 11px;
}

#preset_container .preset-group-container {
  overflow: hidden;
  border: 1px solid var(--preset-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--preset-surface) 92%, transparent);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 4%) inset,
    0 6px 18px rgb(0 0 0 / 6%);
}

#preset_container .preset-group-header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0;
  color: var(--button-text-color);
  border: 0;
  border-bottom: 1px solid var(--preset-border);
  background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

#preset_container .preset-group-header:hover {
  color: var(--button-text-hover-color);
  background-color: rgb(87 157 255 / 6%);
}

#preset_container .preset-group-header[aria-expanded='false'] {
  border-bottom-color: transparent;
}

#preset_container .preset-group-chevron {
  position: static;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 150ms ease;
}

#preset_container .preset-group-header[aria-expanded='false'] .preset-group-chevron {
  transform: rotate(-45deg);
}

#preset_container .preset-group-name {
  position: static;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: calc(0.66 * var(--menu-t));
  font-weight: 680;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#preset_container .preset-group-label {
  position: static;
  right: auto;
  display: grid;
  min-width: 0;
  margin: 0;
  flex: 1 1 auto;
  gap: 2px;
}

#preset_container .preset-group-description {
  position: static;
  right: auto;
  overflow: hidden;
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: calc(0.46 * var(--menu-t));
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#preset_container .preset-group-count {
  position: static;
  right: auto;
  margin: 0;
  flex: 0 0 auto;
}

#preset_container .preset-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 10px;
  padding: 10px;
}

#preset_container .preset-group-body-hidden {
  height: 0;
  padding-block: 0;
  overflow: hidden;
}

#preset_container .preset-button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid var(--preset-border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(0 0 0 / 8%)),
    var(--checked-bg-color);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 5%) inset,
    0 5px 14px rgb(0 0 0 / 13%);
  font-size: calc(0.56 * var(--menu-t));
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

#preset_container .preset-button::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(4 8 14 / 74%));
  content: '';
  pointer-events: none;
}

#preset_container .preset-button:hover {
  border-color: rgb(87 157 255 / 66%);
  box-shadow:
    0 0 0 1px rgb(87 157 255 / 12%) inset,
    0 9px 22px rgb(0 0 0 / 23%);
  transform: translateY(-2px);
}

#preset_container .preset-button.sample-active,
#preset_container .preset-button.sample-active-down {
  border: 2px solid color-mix(in srgb, var(--preset-accent) 82%, white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--main-bg-color) 86%, transparent),
    0 0 0 4px color-mix(in srgb, var(--preset-accent) 43%, transparent),
    0 0 22px color-mix(in srgb, var(--preset-accent) 32%, transparent),
    0 10px 24px rgb(0 0 0 / 27%);
  transform: translateY(-1px);
}

#preset_container .preset-button.sample-active::before,
#preset_container .preset-button.sample-active-down::before {
  position: absolute;
  z-index: 2;
  inset: 3px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 5px;
  content: '';
  pointer-events: none;
}

#preset_container .preset-card-selected {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 7px;
  display: inline-flex;
  height: 23px;
  align-items: center;
  gap: 4px;
  padding: 0 7px 0 5px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--preset-accent-strong) 88%, #12345c);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 22%) inset,
    0 2px 7px rgb(0 0 0 / 38%);
  font-size: calc(0.41 * var(--menu-t));
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
}

#preset_container .preset-card-selected svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

#preset_container .preset-button.sample-active-down .preset-card-badge {
  top: 35px;
}

#preset_container .preset-preview img {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  inset: 0;
  object-fit: cover;
}

.preset-preview-loading {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color);
  font-size: calc(0.48 * var(--menu-t));
}

.preset-preview-loading i {
  width: 18px;
  height: 18px;
  border: 2px solid rgb(87 157 255 / 24%);
  border-top-color: var(--preset-accent);
  border-radius: 50%;
  animation: preset-spin 750ms linear infinite;
}

.preset-card-footer {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #f4f7fb;
  text-align: left;
  pointer-events: none;
}

.preset-card-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.preset-card-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 72%);
  white-space: nowrap;
}

.preset-card-description {
  overflow: hidden;
  color: rgb(255 255 255 / 68%);
  font-size: calc(0.42 * var(--menu-t));
  line-height: 1.1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 72%);
  white-space: nowrap;
}

#preset_container .preset-card-info {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  place-items: center;
  color: #f4f7fb;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 50%;
  background: rgb(8 12 18 / 90%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 32%);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 110ms ease, border-color 110ms ease, transform 110ms ease;
}

#preset_container .preset-card-info::before {
  position: absolute;
  inset: -3px;
  content: '';
}

#preset_container .preset-card-info:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 58%);
  background: rgb(32 93 171 / 96%);
  transform: translateY(-1px);
}

#preset_container .preset-card-info:active {
  transform: translateY(0);
}

#preset_container .preset-card-info svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#preset_container .preset-card-actions {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 4px;
}

#preset_container .preset-card-badge {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 7px;
  padding: 4px 6px 3px;
  color: rgb(255 255 255 / 88%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 5px;
  background: rgb(8 12 18 / 88%);
  font-size: calc(0.4 * var(--menu-t));
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
}

#preset_container .preset-card-actions button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: rgb(255 255 255 / 82%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 6px;
  background: rgb(8 12 18 / 90%);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 110ms ease, background-color 110ms ease, color 110ms ease;
}

#preset_container .preset-button:hover .preset-card-actions button,
#preset_container .preset-card-actions button:focus-visible,
#preset_container .preset-button.sample-pinned .sample-pin {
  opacity: 1;
}

#preset_container .preset-card-actions button::before {
  margin: 0;
}

#preset_container .preset-button.sample-pinned .sample-pin {
  color: #d9eaff;
  border-color: rgb(104 168 255 / 55%);
  background: rgb(34 91 166 / 82%);
}

#preset_container .preset-card-actions .sample-remove:hover {
  color: #fff;
  background: rgb(174 51 62 / 90%);
}

.preset-empty-state {
  display: grid;
  min-height: 270px;
  place-content: center;
  justify-items: center;
  padding: 34px;
  color: var(--button-text-color);
  text-align: center;
}

.preset-empty-state__art {
  position: relative;
  width: 88px;
  height: 70px;
  margin-bottom: 18px;
}

.preset-empty-state__art span {
  position: absolute;
  width: 47px;
  height: 47px;
  border: 1px solid color-mix(in srgb, var(--preset-accent) 36%, var(--preset-border));
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgb(87 157 255 / 18%), rgb(137 96 224 / 12%)),
    var(--preset-surface-raised);
  box-shadow: 0 9px 24px rgb(0 0 0 / 12%);
}

.preset-empty-state__art span:nth-child(1) {
  top: 15px;
  left: 0;
  transform: rotate(-9deg);
}

.preset-empty-state__art span:nth-child(2) {
  top: 2px;
  left: 21px;
  border-color: rgb(87 157 255 / 55%);
  transform: rotate(2deg);
}

.preset-empty-state__art span:nth-child(3) {
  top: 18px;
  right: 0;
  transform: rotate(10deg);
}

.preset-empty-state strong {
  margin-bottom: 7px;
  font-size: calc(0.75 * var(--menu-t));
  font-weight: 680;
}

.preset-empty-state p {
  max-width: 280px;
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: calc(0.57 * var(--menu-t));
  line-height: 1.45;
}

/* Save preset dialog */
.preset-save-overlay {
  z-index: 10000;
  padding: 18px;
  background: rgb(7 10 15 / 68%);
  backdrop-filter: blur(9px);
  pointer-events: auto;
}

.preset-save-dialog.overlay-body {
  box-sizing: border-box;
  width: min(430px, 100%);
  padding: 0;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-text-color) 16%, transparent);
  border-radius: 13px;
  background:
    radial-gradient(circle at 0 0, rgb(87 157 255 / 10%), transparent 38%),
    color-mix(in srgb, var(--main-bg-color) 95%, var(--button-text-color) 5%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 7%) inset,
    0 24px 70px rgb(0 0 0 / 42%);
}

.preset-save-dialog__header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--button-text-color) 10%, transparent);
}

.preset-save-dialog__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #eaf4ff;
  border: 1px solid rgb(124 186 255 / 48%);
  border-radius: 10px;
  background: linear-gradient(145deg, #68a7ff, #347fdc);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 22%) inset,
    0 8px 20px rgb(38 108 196 / 25%);
}

.preset-save-dialog__mark svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preset-save-dialog h2 {
  margin: 0 0 4px;
  color: var(--button-text-color);
  font-size: calc(0.86 * var(--menu-t));
  font-weight: 700;
  line-height: 1.1;
}

.preset-save-dialog p {
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: calc(0.55 * var(--menu-t));
  line-height: 1.35;
}

.preset-save-dialog__close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.preset-save-dialog__close:hover {
  color: var(--button-text-color);
  background: rgb(127 127 127 / 12%);
}

.preset-save-form {
  display: grid;
  gap: 14px;
  padding: 17px 18px 18px;
}

.preset-save-field {
  display: grid;
  gap: 7px;
  color: var(--button-text-color);
  font-size: calc(0.55 * var(--menu-t));
  font-weight: 650;
}

.preset-save-field input {
  box-sizing: border-box;
  width: 100%;
  height: 39px;
  padding: 0 11px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-text-color) 14%, transparent);
  border-radius: 7px;
  outline: 0;
  background: rgb(0 0 0 / 12%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%) inset;
  font: inherit;
  font-size: calc(0.62 * var(--menu-t));
  font-weight: 450;
  pointer-events: auto;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.preset-save-field input::placeholder {
  color: var(--button-text-inactive-color);
  opacity: 0.72;
}

.preset-save-field input:focus {
  border-color: rgb(87 157 255 / 78%);
  box-shadow:
    0 0 0 3px rgb(87 157 255 / 13%),
    0 1px 3px rgb(0 0 0 / 12%) inset;
}

.preset-save-status {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color);
  font-size: calc(0.52 * var(--menu-t));
}

.preset-save-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgb(87 157 255 / 22%);
  border-top-color: #579dff;
  border-radius: 50%;
  animation: preset-spin 700ms linear infinite;
}

.preset-save-status__ready {
  color: #69b783;
  font-weight: 750;
}

.preset-save-error {
  color: #e2777e;
}

.preset-save-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.preset-save-button {
  min-width: 96px;
  height: 37px;
  padding: 0 14px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-text-color) 14%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--main-bg-color) 84%, var(--button-text-color) 16%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 7%) inset;
  font: inherit;
  font-size: calc(0.58 * var(--menu-t));
  font-weight: 650;
  cursor: pointer;
}

.preset-save-button--primary {
  color: #f7fbff;
  border-color: rgb(116 180 255 / 60%);
  background: linear-gradient(180deg, #659fff, #2f7fe9);
}

.preset-save-button:hover:not(:disabled) {
  border-color: rgb(87 157 255 / 66%);
  filter: brightness(1.06);
}

.preset-save-button:focus-visible,
.preset-save-dialog__close:focus-visible {
  outline: 2px solid #579dff;
  outline-offset: 2px;
}

.preset-save-button:disabled {
  cursor: wait;
  filter: grayscale(0.35);
  opacity: 0.48;
}

@keyframes preset-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 430px) {
  .preset-panel-action--primary span { display: none; }
  .preset-panel-action--primary { width: 36px; padding: 0; }
  #preset_container .preset-group-body { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* Compact switches for settings-panel boolean options. */
#props_container .topcoat-checkbox {
  display: inline-flex;
  height: 18px;
  align-items: center;
  line-height: 18px;
  cursor: pointer;
}

#props_container .topcoat-checkbox input[type='checkbox'] {
  width: 32px;
  height: 18px;
  margin: 0 -32px -18px 0;
  cursor: pointer;
}

#props_container .topcoat-checkbox__checkmark {
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}

#props_container .topcoat-checkbox__checkmark:before {
  width: 32px;
  height: 18px;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 99px;
  background: rgb(0 0 0 / 18%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 16%) inset,
    0 1px 0 rgb(255 255 255 / 12%);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#props_container .topcoat-checkbox__checkmark:after {
  top: 3px;
  left: 3px !important;
  width: 12px;
  height: 12px;
  opacity: 1;
  border: 0;
  border-radius: 50%;
  background: #f5f7f8;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 35%),
    0 0 0 1px rgb(0 0 0 / 8%);
  transform: none;
  transition: transform 150ms cubic-bezier(.2, .8, .2, 1), background 150ms ease;
}

#props_container .topcoat-checkbox input[type='checkbox']:checked + .topcoat-checkbox__checkmark:before {
  border-color: #3b8ff3;
  background: linear-gradient(135deg, #4f9cff, #68d2d7);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 12%) inset,
    0 0 0 2px rgb(79 156 255 / 12%);
}

#props_container .topcoat-checkbox input[type='checkbox']:checked + .topcoat-checkbox__checkmark:after {
  background: #fff;
  transform: translateX(14px);
}

#props_container .topcoat-checkbox:hover .topcoat-checkbox__checkmark:before {
  border-color: rgb(79 156 255 / 65%);
}

#props_container .topcoat-checkbox input[type='checkbox']:focus-visible + .topcoat-checkbox__checkmark:before {
  outline: 2px solid rgb(79 156 255 / 45%);
  outline-offset: 2px;
}

#props_container .topcoat-checkbox input[type='checkbox']:disabled + .topcoat-checkbox__checkmark {
  opacity: 0.38;
  cursor: not-allowed;
}

/* RAW import */
.raw-import-panel {
  --raw-accent: #56a8f5;
  --raw-accent-soft: rgb(71 157 238 / 12%);
  --raw-border: rgb(255 255 255 / 10%);
  --raw-muted: var(--button-text-inactive-color, #999);
  position: relative;
  box-sizing: border-box;
  min-width: 270px;
  color: var(--button-text-color, #ddd);
  font-size: calc(0.58 * var(--menu-t, 18px));
  text-align: left;
}

.raw-import-panel__controls {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.raw-import-panel--unavailable {
  overflow: hidden;
  border-radius: 6px;
}

.raw-import-panel--unavailable .raw-import-panel__controls {
  opacity: 0.34;
  filter: grayscale(0.92) brightness(0.54) contrast(0.88);
  pointer-events: none;
  user-select: none;
}

.raw-import-panel__unavailable {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 44%, rgb(56 70 82 / 14%), transparent 42%),
    rgb(8 10 12 / 52%);
  backdrop-filter: blur(0.8px) saturate(0.45);
}

.raw-import-panel__unavailable > span {
  display: flex;
  max-width: 210px;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  color: rgb(238 243 247 / 88%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)),
    rgb(17 21 25 / 88%);
  box-shadow:
    0 10px 28px rgb(0 0 0 / 30%),
    0 1px 0 rgb(255 255 255 / 5%) inset;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.raw-import-panel__unavailable > span::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgb(128 151 170 / 82%);
  box-shadow:
    0 0 0 3px rgb(128 151 170 / 10%),
    0 0 10px rgb(104 144 178 / 16%);
  content: '';
}

.raw-import-section {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--raw-border);
  border-radius: 6px;
  background: rgb(255 255 255 / 2.5%);
}

.raw-import-white-balance {
  border-color: rgb(86 168 245 / 22%);
  background:
    linear-gradient(135deg, rgb(74 139 202 / 8%), transparent 55%),
    rgb(255 255 255 / 2.5%);
}

.raw-tone-curve-section {
  border-color: rgb(116 177 235 / 20%);
  background:
    linear-gradient(145deg, rgb(73 126 178 / 7%), transparent 55%),
    rgb(255 255 255 / 2.5%);
}

.raw-tone-curve-graph {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  margin: 2px 0 10px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 2%), rgb(0 0 0 / 8%)),
    #202326;
}

.raw-tone-curve-graph line {
  stroke: rgb(255 255 255 / 7%);
  stroke-width: .75;
}

.raw-tone-curve-identity {
  fill: none;
  stroke: rgb(255 255 255 / 19%);
  stroke-dasharray: 3 3;
  stroke-width: .8;
}

.raw-tone-curve-path {
  fill: none;
  stroke: var(--raw-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgb(54 159 255 / 28%));
}

.raw-tone-curve-handle {
  fill: #d9efff;
  stroke: #2589dc;
  stroke-width: 1.25;
  pointer-events: none;
}

.raw-tone-curve-handle-hit {
  fill: transparent;
  stroke: transparent;
  cursor: ns-resize;
  touch-action: none;
}

.raw-tone-curve-handle-hit:hover + .raw-tone-curve-handle,
.raw-tone-curve-handle-hit:focus-visible + .raw-tone-curve-handle {
  stroke: #8bc9ff;
}

.raw-skin-aware-tone-curve {
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid rgb(86 168 245 / 18%);
  border-radius: 5px;
  background: rgb(71 157 238 / 5%);
}

.raw-skin-aware-tone-status {
  margin-top: 7px;
  color: var(--raw-muted);
  font-size: 8px;
  line-height: 1.4;
}

.raw-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.raw-section-heading h3 {
  margin: 0;
  color: var(--button-text-color, #ddd);
  font-size: 11px;
  font-weight: 700;
}

.raw-section-heading > span {
  color: var(--raw-muted);
  font-size: 9px;
  white-space: nowrap;
}

.raw-radio-grid {
  display: grid;
  grid-template-columns: repeat(var(--raw-radio-columns), minmax(0, 1fr));
  gap: 4px;
}

.raw-radio-grid .topcoat-button-bar__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
}

.raw-radio-grid .topcoat-button-bar__item > input {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.raw-radio-grid .raw-radio-card {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  line-height: 1;
  text-align: left;
}

.raw-radio-grid--leading .raw-radio-card {
  grid-template-columns: 25px minmax(0, 1fr) 12px;
}

.raw-radio-grid .raw-radio-card--temperature {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--raw-wb-temperature-color) 22%, transparent),
      transparent 78%
    ),
    var(--button-bg-color);
}

.raw-radio-grid--compact .raw-radio-card {
  min-height: 31px;
  grid-template-columns: minmax(0, 1fr) 12px;
  padding: 4px 6px;
}

.raw-radio-grid--compact.raw-radio-grid--leading .raw-radio-card {
  grid-template-columns: 23px minmax(0, 1fr) 12px;
}

.raw-radio-badge {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: var(--raw-muted);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  background: rgb(0 0 0 / 12%);
  font-size: 9px;
  font-weight: 750;
}

.raw-radio-badge--empty {
  visibility: hidden;
}

.raw-wb-icon {
  width: 16px;
  height: 16px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.raw-radio-grid label:hover .raw-wb-icon {
  stroke-width: 1.8;
}

.raw-radio-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.raw-radio-copy strong {
  overflow: hidden;
  color: var(--button-text-color, #ddd);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-radio-copy small {
  overflow: hidden;
  color: var(--raw-muted);
  font-size: 8px;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-radio-check {
  opacity: 0;
  color: var(--raw-accent);
  font-size: 10px;
  font-weight: 800;
}

.raw-radio-grid input:checked + .raw-radio-card {
  border-color: rgb(86 168 245 / 68%);
  background:
    linear-gradient(180deg, rgb(86 168 245 / 16%), rgb(36 119 211 / 8%)),
    var(--button-bg-color);
  box-shadow: 0 0 0 1px rgb(86 168 245 / 8%) inset, 0 0 8px rgb(44 151 255 / 10%);
}

.raw-radio-grid input:checked + .raw-radio-card--temperature {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--raw-wb-temperature-color) 30%, transparent),
      transparent 78%
    ),
    linear-gradient(180deg, rgb(86 168 245 / 16%), rgb(36 119 211 / 8%)),
    var(--button-bg-color);
}

.raw-radio-grid input:checked + .raw-radio-card .raw-radio-badge {
  color: white;
  border-color: rgb(106 188 255 / 70%);
  background: linear-gradient(180deg, #55adf8, #287fd2);
  box-shadow: 0 0 7px rgb(44 151 255 / 20%);
}

.raw-radio-grid input:checked + .raw-radio-card .raw-radio-check {
  opacity: 1;
}

.raw-radio-grid label:hover .raw-radio-card {
  border-color: rgb(86 168 245 / 42%);
}

.raw-import-note {
  margin-top: 7px;
  padding: 6px 7px;
  color: var(--raw-muted);
  border-left: 2px solid rgb(86 168 245 / 55%);
  border-radius: 0 4px 4px 0;
  background: rgb(86 168 245 / 6%);
  font-size: 9px;
  line-height: 1.4;
}

.raw-face-detection-panel {
  --raw-accent: #56e6c1;
  --raw-accent-soft: rgb(86 230 193 / 10%);
}

.raw-face-detection-panel .raw-import-section {
  border-color: rgb(86 230 193 / 18%);
  background:
    linear-gradient(145deg, rgb(86 230 193 / 5%), transparent 58%),
    rgb(255 255 255 / 2.5%);
}

.raw-face-detection-panel .raw-import-note {
  border-left-color: rgb(86 230 193 / 52%);
  background: rgb(86 230 193 / 5%);
}

.raw-face-detection-panel .raw-radio-grid + .raw-section-heading {
  margin-top: 10px;
}

.raw-face-candidates__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.raw-face-candidates__clear,
.raw-face-candidate button {
  min-height: 25px;
  padding: 3px 8px;
  color: var(--button-text-inactive-color);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 5px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.raw-face-candidates__clear:hover,
.raw-face-candidate button:hover {
  color: #74efd0;
  border-color: rgb(86 230 193 / 42%);
  background: rgb(86 230 193 / 8%);
}

.raw-face-candidates__list {
  display: grid;
  gap: 5px;
}

.raw-face-candidate {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgb(86 230 193 / 20%);
  border-radius: 5px;
  background: rgb(86 230 193 / 5%);
}

.raw-face-candidate__swatch {
  width: 7px;
  height: 7px;
  border: 1px solid #56e6c1;
  border-radius: 2px;
  box-shadow: 0 0 6px rgb(86 230 193 / 34%);
}

.raw-face-candidate__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-face-candidate__confidence {
  color: #74efd0;
  font-variant-numeric: tabular-nums;
}

.raw-face-candidate--excluded {
  border-color: rgb(255 106 115 / 18%);
  background: rgb(255 106 115 / 4%);
  opacity: .72;
}

.raw-face-candidate--excluded .raw-face-candidate__swatch {
  border-color: #ff6a73;
  box-shadow: none;
}

.raw-face-candidate--excluded .raw-face-candidate__confidence {
  color: #ff8a91;
}

.raw-face-candidate--limited {
  border-color: rgb(242 189 89 / 18%);
  background: rgb(242 189 89 / 4%);
}

.raw-face-candidate--limited .raw-face-candidate__swatch {
  border-color: #f2bd59;
  box-shadow: none;
}

.raw-face-candidate--limited .raw-face-candidate__confidence {
  color: #f2bd59;
}

.raw-face-candidates__empty {
  padding: 13px 9px;
  color: var(--raw-muted);
  border: 1px dashed rgb(255 255 255 / 10%);
  border-radius: 5px;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.raw-demosaic-pipeline {
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgb(86 168 245 / 20%);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgb(86 168 245 / 8%), transparent 72%),
    rgb(0 0 0 / 8%);
}

.raw-demosaic-algorithm-heading {
  margin-top: 10px;
}

.raw-demosaic-pipeline__flow {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--button-text-color, #ddd);
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
}

.raw-demosaic-pipeline__flow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raw-demosaic-pipeline__flow i {
  flex: 0 0 auto;
  color: var(--raw-accent);
  font-style: normal;
  opacity: .72;
}

.raw-demosaic-pipeline p {
  margin: 6px 0 0;
  color: var(--raw-muted);
  font-size: 8px;
  line-height: 1.4;
}

.raw-demosaic-pipeline p + p {
  margin-top: 4px;
}

.raw-demosaic-pipeline strong {
  color: var(--button-text-color, #ddd);
}

.raw-skin-tone-selector {
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 6px;
  background: rgb(0 0 0 / 10%);
}

.raw-skin-tone-selector .raw-advanced-label {
  margin: 0 0 7px;
}

.raw-skin-tone-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}

.raw-skin-tone-groups button {
  overflow: hidden;
  padding: 4px 5px;
  color: var(--raw-muted);
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 4px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.raw-skin-tone-groups button:hover {
  color: var(--raw-text);
  border-color: rgb(99 181 255 / 45%);
}

.raw-skin-tone-groups button:focus-visible {
  outline: 2px solid #63b5ff;
  outline-offset: 1px;
}

.raw-skin-tone-groups button.is-selected {
  color: #d9efff;
  border-color: rgb(99 181 255 / 65%);
  background: rgb(86 168 245 / 18%);
}

.raw-skin-tone-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px 4px;
}

.raw-skin-tone-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
}

.raw-skin-tone-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.raw-skin-tone-swatch {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: var(--raw-skin-tone-color);
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.raw-skin-tone-swatch--auto {
  background: linear-gradient(135deg, #f6ede4 5%, #d7bd96 38%, #825c43 67%, #292420 95%);
}

.raw-skin-tone-option:hover .raw-skin-tone-swatch {
  transform: translateY(-1px);
}

.raw-skin-tone-option input:focus-visible + .raw-skin-tone-swatch,
.raw-skin-tone-option input:checked + .raw-skin-tone-swatch {
  border-color: #63b5ff;
  box-shadow:
    0 0 0 2px rgb(18 25 33),
    0 0 0 4px rgb(86 168 245 / 70%),
    0 2px 5px rgb(0 0 0 / 45%);
}

.raw-skin-tone-option input:checked + .raw-skin-tone-swatch::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: '✓';
  color: white;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgb(0 0 0 / 85%);
}

.raw-skin-tone-option small {
  overflow: hidden;
  max-width: 100%;
  color: var(--raw-muted);
  font-size: 8px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-skin-tone-option input:checked ~ small {
  color: #79c2ff;
  font-weight: 800;
}

.raw-skin-tone-selection {
  margin-top: 7px;
  color: var(--raw-muted);
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
}

.raw-skin-tone-selector + .raw-face-probe-status {
  margin-top: 9px;
}

.raw-face-probe-status {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 0 0 10px;
  padding: 10px;
  color: #332300;
  border: 2px solid #e5a900;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffd95a, #f3b91e);
  box-shadow:
    0 0 0 1px rgb(255 230 128 / 55%) inset,
    0 3px 12px rgb(0 0 0 / 24%);
}

.raw-face-probe-status__icon,
.raw-face-probe-warning__icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #fff5c2;
  border-radius: 50%;
  background: #5c3c00;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.raw-face-probe-status strong {
  display: block;
  color: #2b1c00;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.raw-face-probe-status p {
  margin: 4px 0 0;
  color: #3d2a00;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.raw-face-probe-status small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #664600;
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-face-probe-status .raw-face-probe-result {
  max-width: none;
  overflow: visible;
  font-weight: 800;
  text-overflow: clip;
  white-space: normal;
}

.raw-face-probe-status--no-face {
  color: #332300;
  border-color: #d69b00;
  background: linear-gradient(135deg, #ffe17a, #eeb626);
  cursor: help;
}

.raw-face-probe-status--detected {
  color: #082c17;
  border-color: #39a962;
  background: linear-gradient(135deg, #8ae5aa, #45bb70);
  box-shadow:
    0 0 0 1px rgb(211 255 225 / 52%) inset,
    0 3px 12px rgb(0 0 0 / 22%);
  cursor: help;
}

.raw-face-probe-status--detected .raw-face-probe-status__icon {
  color: #dffff0;
  background: #0b5a2d;
}

.raw-face-probe-status--detected strong,
.raw-face-probe-status--detected p,
.raw-face-probe-status--detected small {
  color: #08351b;
}

.raw-wb-custom {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--raw-border);
}

.raw-wb-question {
  color: var(--button-text-color, #ddd);
  font-size: 10px;
  font-weight: 700;
}

.raw-wb-relationship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 5px;
  background: rgb(0 0 0 / 10%);
}

.raw-wb-relationship__side {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.raw-wb-relationship__side > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.raw-wb-relationship__side strong,
.raw-wb-relationship__side small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-wb-relationship__side strong {
  color: var(--button-text-color, #ddd);
  font-size: 9px;
  font-weight: 700;
}

.raw-wb-relationship__side small {
  color: var(--raw-muted);
  font-size: 8px;
}

.raw-wb-relationship__swatch {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 42%), transparent 35%),
    var(--raw-wb-relationship-color);
  box-shadow:
    0 0 0 2px rgb(0 0 0 / 16%),
    0 2px 7px color-mix(in srgb, var(--raw-wb-relationship-color) 42%, transparent);
}

.raw-wb-relationship__arrow {
  color: var(--raw-accent);
  font-size: 13px;
  text-align: center;
}

.raw-wb-relationship p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--raw-muted);
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
}

.raw-wb-relationship--illuminant .raw-wb-relationship__arrow {
  animation: raw-wb-opposite-arrow 1.8s ease-in-out infinite;
}

@keyframes raw-wb-opposite-arrow {
  50% {
    opacity: .45;
    transform: translateX(2px);
  }
}

.raw-wb-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--raw-muted);
  font-size: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .raw-wb-relationship--illuminant .raw-wb-relationship__arrow {
    animation: none;
  }
}

.raw-wb-readout code {
  color: var(--button-text-color, #ddd);
  font-size: 8px;
}

.raw-slider-setting {
  display: block;
  margin: 8px 0 10px;
}

.raw-exposure-auto-shift {
  display: block;
  margin: -4px 0 10px auto;
  padding: 4px 7px;
  color: var(--raw-accent);
  border: 1px solid rgb(86 168 245 / 42%);
  border-radius: 4px;
  background: rgb(86 168 245 / 8%);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
}

.raw-exposure-auto-shift:hover,
.raw-exposure-auto-shift:focus-visible {
  color: var(--selected-control-text-color, #eaf6ff);
  border-color: rgb(86 168 245 / 68%);
  outline: 2px solid rgb(86 168 245 / 35%);
  outline-offset: 1px;
  background: rgb(86 168 245 / 16%);
}

.raw-control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
}

.raw-slider-ends {
  display: flex;
  gap: 8px;
  color: var(--raw-muted);
  font-size: 9px;
}

.raw-slider-ends > span + span:before {
  margin-right: 8px;
  content: '→';
  opacity: .5;
}

#props_container .raw-inline-slider output {
  min-width: 42px;
  color: var(--raw-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

#props_container .raw-inline-slider input[type='range'][style*='--raw-slider-gradient']::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent var(--slider-progress),
      rgb(0 0 0 / 15%) var(--slider-progress),
      rgb(0 0 0 / 15%) 100%),
    var(--raw-slider-gradient);
}

.raw-control--disabled {
  opacity: .4;
}

.raw-toggle-setting {
  position: relative;
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
  cursor: pointer;
}

.raw-toggle-copy {
  display: grid;
  gap: 3px;
}

.raw-toggle-copy strong {
  font-size: 10px;
  font-weight: 600;
}

.raw-toggle-copy small {
  color: var(--raw-muted);
  font-size: 8px;
}

.raw-toggle-setting > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
  opacity: 0;
}

.raw-toggle-track {
  box-sizing: border-box;
  contain: paint;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 99px;
  background: rgb(0 0 0 / 20%);
  transition: background 140ms ease, border-color 140ms ease;
}

.raw-toggle-track span {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #bdc1c5;
  box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  transition: transform 140ms ease, background 140ms ease;
}

.raw-toggle-setting > input:checked + .raw-toggle-track {
  border-color: #3b8ff3;
  background: linear-gradient(135deg, #398bea, #55b8d6);
}

.raw-toggle-setting > input:checked + .raw-toggle-track span {
  background: white;
  transform: translateX(13px);
}

.raw-advanced-toggle {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px;
  padding: 8px 9px;
  color: var(--raw-muted);
  border: 1px solid var(--raw-border);
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  text-align: left;
}

.raw-advanced-toggle:hover {
  color: var(--button-text-color, #ddd);
  border-color: rgb(86 168 245 / 35%);
  background: rgb(255 255 255 / 3%);
}

.raw-advanced-toggle > span:last-child {
  transition: transform 140ms ease;
}

.raw-advanced-toggle--open > span:last-child {
  transform: rotate(180deg);
}

.raw-advanced {
  margin-bottom: 8px;
}

.raw-advanced-group {
  border-bottom: 1px solid var(--raw-border);
}

.raw-advanced-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  list-style: none;
}

.raw-advanced-group > summary::-webkit-details-marker {
  display: none;
}

.raw-advanced-group[open] > summary > span {
  transform: rotate(180deg);
}

.raw-advanced-content {
  padding: 4px 3px 10px;
}

.raw-advanced-label {
  margin: 2px 0 6px;
  color: var(--raw-muted);
  font-size: 8px;
}

.raw-control-divider {
  height: 1px;
  margin: 12px 0 9px;
  background: var(--raw-border);
}

.raw-number-setting,
.raw-text-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  font-size: 9px;
}

.raw-number-setting input {
  box-sizing: border-box;
  width: 76px;
}

.raw-text-setting {
  display: grid;
}

.raw-text-setting input {
  box-sizing: border-box;
  width: 100%;
}

.raw-number-setting input,
.raw-text-setting input {
  pointer-events: auto;
}

.raw-import-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  margin: 10px -3px -3px;
  padding: 9px 3px 3px;
  background: linear-gradient(transparent, var(--main-bg-color-props, #292929) 25%);
}

.raw-action-button {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  color: var(--raw-muted);
  border: 1px solid var(--raw-border);
  border-radius: 5px;
  background: rgb(255 255 255 / 3%);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.raw-action-button > span:first-child {
  color: inherit;
  font-size: 12px;
  font-weight: 500;
}

.raw-action-button:hover,
.raw-action-button:focus-visible {
  color: var(--button-text-color, #ddd);
  border-color: rgb(86 168 245 / 38%);
  outline: 0;
  background: rgb(86 168 245 / 8%);
}

.raw-action-button--apply {
  color: var(--raw-accent);
  border-color: rgb(86 168 245 / 32%);
  background: rgb(86 168 245 / 7%);
}

.raw-action-button--apply:hover,
.raw-action-button--apply:focus-visible {
  color: var(--selected-control-text-color, #eaf6ff);
  border-color: rgb(86 168 245 / 58%);
  background: rgb(86 168 245 / 13%);
}

/* Color Science laboratory */

.color-science-panel {
  --science-accent: #74d5c3;
  --science-accent-strong: #a6f1df;
  --science-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --science-surface: color-mix(in srgb, var(--main-bg-color) 86%, var(--button-bg-color));
  --science-surface-raised: color-mix(in srgb, var(--main-bg-color) 68%, var(--button-bg-color));
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 38px);
  overflow: auto;
  color: var(--button-text-color);
  background:
    radial-gradient(circle at 7% 4%, rgb(64 182 164 / 10%), transparent 30%),
    radial-gradient(circle at 92% 18%, rgb(93 125 219 / 9%), transparent 28%),
    var(--main-bg-color);
  font-family: var(--font-family, system-ui, sans-serif);
}

.color-science-panel--embedded {
  position: relative;
  inset: auto;
  min-height: 0;
  padding: clamp(14px, 2.2vw, 28px);
  overflow: visible;
}

@container help-color-science (max-width: 760px) {
  .color-science-panel--embedded .color-science-hero,
  .color-science-panel--embedded .color-science-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .color-science-panel--embedded .color-science-hero > div > h2 {
    font-size: clamp(28px, 9cqi, 38px);
  }

  .color-science-panel--embedded .color-science-selected-color {
    align-self: start;
  }

  .color-science-panel--embedded .color-science-lightness {
    width: 100%;
  }

  .color-science-panel--embedded .color-science-planes,
  .color-science-panel--embedded .color-science-reading-grid,
  .color-science-panel--embedded .color-science-research {
    grid-template-columns: 1fr;
  }

  .color-science-panel--embedded .color-science-research {
    gap: 18px;
  }
}

@container help-color-science (max-width: 520px) {
  .color-science-panel--embedded .color-science-space-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px minmax(0, 1fr);
  }

  .color-science-panel--embedded .color-science-select select {
    width: 100%;
    min-width: 0;
  }

  .color-science-panel--embedded .color-science-select:last-child {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--science-border);
    border-left: 0;
  }
}

body.light-theme .color-science-panel {
  --science-accent: #197f73;
  --science-accent-strong: #08665b;
  --science-border: rgb(21 43 47 / 18%);
  --science-surface: rgb(255 255 255 / 72%);
  --science-surface-raised: rgb(255 255 255 / 92%);
}

.color-science-hero {
  max-width: 1440px;
  margin: 0 auto 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.color-science-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--science-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.color-science-hero h1,
.color-science-hero > div > h2,
.color-science-research h2 {
  margin: 0;
  color: var(--button-text-color);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 520;
  letter-spacing: -.035em;
  line-height: 1;
}

.color-science-hero p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--button-text-inactive-color);
  font-size: clamp(12px, 1.25vw, 15px);
  line-height: 1.55;
}

.color-science-selected-color {
  min-width: 176px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--science-border);
  border-radius: 10px;
  background: var(--science-surface-raised);
  box-shadow: 0 9px 24px rgb(0 0 0 / 15%);
}

.color-science-selected-color > span {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%), 0 3px 12px rgb(0 0 0 / 18%);
}

.color-science-selected-color div {
  display: grid;
  gap: 2px;
}

.color-science-selected-color small,
.color-science-selected-color em {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-style: normal;
}

.color-science-selected-color strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.color-science-controls {
  max-width: 1440px;
  margin: 0 auto 11px;
  padding: 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--science-border);
  border-radius: 11px;
  background: var(--science-surface);
}

.color-science-space-controls {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: end;
  gap: 8px;
}

.color-science-select {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.color-science-select > span,
.color-science-lightness > span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .025em;
}

.color-science-select select {
  min-width: 126px;
  height: 31px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--science-border);
  border-radius: 6px;
  background: var(--science-surface-raised);
  color: var(--button-text-color);
  font: inherit;
  font-size: 11px;
}

.color-science-select:last-child {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--science-border);
}

.color-science-swap {
  width: 31px;
  height: 31px;
  padding: 0;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--science-border);
  border-radius: 6px;
  background: var(--science-surface-raised);
  color: var(--science-accent);
  font-size: 16px;
  cursor: pointer;
}

.color-science-swap:hover,
.color-science-swap:focus-visible,
.color-science-select select:focus-visible {
  border-color: var(--science-accent);
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--science-accent) 18%, transparent);
}

.color-science-lightness {
  width: min(250px, 25vw);
  min-width: 150px;
  display: grid;
  gap: 7px;
}

.color-science-lightness > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.color-science-lightness output {
  color: var(--science-accent-strong);
  font-variant-numeric: tabular-nums;
}

.color-science-lightness input {
  width: 100%;
  margin: 0;
  accent-color: var(--science-accent);
}

.color-science-layers {
  max-width: 1440px;
  margin: 0 auto 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
}

.color-science-layers legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.color-science-layers label {
  position: relative;
  min-height: 27px;
  padding: 0 9px 0 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--science-border);
  border-radius: 99px;
  background: var(--science-surface);
  color: var(--button-text-inactive-color);
  cursor: pointer;
}

.color-science-layers input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-science-layers label > span {
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--science-border);
  border-radius: 50%;
}

.color-science-layers label > span::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--science-accent);
  content: '';
  opacity: 0;
  transform: scale(.5);
  transition: opacity 100ms ease, transform 100ms ease;
}

.color-science-layers label:has(input:checked) {
  color: var(--button-text-color);
  border-color: color-mix(in srgb, var(--science-accent) 44%, var(--science-border));
  background: color-mix(in srgb, var(--science-accent) 8%, var(--science-surface));
}

.color-science-layers input:checked + span::after {
  opacity: 1;
  transform: scale(1);
}

.color-science-layers input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--science-accent) 45%, transparent);
  outline-offset: 2px;
}

.color-science-layers strong {
  font-size: 9px;
  font-weight: 600;
}

.color-science-planes {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
}

.color-science-plane-card {
  min-width: 0;
  padding: clamp(10px, 1.5vw, 16px);
  border: 1px solid var(--science-border);
  border-radius: 13px;
  background: var(--science-surface-raised);
  box-shadow: 0 15px 34px rgb(0 0 0 / 18%);
}

.color-science-plane-card > header {
  margin-bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.color-science-plane-card__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--science-accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.color-science-plane-card h3 {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 580;
}

.color-science-plane-card__lightness {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.color-science-plane {
  position: relative;
  width: 100%;
  max-width: min(100%, 680px);
  aspect-ratio: 1;
  margin: auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--science-border) 75%, #fff);
  border-radius: 9px;
  background:
    linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25% 75%, rgb(255 255 255 / 4%) 75%),
    linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25% 75%, rgb(255 255 255 / 4%) 75%),
    color-mix(in srgb, var(--main-bg-color) 78%, #777);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  cursor: crosshair;
  touch-action: none;
}

.color-science-plane canvas,
.color-science-plane svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.color-science-plane canvas {
  opacity: .9;
  transition: opacity 120ms ease;
}

.color-science-plane canvas.is-hidden {
  opacity: 0;
}

.color-science-plane svg {
  overflow: visible;
}

.color-science-overlay {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.color-science-overlay path,
.color-science-overlay circle,
.color-science-overlay line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.color-science-overlay--axes {
  stroke: rgb(255 255 255 / 23%);
  stroke-width: 1px;
}

.color-science-overlay--axes circle {
  stroke-dasharray: 3 5;
}

.color-science-overlay--lattice {
  stroke: rgb(255 255 255 / 48%);
  stroke-width: 1px;
}

.color-science-overlay--rings {
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 1.6px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 70%));
}

.color-science-overlay--gamut {
  stroke: var(--science-accent-strong);
  stroke-width: 2px;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 75%));
}

.color-science-sample-marker {
  fill: rgb(0 0 0 / 52%);
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 85%));
}

.color-science-sample-marker circle,
.color-science-sample-marker line {
  vector-effect: non-scaling-stroke;
}

.color-science-axis {
  position: absolute;
  z-index: 2;
  color: rgb(255 255 255 / 78%);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 90%);
  pointer-events: none;
}

.color-science-axis--a-negative { left: 6px; top: calc(50% - 4px); }
.color-science-axis--a-positive { right: 6px; top: calc(50% - 4px); }
.color-science-axis--b-positive { top: 6px; left: calc(50% - 6px); }
.color-science-axis--b-negative { bottom: 6px; left: calc(50% - 6px); }

.color-science-plane-card > footer {
  padding-top: 9px;
  display: flex;
  justify-content: center;
  gap: 14px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.color-science-reading-grid {
  max-width: 1440px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.color-science-reading {
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  border: 1px solid var(--science-border);
  border-radius: 10px;
  background: var(--science-surface);
}

.color-science-reading__number {
  color: var(--science-accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.color-science-reading h2 {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 650;
}

.color-science-reading p {
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.55;
}

.color-science-reading strong {
  color: var(--button-text-color);
}

.color-science-research {
  max-width: 1440px;
  margin: clamp(28px, 5vw, 58px) auto 20px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(360px, 1.28fr);
  gap: clamp(22px, 5vw, 70px);
  border-top: 1px solid var(--science-border);
}

.color-science-research h2 {
  font-size: clamp(20px, 2.3vw, 30px);
}

.color-science-research header p {
  margin: 11px 0 0;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.6;
}

.color-science-research__links {
  display: grid;
}

.color-science-research__links a {
  min-width: 0;
  padding: 11px 3px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: inherit;
  border-bottom: 1px solid var(--science-border);
  text-decoration: none;
}

.color-science-research__links a:first-child {
  border-top: 1px solid var(--science-border);
}

.color-science-research__links a > span {
  color: var(--science-accent);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.color-science-research__links a div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.color-science-research__links strong {
  font-size: 10px;
  font-weight: 650;
}

.color-science-research__links small {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-science-research__links i {
  color: var(--button-text-inactive-color);
  font-size: 12px;
  font-style: normal;
}

.color-science-research__links a:hover strong,
.color-science-research__links a:focus-visible strong,
.color-science-research__links a:hover i,
.color-science-research__links a:focus-visible i {
  color: var(--science-accent-strong);
}

.color-science-research__links a:focus-visible {
  outline: 1px solid var(--science-accent);
  outline-offset: -1px;
}

@media (max-width: 900px) {
  .color-science-controls,
  .color-science-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .color-science-lightness {
    width: 100%;
  }

  .color-science-selected-color {
    align-self: start;
  }
}

@media (max-width: 680px) {
  .color-science-panel {
    padding: 14px;
  }

  .color-science-space-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px minmax(0, 1fr);
  }

  .color-science-select {
    min-width: 0;
  }

  .color-science-select select {
    width: 100%;
    min-width: 0;
  }

  .color-science-select:last-child {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--science-border);
    border-left: 0;
  }

  .color-science-planes,
  .color-science-reading-grid,
  .color-science-research {
    grid-template-columns: 1fr;
  }

  .color-science-research {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-science-plane canvas,
  .color-science-layers label > span::after {
    transition: none;
  }
}
#unresponsive-watchdog-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  pointer-events: none;
  display: block;
  background: transparent;
}

.adjustment-layer-thumbnail {
  position: relative;
}

.adjustment-layer-mask-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--panel-bg, #20252b);
  border-radius: 50%;
  background: #58d8ff;
  box-shadow: 0 0 0 1px rgb(88 216 255 / 35%);
}

/* Touch-first phone workspace
 *
 * The phone layout is enabled by js/app/phoneLayout.ts for standalone browsers.
 * It keeps the existing editors and panel state, but presents one workspace at
 * a time with controls in a full-width sheet above an iOS-safe bottom bar.
 */
.mobile-workspace-nav {
  display: none;
}

body.phone-layout {
  --mobile-nav-height: calc(70px + env(safe-area-inset-bottom, 0px));
  --mobile-preview-top: calc(48px + env(safe-area-inset-top, 0px));
  --mobile-preview-height: clamp(250px, 47vh, 420px);
  --mobile-sheet-height: calc(
    var(--app-viewport-height, 100vh) -
    var(--mobile-nav-height) -
    var(--mobile-preview-top) -
    var(--mobile-preview-height)
  );
  --slider-thumb-size: 38px;

  position: fixed;
  width: 100%;
  height: var(--app-viewport-height, 100vh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.phone-layout .mobile-workspace-nav {
  position: fixed;
  z-index: 99960;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  box-sizing: border-box;
  height: var(--mobile-nav-height);
  grid-auto-columns: minmax(70px, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px max(6px, env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    max(6px, env(safe-area-inset-left, 0px));
  border-top: 1px solid rgb(148 194 238 / 24%);
  background:
    linear-gradient(180deg, rgb(34 43 53 / 96%), rgb(18 24 31 / 98%));
  box-shadow: 0 -12px 36px rgb(0 0 0 / 34%);
  backdrop-filter: blur(18px) saturate(135%);
  scrollbar-width: none;
}

body.phone-layout .mobile-workspace-nav::-webkit-scrollbar {
  display: none;
}

body.phone-layout .mobile-workspace-nav__item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 62px;
  padding: 4px 2px 2px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: rgb(187 202 218 / 72%);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 620;
  letter-spacing: .01em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.phone-layout .mobile-workspace-nav__item > span:last-child {
  line-height: 1.1;
  text-wrap: balance;
}

body.phone-layout .mobile-workspace-nav__item .preset-group-icon {
  width: 23px;
  height: 23px;
  color: currentcolor;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

body.phone-layout .mobile-workspace-nav__item--active {
  color: #eaf5ff;
  background: rgb(91 166 238 / 14%);
  box-shadow: inset 0 0 0 1px rgb(119 190 255 / 16%);
}

body.phone-layout .mobile-workspace-nav__item--active::before {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: #84c3ff;
  box-shadow: 0 0 8px rgb(86 172 255 / 46%);
  content: '';
  transform: translateX(-50%);
}

body.phone-layout .mobile-workspace-nav__item--active .preset-group-icon {
  color: #84c3ff;
  filter: drop-shadow(0 0 6px rgb(86 172 255 / 32%));
}

/* All panels remains reachable from the compact Navigator tools menu, so
 * desktop launcher clusters stay out of the phone workspace. */
body.phone-layout > :is(
  .collapsed-dock-launcher,
  .bottom-dock-launcher,
  .panel-library-trigger,
  .scopes-dock-launcher-cluster
) {
  display: none !important;
}

body.phone-layout .studio-header__panel-launcher-slot {
  display: none !important;
}

body.phone-layout .network-speed-overlay {
  display: none !important;
}

/* Keep account access in the quiet top rail without letting a desktop-saved
 * launcher position cover either the photograph or the editing sheet. In
 * Beginner mode, advanced workflow and setup actions remain available from All. */
body.phone-layout .colorplane-mode-toggle-container {
  top: calc(5px + env(safe-area-inset-top, 0px)) !important;
  right: max(8px, env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
  gap: 0;
  padding: 2px;
}

body.phone-layout .colorplane-mode-toggle-container
  :is(.colorplane-mode-drag-handle, .colorplane-intro-btn) {
  display: none;
}

body.phone-layout .colorplane-mode-toggle-container .colorplane-account-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 6px;
}

body.phone-layout .colorplane-mode-toggle-container
  .colorplane-account-btn > span:last-child {
  display: none;
}

/* The active workspace owns the phone canvas. */
body.phone-layout #props_container .preset-group-container--page-split {
  top: env(safe-area-inset-top, 0px) !important;
  right: 0 !important;
  bottom: var(--mobile-nav-height) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(
    var(--app-viewport-height, 100vh) -
    var(--mobile-nav-height) -
    env(safe-area-inset-top, 0px)
  ) !important;
  max-height: none !important;
  border: 0 !important;
}

body.phone-layout #props_container .preset-group-container--page-split > .preset-group-resize-handle,
body.phone-layout .center-panel-separator {
  display: none !important;
}

/* Controls, looks, RAW, layers, and utility panels become thumb-reachable sheets. */
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(.preset-group-container--page-split) {
  top: auto !important;
  right: 0 !important;
  bottom: var(--mobile-nav-height) !important;
  left: 0 !important;
  width: 100vw !important;
  height: var(--mobile-sheet-height) !important;
  max-height: var(--mobile-sheet-height) !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgb(151 200 246 / 28%) !important;
  border-radius: 17px 17px 0 0 !important;
  background: color-mix(in srgb, var(--main-bg-color-props) 94%, #121820) !important;
  box-shadow: 0 -20px 56px rgb(0 0 0 / 54%) !important;
  animation-name: dock-panel-roll-in-bottom !important;
  padding-bottom: 0;
  z-index: 99920 !important;
}

body.phone-layout[data-mobile-view='workspace']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(.preset-group-container--page-split):not(
    [data-floating-panel-name='Navigator']
  ) {
  display: none !important;
}

/* Detached phone sheets must sit above the page-split editor while remaining
 * below the stable bottom navigation at 99960. */
body.phone-layout[data-mobile-view='sheet'] #floating_panels {
  z-index: 99959 !important;
}

/* Keep a live, touch-enabled image preview above every control sheet. */
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  top: var(--mobile-preview-top) !important;
  right: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  z-index: 99910 !important;
  width: auto !important;
  height: var(--mobile-preview-height) !important;
  max-height: var(--mobile-preview-height) !important;
  border: 1px solid rgb(151 200 246 / 26%) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 34%) !important;
  animation: none !important;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator']::before,
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator']
  > .preset-group-header,
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator']
  > .preset-group-resize-handle {
  display: none !important;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator']
  > .preset-group-body {
  height: 100%;
  padding: 0;
}

/* Full editor tabs become a lower control sheet, except the photo browser and
 * Grid canvas, which already show the photograph as their primary content. */
body.phone-layout:is(
  [data-mobile-view='workspace'],
  [data-mobile-view='looks'],
  [data-mobile-view='sheet']
)
  #props_container
  .preset-group-container--page-split:not(
    [data-floating-panel-name='Gallery'],
    [data-floating-panel-name='Grid']
  ) {
  top: auto !important;
  bottom: var(--mobile-nav-height) !important;
  z-index: 99920 !important;
  height: var(--mobile-sheet-height) !important;
  max-height: var(--mobile-sheet-height) !important;
  border-top: 1px solid rgb(151 200 246 / 28%) !important;
  border-radius: 17px 17px 0 0 !important;
  box-shadow: 0 -16px 42px rgb(0 0 0 / 46%) !important;
}

/* Beginner navigation already lives in the stable bottom bar. Removing the
 * duplicate workflow strip gives the actual controls another full touch row. */
body.phone-layout[data-interface-mode='beginner']
  #props_container
  .preset-group-container--page-split
  > .floating-panel-tabs {
  display: none !important;
}

body.phone-layout[data-mobile-view='workspace']:has(
  .preset-group-container--page-split[data-floating-panel-name='Gallery']
)
  .preset-group-container--detached[data-floating-panel-name='Navigator'],
body.phone-layout[data-mobile-view='workspace']:has(
  .preset-group-container--page-split[data-floating-panel-name='Grid']
)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  display: none !important;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(.preset-group-container--page-split)::before {
  width: 38px;
  height: 4px;
  margin: 6px auto 0;
  flex: 0 0 auto;
  border-radius: 99px;
  background: rgb(210 226 240 / 28%);
  content: '';
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(.preset-group-container--page-split)
  > .preset-group-resize-handle {
  display: none;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(.preset-group-container--page-split)
  > .preset-group-body {
  scroll-padding-block: 68px calc(var(--mobile-nav-height) + 18px);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Large, horizontally scrollable editor tabs preserve every workspace. */
body.phone-layout .floating-panel-tabs {
  min-height: 53px;
  padding: 3px 84px 0 4px;
}

body.phone-layout .floating-panel-tab-viewport,
body.phone-layout .floating-panel-tab-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.phone-layout .floating-panel-tab-viewport::-webkit-scrollbar,
body.phone-layout .floating-panel-tab-scroll::-webkit-scrollbar {
  display: none;
}

body.phone-layout .floating-panel-tab {
  min-width: 72px;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 7px 12px;
  touch-action: manipulation;
}

body.phone-layout .floating-panel-tab[data-icon-only='true'] {
  width: 48px;
  min-width: 48px;
}

body.phone-layout .floating-panel-collapse,
body.phone-layout .floating-panel-view-toggle,
body.phone-layout .floating-panel-accordion-nav-item {
  width: 48px;
  height: 48px;
  min-height: 48px;
}

body.phone-layout .floating-panel-accordion-nav {
  min-height: 48px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.phone-layout .floating-panel-accordion-nav::-webkit-scrollbar {
  display: none;
}

body.phone-layout :is(#props_container, #floating_panels) .preset-group-header {
  min-height: 56px;
  padding-top: 9px;
  padding-bottom: 9px;
}

body.phone-layout :is(#props_container, #floating_panels) .preset-group-control,
body.phone-layout .settings-panel-header-action {
  width: 52px;
  height: 52px;
}

body.phone-layout :is(#props_container, #floating_panels) .preset-group-controls {
  top: 6px;
}

body.phone-layout :is(#props_container, #floating_panels)
  :is(.preset-group-controls, .settings-panel-action-row)
  > .grid-header-menu-trigger {
  width: 52px;
  height: 52px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--title-action:has(> .preset-group-controls > .grid-header-menu-trigger)
  > :is(.preset-group-header, .floating-panel-tabs) {
  padding-right: 168px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container:not(.preset-group-container--title-action):has(> .preset-group-controls > .grid-header-menu-trigger)
  > :is(.preset-group-header, .floating-panel-tabs) {
  padding-right: 220px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container.preset-group-container--header-controls-below
  > .floating-panel-tabs {
  padding-right: 4px;
}

body.phone-layout #props_container
  .preset-group-container[data-floating-panel-name='Grid']
  > .settings-panel-group-action-row {
  padding-top: 12px;
  padding-bottom: 4px;
}

body.phone-layout .preset-group-title-action {
  top: 14px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-title-action .grid-projection-badge {
  width: 52px;
  height: 32px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--title-action > .preset-group-header .preset-group-heading {
  margin-left: 58px;
}

body.phone-layout :is(#props_container, #floating_panels) .preset-group-grip,
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-controls > button:last-child {
  display: none;
}

/* Form controls use iOS-safe text sizing and comfortable finger targets. */
body.phone-layout :is(#props_container, #floating_panels, #main_tabs_react)
  :is(
    button,
    select,
    input[type='text'],
    input[type='email'],
    input[type='search'],
    input[type='number']
  ) {
  min-height: 52px;
}

/* A 48–52 px hit box is the phone baseline, even when the visible glyph is small. */
body.phone-layout :is(#props_container, #floating_panels, #main_tabs_react)
  .preset-group-body
  :is(button, summary, [role='button'], [role='tab']) {
  min-width: 48px;
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.phone-layout :is(#props_container, #floating_panels, #main_tabs_react)
  :is(.topcoat-checkbox, .topcoat-button-bar__item) {
  box-sizing: border-box;
  min-height: 52px;
  align-items: center;
  touch-action: manipulation;
}

body.phone-layout :is(#props_container, #floating_panels, #main_tabs_react)
  .topcoat-checkbox {
  display: inline-flex;
  min-width: 52px;
  padding-block: 8px;
}

body.phone-layout :is(
  select,
  input[type='text'],
  input[type='email'],
  input[type='search'],
  input[type='number']
) {
  font-size: 16px !important;
}

body.phone-layout input[type='range'] {
  min-height: 52px;
  touch-action: pan-y;
}

body.phone-layout .hsl2-row {
  box-sizing: border-box;
  min-height: 64px;
  height: auto;
  grid-template-columns: 56px minmax(0, 1fr) 54px;
  column-gap: 10px;
}

body.phone-layout .hsl2-row > .inline-slider {
  display: contents;
}

body.phone-layout .hsl2-row > .inline-slider > input[type='range'] {
  grid-column: 2;
}

body.phone-layout .hsl2-row > .inline-slider > .inline-slider-value {
  width: 54px;
  min-width: 54px;
  grid-column: 3;
  justify-self: stretch;
}

body.phone-layout .huesat-control-row {
  box-sizing: border-box;
  min-height: 64px;
  grid-template-columns: 82px minmax(0, 1fr) 54px;
  column-gap: 10px;
}

body.phone-layout .huesat-control-row > .inline-slider {
  display: contents;
}

body.phone-layout .huesat-control-row > .inline-slider > input[type='range'] {
  grid-column: 2;
}

body.phone-layout .huesat-control-row > .inline-slider > .inline-slider-value {
  width: 54px;
  min-width: 54px;
  grid-column: 3;
  justify-self: stretch;
}

body.phone-layout .huesat-white-balance-card {
  min-height: 64px;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 10px;
}

body.phone-layout input[type='range']::-webkit-slider-thumb {
  min-width: 38px;
  min-height: 38px;
}

body.phone-layout :is(#props_container, #floating_panels, .grid-projection-menu) .inline-slider {
  min-height: 60px;
  gap: 7px;
}

body.phone-layout :is(#props_container, #floating_panels, .grid-projection-menu)
  .inline-slider-stepper {
  gap: 5px;
}

body.phone-layout :is(#props_container, #floating_panels, .grid-projection-menu)
  .inline-slider-stepper button {
  width: 48px;
  min-width: 48px;
  height: 52px;
  border-radius: 11px;
  font-size: 21px;
}

body.phone-layout :is(#props_container, #floating_panels)
  .cp-button.topcoat-icon-button,
body.phone-layout :is(#props_container, #floating_panels)
  label.topcoat-button-bar__item[role='checkbox'] {
  width: 52px;
  min-width: 52px;
  height: 52px;
}

body.phone-layout #buttons_panel {
  min-height: 54px;
  padding: 5px 6px;
}

body.phone-layout #buttons_panel.grid-toolbar-panel--empty {
  height: 0;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

body.phone-layout .grid-toolbar-button,
body.phone-layout .grid-toolbar-overflow__trigger {
  width: 52px;
  min-width: 52px;
  height: 52px;
}

body.phone-layout .grid-toolbar-run__grip {
  display: none;
}

body.phone-layout .panel-library-backdrop,
body.phone-layout .workspace-settings-backdrop {
  padding: env(safe-area-inset-top, 0px) 0 var(--mobile-nav-height);
  place-items: end center;
}

body.phone-layout .panel-library-dialog,
body.phone-layout .workspace-settings-dialog {
  width: 100vw;
  max-height: calc(
    var(--app-viewport-height, 100vh) -
    var(--mobile-nav-height) -
    env(safe-area-inset-top, 0px)
  );
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 17px 17px 0 0;
}

body.phone-layout .panel-library-header {
  height: 58px;
  padding-inline: 15px;
}

body.phone-layout .panel-library-header kbd {
  display: none;
}

body.phone-layout .panel-library-groups {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 14px;
}

body.phone-layout .panel-library-result {
  min-height: 66px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  padding: 7px 10px;
  border-radius: 10px;
}

body.phone-layout .panel-library-result .preset-group-icon {
  width: 26px;
  height: 26px;
}

body.phone-layout .panel-library-result strong {
  font-size: 14px;
}

body.phone-layout .panel-library-result small {
  font-size: 11px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-main {
  grid-template-columns: 52px 40px minmax(0, 1fr);
  gap: 3px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-visibility,
body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-remove {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 10px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layers-add {
  min-height: 44px;
}

body.phone-layout #props_container .settings-projection-grid .topcoat-button-bar__item,
body.phone-layout #props_container .settings-rgb-style-grid .topcoat-button-bar__item,
body.phone-layout #props_container .projection-type-choice,
body.phone-layout #props_container .rgb-2d-style-choice {
  min-height: 52px;
}

/* Drag handles stay visually compact but receive a forgiving finger-sized halo. */
body.phone-layout :is(.volume-handle, .wheel-handle, .ui-slider-handle) {
  position: relative;
  touch-action: none;
}

body.phone-layout :is(.volume-handle, .wheel-handle, .ui-slider-handle)::before {
  position: absolute;
  inset: -17px;
  border-radius: 50%;
  content: '';
}

body.phone-layout :is(#props_container, #floating_panels)
  .volume-editor-actions :is(.cp-button, .cp-button2) {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
}

body.phone-layout .palette-sample {
  width: 48px;
  height: 48px;
  touch-action: none;
}

body.phone-layout .wheel-channel {
  display: grid;
  min-height: 48px;
  padding: 0 10px;
  place-items: center;
  font-size: 14px;
  font-weight: 650;
  touch-action: none;
}

/* The phone preview is image-first. Its editing chrome floats over the photo
 * only while the user is working directly with that preview. */
body.phone-layout .navigator-floating-body {
  position: relative;
}

body.phone-layout .navigator-floating-body .navigator-floating-toolbar,
body.phone-layout .navigator-floating-body .navigator-info-bar {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1005;
  flex: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

body.phone-layout .navigator-floating-body .navigator-floating-toolbar {
  top: 0;
  min-height: 52px;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  background: linear-gradient(180deg, rgb(16 22 29 / 94%), rgb(16 22 29 / 78%));
  transform: translateY(-8px);
  backdrop-filter: blur(14px) saturate(130%);
}

body.phone-layout .navigator-floating-body .navigator-info-bar {
  bottom: 0;
  min-height: 52px;
  border-top: 1px solid rgb(255 255 255 / 16%);
  background: linear-gradient(0deg, rgb(16 22 29 / 94%), rgb(16 22 29 / 78%));
  transform: translateY(8px);
  backdrop-filter: blur(14px) saturate(130%);
}

body.phone-layout
  .navigator-floating-body.mobile-preview-controls-visible
  :is(.navigator-floating-toolbar, .navigator-info-bar) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

body.phone-layout .navigator-floating-body .navigator-toolbar {
  height: auto;
  min-height: 52px;
  padding: 4px 8px;
}

body.phone-layout .navigator-floating-body .navigator-toolbar--mobile-menu {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: flex-end;
}

body.phone-layout .navigator-mobile-tools-trigger {
  display: inline-flex;
  width: 48px;
  min-width: 48px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #eaf5ff;
  border: 1px solid rgb(151 200 246 / 24%);
  border-radius: 10px;
  background: rgb(33 44 56 / 86%);
  cursor: pointer;
}

body.phone-layout .navigator-mobile-tools-trigger > span {
  display: inline-flex;
  width: 22px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

body.phone-layout .navigator-mobile-tools-trigger i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: currentcolor;
}

body.phone-layout .navigator-mobile-tools-trigger:focus-visible {
  outline: 2px solid #84c3ff;
  outline-offset: 2px;
}

.navigator-mobile-tools-menu {
  position: fixed;
  z-index: 100080;
  display: flex;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  padding: 10px;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  color: #eaf5ff;
  border: 1px solid rgb(151 200 246 / 28%);
  border-radius: 15px;
  background: rgb(20 28 36 / 98%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 48%);
  backdrop-filter: blur(18px) saturate(125%);
}

.navigator-mobile-tools-menu > header {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navigator-mobile-tools-menu > header > strong {
  font-size: 14px;
}

.navigator-mobile-tools-menu > header > button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: inherit;
  border: 0;
  border-radius: 9px;
  background: rgb(255 255 255 / 8%);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.navigator-mobile-tools-menu__panels {
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  color: #eaf5ff;
  border: 1px solid rgb(132 195 255 / 30%);
  border-radius: 10px;
  background: rgb(91 166 238 / 14%);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.navigator-mobile-tools-menu__tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.navigator-mobile-tools-menu__tools .navigator-toolbar__group {
  display: contents;
}

.navigator-mobile-tools-menu__tools .navigator-toolbar-button {
  width: 100%;
  min-width: 0;
  height: 48px;
  color: #c9deef !important;
  border: 1px solid rgb(151 200 246 / 18%);
  border-radius: 9px;
  background: rgb(255 255 255 / 6%);
}

.navigator-mobile-tools-menu__tools .navigator-toolbar-button--active {
  color: #eaf5ff !important;
  border-color: rgb(132 195 255 / 64%);
  background: rgb(68 142 228 / 24%);
}

.navigator-mobile-tools-menu__tools .navigator-toolbar-button:disabled {
  color: #8498aa !important;
  opacity: 1;
}

.navigator-mobile-tools-menu :is(button, [role='radio']):focus-visible {
  outline: 2px solid #84c3ff;
  outline-offset: 2px;
}

body.phone-layout .navigator-floating-body .navigator-toolbar__edge {
  display: none;
}

body.phone-layout .navigator-floating-body .navigator-toolbar__center {
  display: grid;
  width: 100%;
  flex: 1 1 100%;
  grid-template-columns: repeat(8, minmax(0, 42px));
  gap: 6px;
  justify-content: center;
  overflow: visible;
}

body.phone-layout .navigator-floating-body .navigator-toolbar__group {
  display: contents;
}

body.phone-layout .navigator-floating-body .navigator-toolbar-button {
  width: 100%;
  height: 42px;
  min-width: 0;
  flex-basis: auto;
  border-radius: 9px;
}

body.phone-layout .navigator-floating-body .navigator-floating-canvas {
  flex: 1 1 100%;
}

/* Grid Settings is a clean, responsive comparison workspace. Creative panels
 * such as Wheels must never remain visible behind it. */
body.phone-layout[data-mobile-view='adjust'] {
  --mobile-compare-gap: 8px;
  --mobile-compare-height: var(--mobile-preview-height);
  --mobile-compare-tile-height: calc(
    (var(--mobile-compare-height) - var(--mobile-compare-gap)) / 2
  );
}

body.phone-layout[data-mobile-view='adjust']
  [data-floating-panel-name='Grid']
  :is(
    .preset-group-header,
    .floating-panel-tabs,
    .floating-panel-accordion-nav,
    #buttons_panel,
    .grid-zoom-hud
  ) {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split:not(
    [data-floating-panel-name='Grid']
  ) {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  top: var(--mobile-preview-top) !important;
  right: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: var(--mobile-compare-tile-height) !important;
  max-height: var(--mobile-compare-tile-height) !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}

body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'] {
  top: calc(
    var(--mobile-preview-top) +
    var(--mobile-compare-tile-height) +
    var(--mobile-compare-gap)
  ) !important;
  right: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  z-index: 99910 !important;
  width: auto !important;
  height: var(--mobile-compare-tile-height) !important;
  max-height: var(--mobile-compare-tile-height) !important;
  overflow: hidden !important;
  border: 1px solid rgb(151 200 246 / 26%) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 34%) !important;
}

body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid']
  > :is(.preset-group-header, .preset-group-resize-handle) {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid']
  > .preset-group-body {
  height: 100%;
  padding: 0;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-settings='closed'] {
  --mobile-compare-height: calc(
    var(--app-viewport-height, 100vh) -
    var(--mobile-nav-height) -
    var(--mobile-preview-top) -
    8px
  );
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-settings='closed']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(
    .preset-group-container--page-split,
    [data-floating-panel-name='Navigator']
  ),
body.phone-layout[data-mobile-view='adjust']:not(
  [data-mobile-compare-focus='split']
)
  :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(
    .preset-group-container--page-split,
    [data-floating-panel-name='Navigator']
  ) {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'],
body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='grid']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'],
body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='grid']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'] {
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  right: 8px !important;
  bottom: calc(var(--mobile-nav-height) + 8px) !important;
  left: 8px !important;
  z-index: 99940 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 17px !important;
  box-shadow: 0 16px 44px rgb(0 0 0 / 48%) !important;
}

.mobile-grid-compare-overlay {
  display: none;
}

body.phone-layout[data-mobile-view='adjust'] .mobile-grid-compare-overlay {
  position: fixed;
  z-index: 99950;
  display: block;
  pointer-events: none;
}

.mobile-grid-compare-tile,
.mobile-grid-compare-mode {
  position: fixed;
  box-sizing: border-box;
  border: 0;
  font: inherit;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-grid-compare-tile {
  right: 8px;
  left: 8px;
  height: var(--mobile-compare-tile-height);
  padding: 0;
  border-radius: 15px;
  outline-offset: -3px;
  background: transparent;
}

.mobile-grid-compare-tile--photo {
  top: var(--mobile-preview-top);
}

.mobile-grid-compare-tile--grid {
  top: calc(
    var(--mobile-preview-top) +
    var(--mobile-compare-tile-height) +
    var(--mobile-compare-gap)
  );
}

.mobile-grid-compare-tile:focus-visible {
  outline: 3px solid #7dc3ff;
}

.mobile-grid-compare-mode {
  z-index: 99960;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  display: inline-flex;
  min-width: 94px;
  min-height: 48px;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgb(145 199 247 / 34%);
  border-radius: 999px;
  color: #eaf6ff;
  background: rgb(20 29 38 / 88%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 34%);
  font-size: 12px;
  font-weight: 720;
  transform: translateX(-50%);
  backdrop-filter: blur(14px) saturate(130%);
}

.mobile-grid-compare-mode > span {
  font-size: 17px;
  line-height: 1;
}

.mobile-grid-compare-mode--split {
  display: none;
}

body.phone-layout[data-mobile-view='adjust']:not(
  [data-mobile-compare-focus='split']
)
  .mobile-grid-compare-mode--split {
  display: inline-flex;
}

body.phone-layout[data-mobile-view='adjust']:not(
  [data-mobile-compare-focus='split']
)
  .mobile-grid-compare-mode--settings {
  display: none;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  .mobile-grid-compare-tile--grid,
body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='grid']
  .mobile-grid-compare-tile--photo {
  display: none;
}

body.phone-layout[data-mobile-view='adjust']:not(
  [data-mobile-compare-focus='split']
)
  .mobile-grid-compare-tile {
  top: max(8px, env(safe-area-inset-top, 0px));
  right: 8px;
  bottom: calc(var(--mobile-nav-height) + 8px);
  left: 8px;
  width: auto;
  height: auto;
  border-radius: 17px;
}

body.phone-layout #wheel_panel .wheel-tab {
  font-size: 13px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-tabs-shell {
  height: 56px;
  padding-block: 2px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-control-card {
  padding: 6px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-control-heading {
  min-height: 44px;
  align-items: flex-end;
  margin-bottom: 0;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-power-switch {
  height: 44px;
  min-height: 44px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .color-wheel {
  width: min(112px, 100%);
  margin-top: 0;
  margin-bottom: 4px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact
  :is(.adjustment-info, .adjustment-info-offset) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .wheel-channel {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
}

body.phone-layout #wheel_panel #wheel_container {
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

body.phone-layout #wheel_panel.wheel-panel-dock-compact .adjustment-info-offset
  .wheel-channel-b {
  grid-column: 1 / -1;
  width: calc(50% - 2px);
  justify-self: center;
}

body.phone-layout #wheel_panel .wheel-control-kicker,
body.phone-layout #wheel_panel .wheel-section-overline,
body.phone-layout #wheel_panel .wheel-power-state {
  font-size: 10px;
}

body.phone-layout #wheel_panel .wheel-control-title {
  font-size: 18px;
}

body.phone-layout #wheel_panel .wheel-channel-label {
  left: 10px;
  font-size: 10px;
}

body.phone-layout #wheel_panel .wheel-channel-value {
  font-size: 14px;
  line-height: 1.2;
}

body.phone-layout :is(
  #levels_canvas2,
  #strip_canvas1,
  #strip_canvas2,
  #strip_canvas3,
  .color-wheel,
  .round-hue-curve
) {
  touch-action: none;
}

body.phone-layout .samples-grid .sample-remove {
  width: 52px;
  min-width: 52px;
  height: 52px;
  opacity: 1;
}

@media (orientation: landscape) and (max-height: 600px) {
  body.phone-layout {
    --mobile-preview-top: calc(52px + env(safe-area-inset-top, 0px));
    --mobile-preview-height: calc(
      var(--app-viewport-height, 100vh) -
      var(--mobile-nav-height) -
      var(--mobile-preview-top)
    );
    --mobile-sheet-height: var(--mobile-preview-height);
  }

  body.phone-layout .mobile-workspace-nav {
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  }

  body.phone-layout :is(#props_container, #floating_panels)
    .preset-group-container--detached[data-floating-panel-name='Navigator'] {
    right: auto !important;
    width: 42vw !important;
    border-radius: 0 14px 14px 0 !important;
  }

  body.phone-layout[data-mobile-view='adjust']
    {
    --mobile-compare-height: calc(
      var(--app-viewport-height, 100vh) -
      var(--mobile-nav-height) -
      var(--mobile-preview-top) -
      8px
    );
    --mobile-compare-tile-height: var(--mobile-compare-height);
  }

  body.phone-layout[data-mobile-view='adjust']
    :is(#props_container, #floating_panels)
    .preset-group-container--detached[data-floating-panel-name='Navigator'] {
    top: var(--mobile-preview-top) !important;
    right: calc(50vw + 4px) !important;
    left: 8px !important;
    width: auto !important;
    height: var(--mobile-compare-height) !important;
    max-height: var(--mobile-compare-height) !important;
    border-radius: 15px !important;
  }

  body.phone-layout[data-mobile-view='adjust']
    #props_container
    .preset-group-container--page-split[data-floating-panel-name='Grid'] {
    top: var(--mobile-preview-top) !important;
    right: 8px !important;
    left: calc(50vw + 4px) !important;
    width: auto !important;
    height: var(--mobile-compare-height) !important;
    max-height: var(--mobile-compare-height) !important;
    border-radius: 15px !important;
  }

  body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-settings='open']
    :is(#props_container, #floating_panels)
    .preset-group-container--detached:not(
      .preset-group-container--page-split,
      [data-floating-panel-name='Navigator']
    ) {
    top: auto !important;
    right: 0 !important;
    bottom: var(--mobile-nav-height) !important;
    left: 0 !important;
    z-index: 99930 !important;
    width: 100vw !important;
    height: min(54vh, 310px) !important;
    max-height: min(54vh, 310px) !important;
    border-radius: 17px 17px 0 0 !important;
  }

  body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='split']
    .mobile-grid-compare-tile {
    top: var(--mobile-preview-top);
    bottom: auto;
    width: auto;
    height: var(--mobile-compare-height);
  }

  body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='split']
    .mobile-grid-compare-tile--photo {
    right: calc(50vw + 4px);
    left: 8px;
  }

  body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='split']
    .mobile-grid-compare-tile--grid {
    right: 8px;
    left: calc(50vw + 4px);
  }

  body.phone-layout :is(#props_container, #floating_panels)
    .preset-group-container--detached:not(
      .preset-group-container--page-split,
      [data-floating-panel-name='Navigator']
    ),
  body.phone-layout:is(
    [data-mobile-view='workspace'],
    [data-mobile-view='looks'],
    [data-mobile-view='sheet']
  )
    #props_container
    .preset-group-container--page-split:not(
      [data-floating-panel-name='Gallery'],
      [data-floating-panel-name='Grid']
    ) {
    top: var(--mobile-preview-top) !important;
    right: 0 !important;
    bottom: var(--mobile-nav-height) !important;
    left: 42vw !important;
    width: 58vw !important;
    height: var(--mobile-sheet-height) !important;
    max-height: var(--mobile-sheet-height) !important;
    border-top-left-radius: 14px !important;
  }
}

/* Mobile Grid editing uses a movable photo-in-picture preview. The Grid keeps
 * every pointer event, while only the two compact preview controls sit above
 * it. This keeps the rendered photograph visible without sacrificing point
 * editing space. */
body.phone-layout[data-mobile-view='adjust'] {
  --mobile-pip-width: clamp(132px, 40vw, 180px);
  --mobile-pip-height: clamp(132px, 28vh, 210px);
}

body.phone-layout[data-mobile-view='adjust'] #floating_panels {
  z-index: 99943 !important;
}

body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'] {
  top: var(--mobile-preview-top) !important;
  right: 8px !important;
  bottom: calc(var(--mobile-nav-height) + 8px) !important;
  left: 8px !important;
  z-index: 99910 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgb(151 200 246 / 26%) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%) !important;
}

body.phone-layout[data-mobile-view='adjust']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  top: var(--mobile-pip-top, 60px) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--mobile-pip-left, calc(100vw - var(--mobile-pip-width) - 8px)) !important;
  z-index: 99942 !important;
  display: flex !important;
  width: var(--mobile-pip-width) !important;
  height: var(--mobile-pip-height) !important;
  max-height: var(--mobile-pip-height) !important;
  overflow: hidden !important;
  border: 1px solid rgb(190 218 241 / 50%) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgb(0 0 0 / 48%) !important;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='split']
  .navigator-floating-body
  :is(.navigator-floating-toolbar, .navigator-info-bar) {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'] {
  display: none !important;
}

body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  right: 8px !important;
  bottom: calc(var(--mobile-nav-height) + 8px) !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 17px !important;
}

.mobile-grid-pip-controls {
  position: fixed;
  z-index: 99954;
  width: var(--mobile-pip-width);
  height: 44px;
  pointer-events: none;
}

.mobile-grid-pip-drag-shield {
  position: fixed;
  z-index: 99953;
  inset: 0;
  cursor: grabbing;
  touch-action: none;
}

.mobile-grid-pip-control,
.mobile-grid-preview-return {
  position: absolute;
  display: inline-flex;
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(176 213 244 / 42%);
  color: #edf7ff;
  background: rgb(18 27 36 / 88%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 38%);
  font: inherit;
  font-size: 17px;
  pointer-events: auto;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-tap-highlight-color: transparent;
}

.mobile-grid-pip-control {
  top: 6px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
}

.mobile-grid-pip-control--move {
  left: 6px;
  cursor: grab;
  touch-action: none;
}

.mobile-grid-pip-control--move:active {
  cursor: grabbing;
}

.mobile-grid-pip-control--expand {
  right: 6px;
  touch-action: manipulation;
}

.mobile-grid-preview-return {
  position: fixed;
  z-index: 99960;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  min-height: 44px;
  gap: 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 720;
  touch-action: manipulation;
}

/* Colorplane's phone workspace has one stable visual hierarchy: the live
 * edited photograph stays in the upper stage and every browser, editor, and
 * settings panel occupies the lower control deck. This intentionally
 * supersedes the earlier full-screen Grid and movable picture-in-picture
 * layouts, which could cover the photograph after switching tabs. */
body.phone-layout {
  --mobile-stage-gap: 8px;
  --mobile-preview-top: env(safe-area-inset-top, 0px);
  --mobile-preview-height: clamp(232px, 41vh, 380px);
  --mobile-sheet-height: calc(
    var(--app-viewport-height, 100vh) -
    var(--mobile-nav-height) -
    var(--mobile-preview-top) -
    var(--mobile-preview-height) -
    var(--mobile-stage-gap)
  );
}

body.phone-layout .mobile-grid-compare-overlay {
  display: none !important;
}

body.phone-layout #props_container .preset-group-container--page-split,
body.phone-layout[data-mobile-view='adjust']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'],
body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  #props_container
  .preset-group-container--page-split[data-floating-panel-name='Grid'] {
  top: auto !important;
  right: 0 !important;
  bottom: var(--mobile-nav-height) !important;
  left: 0 !important;
  z-index: 99900 !important;
  display: flex !important;
  width: 100vw !important;
  height: var(--mobile-sheet-height) !important;
  max-height: var(--mobile-sheet-height) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgb(151 200 246 / 24%) !important;
  border-radius: 17px 17px 0 0 !important;
  background: color-mix(in srgb, var(--main-bg-color-props) 96%, #111820) !important;
  box-shadow: 0 -12px 34px rgb(0 0 0 / 28%) !important;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(
    .preset-group-container--page-split,
    [data-floating-panel-name='Navigator']
  ) {
  top: auto !important;
  bottom: var(--mobile-nav-height) !important;
  z-index: 99920 !important;
  height: var(--mobile-sheet-height) !important;
  max-height: var(--mobile-sheet-height) !important;
}

/* Only the destination chosen in the phone navigation may occupy the control
 * deck. Detached desktop panels can otherwise share the same forced mobile
 * z-index, allowing a later sibling to cover Export or another selected sheet. */
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-mobile-panel-active='false']:not(
    [data-floating-panel-name='Navigator']
  ) {
  display: none !important;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:not(
    [data-floating-panel-name='Navigator']
  )
  > .preset-group-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'],
body.phone-layout :is(#props_container, #floating_panels)
  .preset-group-container--detached:has(.navigator-floating-body),
body.phone-layout[data-mobile-view='adjust']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'],
body.phone-layout[data-mobile-view='adjust'][data-mobile-compare-focus='photo']
  :is(#props_container, #floating_panels)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  top: var(--mobile-preview-top) !important;
  right: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  z-index: 99910 !important;
  display: flex !important;
  width: auto !important;
  height: var(--mobile-preview-height) !important;
  max-height: var(--mobile-preview-height) !important;
  overflow: hidden !important;
  border: 1px solid rgb(151 200 246 / 28%) !important;
  border-radius: 15px !important;
  background: #10151b !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 34%) !important;
}

body.phone-layout[data-mobile-view='workspace']:has(
  .preset-group-container--page-split[data-floating-panel-name='Gallery']
)
  .preset-group-container--detached[data-floating-panel-name='Navigator'],
body.phone-layout[data-mobile-view='workspace']:has(
  .preset-group-container--page-split[data-floating-panel-name='Grid']
)
  .preset-group-container--detached[data-floating-panel-name='Navigator'] {
  display: flex !important;
}

body.phone-layout .mobile-workspace-nav__item {
  cursor: pointer;
}

@media (orientation: portrait) and (max-height: 700px) {
  body.phone-layout {
    --mobile-preview-height: clamp(196px, 36vh, 252px);
  }
}

@media (max-width: 360px) {
  body.phone-layout .mobile-workspace-nav__item {
    font-size: 10px;
  }

  body.phone-layout .mobile-workspace-nav__item .preset-group-icon {
    width: 22px;
    height: 22px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.phone-layout {
    --mobile-preview-height: calc(
      var(--app-viewport-height, 100vh) -
      var(--mobile-nav-height) -
      var(--mobile-preview-top)
    );
    --mobile-sheet-height: var(--mobile-preview-height);
  }

  body.phone-layout :is(#props_container, #floating_panels)
    .preset-group-container--detached[data-floating-panel-name='Navigator'] {
    right: auto !important;
    left: 8px !important;
    width: calc(42vw - 8px) !important;
  }

  body.phone-layout #props_container .preset-group-container--page-split,
  body.phone-layout :is(#props_container, #floating_panels)
    .preset-group-container--detached:not(
      .preset-group-container--page-split,
      [data-floating-panel-name='Navigator'],
      :has(.navigator-floating-body)
    ) {
    top: var(--mobile-preview-top) !important;
    right: 0 !important;
    bottom: var(--mobile-nav-height) !important;
    left: 42vw !important;
    width: 58vw !important;
    height: var(--mobile-sheet-height) !important;
    max-height: var(--mobile-sheet-height) !important;
    border-radius: 14px 0 0 !important;
  }
}

/* ==========================================================================
   Colorplane Gemini5 - Mode Switcher & Onboarding Introduction Styles
   ========================================================================== */

.colorplane-mode-toggle-container {
  position: fixed;
  top: 10px;
  right: 170px;
  z-index: 2147483500;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(22, 27, 34, 0.85);
  backdrop-filter: blur(12px);
  padding: 4px 6px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  user-select: none;
  pointer-events: auto;
}

.colorplane-mode-toggle-container.is-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
}

.colorplane-mode-drag-handle {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  margin: -1px 0 -1px -2px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #737b87;
  cursor: grab;
  touch-action: none;
}

.colorplane-mode-drag-handle:hover,
.colorplane-mode-drag-handle:focus-visible {
  color: #d7dce3;
  background: rgba(255, 255, 255, 0.08);
}

.colorplane-mode-drag-handle:focus-visible {
  outline: 2px solid var(--colorplane-accent);
  outline-offset: 1px;
}

.colorplane-mode-drag-handle:active,
.colorplane-mode-toggle-container.is-dragging .colorplane-mode-drag-handle {
  cursor: grabbing;
}

.colorplane-mode-drag-handle svg {
  fill: currentColor;
}

.colorplane-mode-toggle-pill {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px;
  border-radius: 16px;
  gap: 2px;
}

.colorplane-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: #a0a6b0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.colorplane-mode-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.colorplane-mode-btn.active {
  background: linear-gradient(135deg, var(--colorplane-accent) 0%, var(--colorplane-accent-strong) 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(var(--colorplane-accent-rgb) / 40%);
}

.colorplane-mode-btn .mode-icon {
  flex-shrink: 0;
}

.colorplane-intro-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 30%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  color: var(--colorplane-accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.colorplane-intro-btn:hover {
  background: rgb(var(--colorplane-accent-rgb) / 25%);
  border-color: rgb(var(--colorplane-accent-rgb) / 60%);
  color: var(--colorplane-accent-soft);
}

.colorplane-account-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  background: rgb(255 255 255 / 5%);
  color: #aeb7c3;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.colorplane-account-btn:hover,
.colorplane-account-btn:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 42%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  color: #fff;
  outline: none;
}

.colorplane-language-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  background: rgb(255 255 255 / 5%);
  color: #aeb7c3;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.colorplane-language-btn:hover,
.colorplane-language-btn:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 42%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  color: #fff;
  outline: none;
}

.colorplane-language-btn > span:first-child {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 7px;
  background: rgb(var(--colorplane-accent-rgb) / 15%);
  color: var(--colorplane-accent-soft);
  font-size: 10px;
  font-weight: 800;
}

.colorplane-account-btn__mark {
  display: block;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  object-fit: cover;
}

.shared-account-overlay {
  position: fixed;
  z-index: 2147483642;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(6 9 14 / 72%);
  backdrop-filter: blur(15px);
}

.shared-account-panel {
  width: min(492px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden auto;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 28%);
  border-radius: 19px;
  background:
    radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 17%), transparent 38%),
    linear-gradient(155deg, rgb(28 34 45 / 98%), rgb(12 17 26 / 99%));
  box-shadow: 0 28px 75px rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 7%);
  color: #dce5f0;
  font-family: inherit;
}

.shared-account-panel__header {
  display: grid;
  grid-template-columns: 34px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(8 12 19 / 48%);
}

.shared-account-panel__mark {
  display: block;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow: 0 8px 20px rgb(var(--colorplane-accent-rgb) / 25%);
  object-fit: cover;
}

.shared-account-panel__header > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.shared-account-panel__header small {
  color: #8793a4;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.shared-account-panel__header strong {
  color: #edf3fa;
  font-size: 13px;
}

.shared-account-panel__header button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8995a4;
  font-size: 22px;
  cursor: pointer;
}

.shared-account-panel__header button:hover,
.shared-account-panel__header button:focus-visible {
  background: rgb(255 255 255 / 8%);
  color: white;
  outline: none;
}

.shared-account-panel__body {
  padding: 24px;
}

.shared-account-panel__body h2 {
  margin: 0;
  color: #f1f5fa;
  font-size: 26px;
  letter-spacing: -.035em;
}

.shared-account-panel__body > p:first-of-type {
  margin: 9px 0 20px;
  color: #9aa6b6;
  font-size: 12.5px;
  line-height: 1.55;
}

.shared-account-products {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.shared-account-products > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 9px;
  padding: 11px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
}

.shared-account-products > .shared-account-products__colorplane {
  grid-template-columns: 34px minmax(0, 1fr);
}

.shared-account-products > .shared-account-products__claire-noir {
  grid-template-columns: 34px minmax(0, 1fr);
}

.shared-account-products i {
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 10px;
  background: rgb(var(--colorplane-accent-rgb) / 13%);
  color: var(--colorplane-accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.shared-account-products b {
  align-self: end;
  color: #dce5ef;
  font-size: 11px;
}

.shared-account-products small {
  overflow: hidden;
  color: #7f8b9a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-account-products em {
  color: var(--colorplane-accent);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
  font-style: normal;
  text-align: center;
}

.shared-account-products :is(.shared-account-products__logo, .shared-account-products__claire-noir-logo) {
  width: 27px;
  height: 27px;
  grid-row: 1 / 3;
  align-self: center;
  border-radius: 8px;
  object-fit: cover;
}

.shared-account-provider-stack {
  display: grid;
  gap: 8px;
}

.shared-account-without-primary {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  padding: 10px 13px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 52%);
  border-radius: 12px;
  background: linear-gradient(120deg, rgb(var(--colorplane-accent-rgb) / 20%), rgb(var(--colorplane-accent-rgb) / 8%));
  color: #edf3fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.shared-account-without-primary:hover,
.shared-account-without-primary:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 78%);
  background: rgb(var(--colorplane-accent-rgb) / 20%);
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 20%);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.shared-account-without-primary > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  color: white;
  font-size: 19px;
  font-weight: 800;
}

.shared-account-without-primary > span:last-child {
  display: grid;
  gap: 3px;
}

.shared-account-without-primary strong {
  font-size: 12px;
}

.shared-account-without-primary small {
  color: #a0acba;
  font-size: 9.5px;
  line-height: 1.3;
}

.shared-account-sign-in-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7f8b9b;
  font-size: 8.5px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.shared-account-sign-in-divider::before,
.shared-account-sign-in-divider::after {
  height: 1px;
  flex: 1;
  background: rgb(255 255 255 / 8%);
  content: '';
}

.shared-account-provider-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 2px;
}

.shared-account-provider-heading strong {
  color: #dfe7f1;
  font-size: 10px;
}

.shared-account-provider-heading span {
  color: var(--colorplane-accent-soft);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.shared-account-provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shared-account-provider {
  position: relative;
  box-sizing: border-box;
  display: grid;
  min-height: 54px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 11px;
  background: rgb(255 255 255 / 5%);
  color: #e6edf5;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.shared-account-provider:hover,
.shared-account-provider:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 48%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  outline: none;
  transform: translateY(-1px);
}

.shared-account-provider:disabled {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
}

.shared-account-provider > span:first-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgb(255 255 255 / 9%);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.shared-account-provider.is-google > span:first-child {
  background: #fff;
  color: #4285f4;
}

.shared-account-provider.is-apple > span:first-child {
  background: #090b0f;
  color: #fff;
}

.shared-account-provider.is-claire > span:first-child {
  background: linear-gradient(135deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  color: #fff;
  font-size: 9px;
}

.shared-account-provider.is-claire {
  grid-template-columns: 32px minmax(0, 1fr);
}

.shared-account-provider__claire-noir-logo {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.shared-account-provider.is-recommended {
  padding-top: 16px;
  border-color: rgb(var(--colorplane-accent-rgb) / 40%);
  background: rgb(var(--colorplane-accent-rgb) / 9%);
}

.shared-account-provider.is-recommended > i {
  position: absolute;
  top: 4px;
  right: 7px;
  color: var(--colorplane-accent-soft);
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .025em;
}

.shared-account-provider.is-email > span:first-child {
  background: rgb(var(--colorplane-accent-rgb) / 13%);
  color: var(--colorplane-accent-soft);
}

.shared-account-provider > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.shared-account-provider strong {
  font-size: 10px;
  line-height: 1.2;
}

.shared-account-provider small {
  color: #8996a5;
  font-size: 8.5px;
  line-height: 1.25;
}

.shared-account-connect,
.shared-account-profile {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 42%);
  border-radius: 12px;
  background: linear-gradient(120deg, rgb(var(--colorplane-accent-rgb) / 17%), rgb(var(--colorplane-accent-rgb) / 6%));
  color: #edf3fa;
}

.shared-account-connect {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shared-account-connect:hover,
.shared-account-connect:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 72%);
  background: rgb(var(--colorplane-accent-rgb) / 20%);
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 20%);
  outline-offset: 2px;
}

.shared-account-connect:disabled {
  cursor: wait;
  opacity: .68;
}

.shared-account-connect > span:first-child,
.shared-account-profile__avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  color: white;
  font-size: 10px;
  font-weight: 850;
}

.shared-account-connect > span:nth-child(2),
.shared-account-profile > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.shared-account-connect strong,
.shared-account-profile strong {
  font-size: 12px;
}

.shared-account-connect small,
.shared-account-profile small {
  color: #919dac;
  font-size: 9.5px;
}

.shared-account-connect > b {
  color: var(--colorplane-accent-soft);
  font-size: 21px;
}

.shared-account-profile__status {
  color: #7ee2a9;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shared-account-error {
  margin: 10px 0 0;
  color: #ffacb1;
  font-size: 10px;
  line-height: 1.45;
}

.shared-account-notice {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 9px;
  background: rgb(255 255 255 / 4%);
  color: #8b97a6;
  font-size: 9.5px;
  line-height: 1.45;
}

.shared-account-panel__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.shared-account-panel__actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 9px;
  background: rgb(255 255 255 / 5%);
  color: #aeb8c5;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.shared-account-panel__actions button:hover,
.shared-account-panel__actions button:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 40%);
  color: white;
  outline: none;
}

.shared-account-panel__actions .shared-account-without {
  border-color: rgb(var(--colorplane-accent-rgb) / 30%);
  background: rgb(var(--colorplane-accent-rgb) / 8%);
  color: var(--colorplane-accent-soft);
}

.shared-account-privacy {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgb(255 255 255 / 7%);
  color: #7e8998;
  font-size: 9.5px;
  line-height: 1.45;
}

body.light-theme .colorplane-account-btn {
  border-color: rgb(24 40 58 / 12%);
  background: rgb(24 40 58 / 5%);
  color: #4f5f70;
}

body.light-theme .colorplane-language-btn {
  border-color: rgb(24 40 58 / 12%);
  background: rgb(24 40 58 / 5%);
  color: #4f5f70;
}

.language-panel-overlay {
  position: fixed;
  z-index: 2147483642;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(6 9 14 / 72%);
  backdrop-filter: blur(15px);
}

.language-panel {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden auto;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 28%);
  border-radius: 19px;
  background: radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 17%), transparent 38%), linear-gradient(155deg, rgb(28 34 45 / 98%), rgb(12 17 26 / 99%));
  box-shadow: 0 28px 75px rgb(0 0 0 / 55%);
  color: #dce5f0;
}

.language-panel > header {
  display: grid;
  grid-template-columns: 34px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(8 12 19 / 48%);
}

.language-panel > header > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  color: white;
  font-weight: 850;
}

.language-panel > header > span:nth-child(2) { display: grid; gap: 2px; }
.language-panel > header small { color: #8793a4; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.language-panel > header strong { color: #edf3fa; font-size: 13px; }
.language-panel > header button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #8995a4; font-size: 22px; cursor: pointer; }
.language-panel > header button:hover,
.language-panel > header button:focus-visible { background: rgb(255 255 255 / 8%); color: white; outline: none; }

.language-panel__body { padding: 24px; }
.language-panel__body h2 { margin: 0; color: #f1f5fa; font-size: 25px; letter-spacing: -.035em; }
.language-panel__body > p:first-of-type { margin: 9px 0 18px; color: #9aa6b6; font-size: 12px; line-height: 1.55; }
.language-panel__search { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; min-height: 42px; margin-bottom: 7px; padding: 0 7px 0 11px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 11px; background: rgb(0 0 0 / 18%); color: #8190a2; }
.language-panel__search:focus-within { border-color: rgb(var(--colorplane-accent-rgb) / 58%); box-shadow: 0 0 0 3px rgb(var(--colorplane-accent-rgb) / 10%); }
.language-panel__search > span { font-size: 20px; line-height: 1; transform: translateY(-1px); }
.language-panel__search input { min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: #eef4fb; font: inherit; font-size: 12px; appearance: none; }
.language-panel__search input::-webkit-search-cancel-button { display: none; }
.language-panel__search input::placeholder { color: #758296; opacity: 1; }
.language-panel__search button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8996a7; font-size: 18px; cursor: pointer; }
.language-panel__search button:hover,
.language-panel__search button:focus-visible { outline: none; background: rgb(255 255 255 / 8%); color: white; }
.language-panel__result-count { margin: 0 2px 9px; color: #7e8998; font-size: 9px; line-height: 1.4; }
.language-panel__options { display: grid; gap: 8px; }
.language-panel__options button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 11px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 11px; background: rgb(255 255 255 / 5%); color: #e6edf5; font: inherit; text-align: left; cursor: pointer; }
.language-panel__options button:hover,
.language-panel__options button:focus-visible { border-color: rgb(var(--colorplane-accent-rgb) / 48%); outline: none; }
.language-panel__options button.is-selected { border-color: rgb(var(--colorplane-accent-rgb) / 58%); background: rgb(var(--colorplane-accent-rgb) / 12%); }
.language-panel__options button > span:first-child { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; color: var(--colorplane-accent-soft); }
.language-panel__options button > span:nth-child(2) { display: grid; gap: 3px; }
.language-panel__options strong { font-size: 11px; }
.language-panel__options small { color: #8996a5; font-size: 9px; line-height: 1.3; }
.language-panel__options i { color: var(--colorplane-accent-soft); font-size: 8px; font-style: normal; font-weight: 750; text-transform: uppercase; }
.language-panel__empty { display: grid; min-height: 100px; place-content: center; gap: 5px; padding: 20px; border: 1px dashed rgb(255 255 255 / 11%); border-radius: 11px; color: #9aa6b6; text-align: center; }
.language-panel__empty strong { color: #dfe7f1; font-size: 11px; }
.language-panel__empty span { font-size: 9.5px; line-height: 1.45; }
.language-panel aside { margin-top: 14px; padding: 11px 12px; border: 1px solid rgb(var(--colorplane-accent-rgb) / 22%); border-radius: 10px; background: rgb(var(--colorplane-accent-rgb) / 7%); }
.language-panel aside strong { color: var(--colorplane-accent-soft); font-size: 10px; }
.language-panel aside p { margin: 5px 0 0; color: #95a2b2; font-size: 9.5px; line-height: 1.45; }
.language-panel__fallback { margin: 14px 0 0; color: #7e8998; font-size: 9px; line-height: 1.4; }

body.light-theme .language-panel { background: radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 10%), transparent 38%), #f7f9fc; color: #243247; }
body.light-theme .language-panel > header { border-color: rgb(31 49 72 / 10%); background: rgb(255 255 255 / 62%); }
body.light-theme .language-panel :is(h2, header strong, .language-panel__options button) { color: #26364a; }
body.light-theme .language-panel__options button { border-color: rgb(31 49 72 / 11%); background: rgb(255 255 255 / 62%); }
body.light-theme .language-panel__search { border-color: rgb(31 49 72 / 14%); background: rgb(255 255 255 / 64%); }
body.light-theme .language-panel__search input { color: #26364a; }
body.light-theme .language-panel__empty { border-color: rgb(31 49 72 / 14%); color: #667489; }
body.light-theme .language-panel__empty strong { color: #26364a; }

.settings-version-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-version-actions #settings_version {
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}

.open-source-licenses-button {
  min-height: 30px;
  padding: 5px 10px;
  border-color: rgb(var(--colorplane-accent-rgb) / 34%);
  color: var(--colorplane-accent-soft);
  font-size: 10px;
  cursor: pointer;
}

.open-source-licenses-button:hover,
.open-source-licenses-button:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 70%);
  color: #fff;
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 24%);
  outline-offset: 2px;
}

.open-source-licenses-overlay {
  position: fixed;
  z-index: 2147483643;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(6 9 14 / 76%);
  backdrop-filter: blur(15px);
}

.open-source-licenses-dialog {
  display: grid;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 30%);
  border-radius: 19px;
  background: radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 17%), transparent 38%), linear-gradient(155deg, rgb(28 34 45 / 99%), rgb(12 17 26 / 99%));
  box-shadow: 0 28px 75px rgb(0 0 0 / 58%);
  color: #dce5f0;
}

.open-source-licenses-dialog > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: rgb(8 12 19 / 52%);
}

.open-source-licenses-dialog > header > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.open-source-licenses-dialog > header > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.open-source-licenses-dialog > header small {
  color: #a5b1c1;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.open-source-licenses-dialog > header strong {
  color: #f2f6fb;
  font-size: 13px;
}

.open-source-licenses-dialog > header button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a6b1c0;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.open-source-licenses-dialog > header button:hover,
.open-source-licenses-dialog > header button:focus-visible {
  background: rgb(255 255 255 / 9%);
  color: #fff;
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 30%);
  outline-offset: 1px;
}

.open-source-licenses-dialog__body {
  overflow: hidden auto;
  padding: 24px;
  overscroll-behavior: contain;
}

.open-source-licenses-dialog__body h2 {
  margin: 0;
  color: #f4f7fb;
  font-size: 25px;
  letter-spacing: -.035em;
}

.open-source-licenses-dialog__body > p {
  max-width: 68ch;
  margin: 9px 0 19px;
  color: #b2bdcb;
  font-size: 12px;
  line-height: 1.6;
}

.open-source-license-card {
  margin-top: 11px;
  padding: 15px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 13px;
  background: rgb(255 255 255 / 5%);
}

.open-source-license-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.open-source-license-card__heading > span {
  display: grid;
  gap: 2px;
}

.open-source-license-card__heading strong {
  color: #f0f4f9;
  font-size: 13px;
}

.open-source-license-card__heading small {
  color: #a5b0bf;
  font-size: 9px;
}

.open-source-license-card__heading b {
  padding: 4px 7px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 34%);
  border-radius: 999px;
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  color: var(--colorplane-accent-soft);
  font-size: 8.5px;
  letter-spacing: .04em;
}

.open-source-license-card p,
.open-source-licenses-notice p {
  margin: 7px 0 0;
  color: #b4bfcd;
  font-size: 10.5px;
  line-height: 1.55;
}

.open-source-license-card nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.open-source-license-card a {
  min-height: 30px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 32%);
  border-radius: 8px;
  background: rgb(var(--colorplane-accent-rgb) / 8%);
  color: #9fd1ff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
}

.open-source-license-card a:hover,
.open-source-license-card a:focus-visible {
  border-color: rgb(var(--colorplane-accent-rgb) / 70%);
  background: rgb(var(--colorplane-accent-rgb) / 16%);
  color: #d9edff;
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 24%);
  outline-offset: 2px;
}

.open-source-licenses-notice {
  margin-top: 13px;
  padding: 14px 15px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 24%);
  border-radius: 12px;
  background: rgb(var(--colorplane-accent-rgb) / 7%);
}

.open-source-licenses-notice > strong {
  color: #cae7ff;
  font-size: 11px;
}

body.light-theme .open-source-licenses-button {
  border-color: rgb(24 40 58 / 20%);
  color: #244e78;
}

body.light-theme .open-source-licenses-button:hover,
body.light-theme .open-source-licenses-button:focus-visible {
  border-color: #2b5f96;
  background: rgb(43 95 150 / 9%);
  color: #163b63;
}

body.light-theme .open-source-licenses-dialog {
  border-color: rgb(31 49 72 / 20%);
  background: radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 10%), transparent 38%), #f7f9fc;
  box-shadow: 0 28px 75px rgb(29 46 68 / 30%);
  color: #243247;
}

body.light-theme .open-source-licenses-dialog > header {
  border-color: rgb(31 49 72 / 11%);
  background: rgb(255 255 255 / 68%);
}

body.light-theme .open-source-licenses-dialog :is(h2, header strong, .open-source-license-card__heading strong) {
  color: #1f2e43;
}

body.light-theme .open-source-licenses-dialog :is(header small, header button, .open-source-license-card__heading small) {
  color: #56677c;
}

body.light-theme .open-source-licenses-dialog__body > p,
body.light-theme .open-source-license-card p,
body.light-theme .open-source-licenses-notice p {
  color: #4c5d72;
}

body.light-theme .open-source-license-card {
  border-color: rgb(31 49 72 / 14%);
  background: rgb(255 255 255 / 68%);
}

body.light-theme .open-source-license-card a {
  color: #174f83;
}

body.light-theme .open-source-licenses-notice > strong {
  color: #244e78;
}

@media (max-width: 680px) {
  .open-source-licenses-overlay {
    align-items: end;
    padding: 8px;
  }

  .open-source-licenses-dialog {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  .open-source-licenses-dialog__body {
    padding: 18px;
  }
}

body.light-theme .shared-account-panel {
  border-color: rgb(var(--colorplane-accent-rgb) / 24%);
  background: radial-gradient(circle at 12% 0%, rgb(var(--colorplane-accent-rgb) / 10%), transparent 38%), #f7f9fc;
  box-shadow: 0 28px 75px rgb(29 46 68 / 28%);
  color: #243247;
}

body.light-theme .shared-account-panel__header {
  border-color: rgb(31 49 72 / 10%);
  background: rgb(255 255 255 / 62%);
}

body.light-theme :is(.shared-account-panel__header strong, .shared-account-panel__body h2, .shared-account-products b, .shared-account-connect, .shared-account-profile) {
  color: #1f2e43;
}

body.light-theme :is(.shared-account-panel__body > p:first-of-type, .shared-account-connect small, .shared-account-profile small, .shared-account-privacy) {
  color: #667489;
}

body.light-theme .shared-account-products > span {
  border-color: rgb(31 49 72 / 10%);
  background: rgb(255 255 255 / 66%);
}

body.light-theme .shared-account-provider-heading strong,
body.light-theme .shared-account-provider,
body.light-theme .shared-account-without-primary {
  color: #26364a;
}

body.light-theme .shared-account-provider {
  border-color: rgb(31 49 72 / 11%);
  background: rgb(255 255 255 / 62%);
}

body.light-theme .shared-account-provider small {
  color: #708095;
}

body.light-theme .shared-account-without-primary small {
  color: #667489;
}

/* Introduction Modal */
.colorplane-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: colorplaneFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes colorplaneFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.colorplane-intro-modal {
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  max-width: 680px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

.colorplane-intro-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.colorplane-intro-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--colorplane-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.colorplane-intro-badge i {
  padding: 3px 7px;
  color: rgb(255 255 255 / 48%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .08em;
}

.colorplane-modal-close-btn {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}

.colorplane-modal-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.colorplane-intro-body {
  padding: 24px;
  overflow: auto;
}

.colorplane-intro-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #f0f6fc;
}

.colorplane-intro-subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #8b949e;
}

.colorplane-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.colorplane-step-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 16px;
  transition: transform 0.2s, border-color 0.2s;
}

.colorplane-step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.colorplane-step-card .step-number {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
}

.colorplane-step-card .step-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.colorplane-step-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #e6edf3;
}

.colorplane-step-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #8b949e;
}

.colorplane-mode-explain-box {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
}

.colorplane-mode-explain-box h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #60a5fa;
}

.colorplane-mode-explain-box p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #c9d1d9;
}

.colorplane-intro-footer {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.colorplane-btn-primary {
  background: var(--colorplane-accent-strong);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.colorplane-btn-primary:hover {
  filter: brightness(1.12);
}

.colorplane-btn-primary.highlight {
  box-shadow: 0 0 12px rgb(var(--colorplane-accent-rgb) / 60%);
}

.colorplane-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.colorplane-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.colorplane-btn-navy {
  border-color: #2f639b;
  background: linear-gradient(180deg, #1d4e83, #123761);
  box-shadow: inset 0 1px rgb(255 255 255 / 14%), 0 5px 14px rgb(3 18 38 / 26%);
  color: #fff;
  font-weight: 650;
}

.colorplane-btn-navy:hover {
  border-color: #477fb7;
  background: linear-gradient(180deg, #285f98, #174474);
  color: #fff;
}

.colorplane-btn-navy:focus-visible {
  outline: 2px solid #79b8f3;
  outline-offset: 2px;
}

.colorplane-mode-intro-modal {
  max-width: 900px;
}

.colorplane-palette-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.colorplane-palette-choice legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: #b7c0cb;
  font-size: 12px;
  font-weight: 650;
}

.colorplane-palette-choice button {
  position: relative;
  display: grid;
  min-height: 64px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #cbd5e1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 3%);
  cursor: pointer;
  text-align: left;
}

.colorplane-palette-choice button.is-selected {
  border-color: rgb(var(--colorplane-accent-rgb) / 58%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  box-shadow: inset 0 0 0 1px rgb(var(--colorplane-accent-rgb) / 12%);
}

.colorplane-palette-choice button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.colorplane-palette-choice button strong {
  color: #f3f6fa;
  font-size: 13px;
}

.colorplane-palette-choice button small {
  overflow: hidden;
  color: #8995a4;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colorplane-palette-choice button i {
  position: absolute;
  top: 6px;
  right: 7px;
  display: none;
  color: var(--colorplane-accent);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.colorplane-palette-choice button.is-selected i {
  display: block;
}

.colorplane-palette-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 11px;
  box-shadow: inset 0 1px rgb(255 255 255 / 22%), 0 4px 12px rgb(0 0 0 / 24%);
}

.colorplane-palette-swatch--claire {
  background:
    linear-gradient(135deg, transparent 0 47%, rgb(255 253 247 / 28%) 48% 51%, transparent 52%),
    linear-gradient(135deg, var(--colorplane-paper) 0 34%, var(--colorplane-accent) 35% 66%, var(--colorplane-ink) 67%);
}

.colorplane-palette-swatch--blue {
  background: linear-gradient(135deg, #93c5fd, #3b82f6 58%, #1d4ed8);
}

.colorplane-editor-familiarity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.colorplane-editor-familiarity button {
  display: grid;
  min-height: 68px;
  grid-template-columns: 38px 1fr 26px;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  color: #cbd5e1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 13px;
  background: rgb(255 255 255 / 3%);
  cursor: pointer;
  text-align: left;
}

.colorplane-editor-familiarity button:last-child {
  grid-column: 1 / -1;
}

.colorplane-editor-familiarity button.is-selected {
  border-color: rgb(var(--colorplane-accent-rgb) / 58%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
  box-shadow: inset 0 0 0 1px rgb(var(--colorplane-accent-rgb) / 12%);
}

.colorplane-editor-familiarity button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.colorplane-editor-familiarity__preview {
  display: grid;
  width: 34px;
  height: 34px;
  grid-template-columns: 9px 1fr;
  grid-template-rows: 8px 1fr;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 8px;
  background: rgb(7 10 15 / 48%);
}

.colorplane-editor-familiarity__preview i {
  display: block;
  border-radius: 2px;
  background: rgb(255 255 255 / 13%);
}

.colorplane-editor-familiarity__preview i:first-child {
  grid-column: 1 / -1;
}

.colorplane-editor-familiarity__preview i:nth-child(2) {
  background: rgb(var(--editor-preview-rgb, 111 169 234) / 36%);
}

.colorplane-editor-familiarity__preview--catalog {
  --editor-preview-rgb: 205 159 84;
  border-radius: 4px;
}

.colorplane-editor-familiarity__preview--layers {
  --editor-preview-rgb: 139 122 235;
  border-radius: 9px;
}

.colorplane-editor-familiarity__preview--grading {
  --editor-preview-rgb: 65 196 174;
  border-radius: 2px;
}

.colorplane-editor-familiarity__preview--guided {
  --editor-preview-rgb: 216 126 103;
  border-radius: 11px;
}

.colorplane-editor-familiarity button strong {
  color: #f3f6fa;
  font-size: 13px;
}

.colorplane-editor-familiarity button small {
  color: #8995a4;
  font-size: 10.5px;
}

.colorplane-editor-familiarity__check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #10141c;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  font-size: 12px;
  font-weight: 800;
}

.colorplane-editor-familiarity button.is-selected .colorplane-editor-familiarity__check {
  border-color: var(--colorplane-accent);
  background: var(--colorplane-accent);
}

.colorplane-familiar-workflow {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 26%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(var(--colorplane-accent-rgb) / 10%), rgb(255 255 255 / 2%));
}

.colorplane-familiar-workflow > span {
  color: var(--colorplane-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.colorplane-familiar-workflow strong {
  color: #f3f6fa;
  font-size: 13px;
}

.colorplane-familiar-workflow p {
  margin: 0;
  color: #9da8b7;
  font-size: 11px;
  line-height: 1.45;
}

.colorplane-familiar-workflow button {
  justify-self: start;
  margin-top: 3px;
  padding: 0;
  color: var(--colorplane-accent);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 10.5px;
}

.colorplane-familiar-workflow--compact {
  margin: 0 0 18px;
}

.colorplane-editor-familiarity__continue {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
}

.colorplane-editor-familiarity__continue:disabled {
  opacity: .45;
  cursor: default;
}

.colorplane-mode-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.colorplane-mode-choice-grid--entry {
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 18px;
  background: rgb(255 255 255 / 8%);
}

.colorplane-mode-choice {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 17px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 15px;
  background: rgb(255 255 255 / 3%);
}

.colorplane-mode-choice-grid--entry .colorplane-mode-choice {
  min-height: 350px;
  border: 0;
  border-radius: 0;
}

.colorplane-mode-choice--guided {
  border-color: rgb(var(--colorplane-accent-rgb) / 38%);
  background: linear-gradient(145deg, rgb(var(--colorplane-accent-rgb) / 11%), rgb(255 255 255 / 2%));
}

.colorplane-mode-choice--professional {
  background:
    radial-gradient(circle at 88% 8%, rgb(83 201 180 / 10%), transparent 38%),
    rgb(255 255 255 / 3%);
}

.colorplane-mode-choice__number {
  align-self: flex-end;
  color: rgb(255 255 255 / 16%);
  font-size: 34px;
  font-weight: 750;
  line-height: 1;
}

.colorplane-mode-choice__eyebrow {
  min-height: 16px;
  color: var(--colorplane-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.colorplane-mode-choice h3 {
  margin: 4px 0 7px;
  color: #f3f6fa;
  font-size: 16px;
}

.colorplane-mode-choice p,
.colorplane-mode-choice li {
  color: #9da8b7;
  font-size: 11.5px;
  line-height: 1.45;
}

.colorplane-mode-choice p {
  margin: 0;
}

.colorplane-mode-choice ul {
  display: grid;
  gap: 4px;
  margin: 12px 0 16px;
  padding-left: 18px;
}

.colorplane-mode-choice button {
  width: 100%;
  min-height: 42px;
  margin-top: auto;
}

.colorplane-mode-choice .colorplane-btn-professional {
  position: relative;
  display: grid;
  min-height: 48px;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 9px 11px;
  color: #f7fffd;
  border: 1px solid rgb(126 234 211 / 64%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 24%), transparent 34%),
    linear-gradient(135deg, #137e73, #176c78 58%, #254f72);
  box-shadow:
    0 9px 22px rgb(8 54 62 / 42%),
    inset 0 1px rgb(255 255 255 / 25%),
    inset 0 -1px rgb(0 0 0 / 24%);
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease, transform .16s ease;
}

.colorplane-mode-choice .colorplane-btn-professional:hover {
  border-color: rgb(190 255 241 / 88%);
  box-shadow:
    0 12px 28px rgb(8 54 62 / 50%),
    0 0 0 3px rgb(91 214 191 / 10%),
    inset 0 1px rgb(255 255 255 / 30%);
  filter: brightness(1.08) saturate(1.06);
  transform: translateY(-1px);
}

.colorplane-mode-choice .colorplane-btn-professional:focus-visible {
  outline: 2px solid rgb(174 255 237 / 88%);
  outline-offset: 3px;
}

.colorplane-btn-professional__mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 9px;
  background: rgb(255 255 255 / 12%);
  box-shadow: inset 0 1px rgb(255 255 255 / 16%);
  font-size: 14px;
}

.colorplane-btn-professional__arrow {
  color: rgb(224 255 249 / 82%);
  font-size: 17px;
  text-align: center;
  transition: transform .16s ease;
}

.colorplane-btn-professional:hover .colorplane-btn-professional__arrow {
  transform: translateX(2px);
}

.colorplane-mode-switch-note {
  margin: 14px 0 0;
  color: #8793a2;
  font-size: 11px;
  text-align: center;
}

.colorplane-onboarding-actions {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(220px, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.colorplane-onboarding-actions button {
  min-height: 44px;
}

.colorplane-onboarding-actions .colorplane-btn-primary:disabled {
  opacity: .42;
  cursor: default;
}

/* The familiar-editor choice changes workspace rhythm without impersonating
   another application or overriding the user's selected Colorplane theme. */
body[data-editor-workflow] {
  --editor-workflow-rgb: 98 168 255;
  --editor-workflow-radius: 7px;
  --editor-workflow-tab-height: 32px;
}

body[data-editor-workflow='catalog'] {
  --editor-workflow-rgb: 205 159 84;
  --editor-workflow-radius: 4px;
  --editor-workflow-tab-height: 30px;
}

body[data-editor-workflow='capture'] {
  --editor-workflow-rgb: 223 149 57;
  --editor-workflow-radius: 3px;
  --editor-workflow-tab-height: 29px;
}

body[data-editor-workflow='raw'] {
  --editor-workflow-rgb: 103 167 245;
  --editor-workflow-radius: 5px;
  --editor-workflow-tab-height: 31px;
}

body[data-editor-workflow='raw'] .floating-panel-accordion-section--fill:has(#scopes_iframe_histogram) {
  height: 190px;
  min-height: 190px;
  flex: 0 0 190px;
}

body[data-editor-workflow='raw'] #props_container [data-floating-panel-name='Navigator'] > .preset-group-header {
  display: none;
}

body[data-editor-workflow='layers'] {
  --editor-workflow-rgb: 139 122 235;
  --editor-workflow-radius: 11px;
  --editor-workflow-tab-height: 34px;
}

body[data-editor-workflow='grading'] {
  --editor-workflow-rgb: 65 196 174;
  --editor-workflow-radius: 2px;
  --editor-workflow-tab-height: 29px;
}

body[data-editor-workflow='guided'] {
  --editor-workflow-rgb: 216 126 103;
  --editor-workflow-radius: 13px;
  --editor-workflow-tab-height: 36px;
}

body[data-editor-workflow] :is(#props_container, #scopes, #floating_panels) .preset-group-container,
body[data-editor-workflow] .floating-panel-accordion-section {
  border-radius: var(--editor-workflow-radius);
}

body[data-editor-workflow] .floating-panel-tab {
  height: var(--editor-workflow-tab-height);
}

body:not([data-accent-palette='claire-noir'])[data-editor-workflow] .floating-panel-tab--active,
body:not([data-accent-palette='claire-noir'])[data-editor-workflow] .floating-panel-accordion-nav-item--active {
  color: #f6fbff;
  border-color: rgb(var(--editor-workflow-rgb) / 44%);
  background: rgb(var(--editor-workflow-rgb) / 17%);
  box-shadow: inset 0 -3px rgb(var(--editor-workflow-rgb));
}

body:not([data-accent-palette='claire-noir'])[data-editor-workflow] .floating-panel-tab--active > .preset-group-icon,
body:not([data-accent-palette='claire-noir'])[data-editor-workflow] .floating-panel-accordion-nav-item--active > .preset-group-icon {
  color: rgb(var(--editor-workflow-rgb));
}

body[data-editor-workflow='grading'] .floating-panel-tab > span {
  font-size: calc(0.7 * var(--menu-t));
  letter-spacing: .05em;
  text-transform: uppercase;
}

body[data-editor-workflow='layers'] :is(#props_container, #scopes, #floating_panels) .preset-group-container {
  box-shadow: 0 5px 14px rgb(0 0 0 / 13%), 0 1px 0 rgb(255 255 255 / 5%) inset;
}

body[data-editor-workflow='guided'] :is(#props_container, #scopes, #floating_panels) .preset-group-container {
  margin-bottom: 10px;
}

.colorplane-readiness-quiz {
  display: grid;
  gap: 12px;
}

.colorplane-readiness-quiz fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 12px;
  background: rgb(255 255 255 / 2%);
}

.colorplane-readiness-quiz fieldset.is-incorrect {
  border-color: rgb(251 146 60 / 44%);
  background: rgb(251 146 60 / 6%);
}

.colorplane-readiness-quiz fieldset.is-correct {
  border-color: rgb(74 222 128 / 24%);
}

.colorplane-readiness-quiz legend {
  padding: 0 5px;
  color: #e8edf4;
  font-size: 13px;
  font-weight: 650;
}

.colorplane-readiness-quiz legend span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--colorplane-accent-strong);
  font-size: 10px;
}

.colorplane-readiness-quiz label {
  position: relative;
  display: grid;
  min-height: 36px;
  box-sizing: border-box;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  color: #aeb8c5;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 11.5px;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.colorplane-readiness-quiz input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.colorplane-readiness-quiz label:hover {
  color: #dce4ee;
  border-color: rgb(var(--colorplane-accent-rgb) / 24%);
  background: rgb(var(--colorplane-accent-rgb) / 5%);
}

.colorplane-readiness-quiz label.is-selected {
  color: #f5f8fc;
  border-color: rgb(var(--colorplane-accent-rgb) / 72%);
  background: rgb(var(--colorplane-accent-rgb) / 15%);
  box-shadow:
    0 0 0 1px rgb(var(--colorplane-accent-rgb) / 12%) inset,
    0 4px 14px rgb(0 0 0 / 13%);
}

.colorplane-quiz-option__control {
  position: relative;
  display: inline-grid;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  place-items: center;
  border: 1.5px solid #697686;
  border-radius: 50%;
  background: rgb(0 0 0 / 12%);
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.colorplane-quiz-option__control::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
  content: '';
  opacity: 0;
  transform: scale(.4);
  transition: opacity 120ms ease, transform 120ms ease;
}

.colorplane-readiness-quiz label.is-selected .colorplane-quiz-option__control {
  border-color: var(--colorplane-accent);
  background: var(--colorplane-accent-strong);
  box-shadow: 0 0 0 3px rgb(var(--colorplane-accent-rgb) / 18%);
}

.colorplane-readiness-quiz label.is-selected .colorplane-quiz-option__control::after {
  opacity: 1;
  transform: scale(1);
}

.colorplane-readiness-quiz input:focus-visible + .colorplane-quiz-option__control {
  outline: 2px solid var(--colorplane-accent);
  outline-offset: 3px;
}

.colorplane-quiz-option__copy {
  min-width: 0;
  line-height: 1.35;
}

.colorplane-quiz-option__status {
  min-width: 48px;
  color: var(--colorplane-accent);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .07em;
  opacity: 0;
  text-align: right;
  text-transform: uppercase;
  transition: opacity 120ms ease;
}

.colorplane-readiness-quiz label.is-selected .colorplane-quiz-option__status {
  opacity: 1;
}

.colorplane-readiness-quiz label > span {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
}

.colorplane-readiness-quiz label > span::before {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  background: transparent;
  content: '';
}

.colorplane-readiness-quiz input:checked + span::before {
  border-color: var(--colorplane-accent-strong);
  background: radial-gradient(circle, var(--colorplane-accent-strong) 0 4px, transparent 4.5px);
}

.colorplane-readiness-quiz input:focus-visible + span::before {
  outline: 2px solid rgb(var(--colorplane-accent-rgb) / 72%);
  outline-offset: 2px;
}

.colorplane-quiz-explanation {
  margin: 5px 4px 0;
  padding-top: 8px;
  color: #f7c89d;
  border-top: 1px solid rgb(251 146 60 / 20%);
  font-size: 11px;
  line-height: 1.45;
}

.colorplane-quiz-result {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--colorplane-accent-rgb) / 30%);
  border-radius: 12px;
  background: rgb(var(--colorplane-accent-rgb) / 8%);
}

.colorplane-quiz-result.is-guided {
  border-color: rgb(251 146 60 / 34%);
  background: rgb(251 146 60 / 7%);
}

.colorplane-quiz-result strong {
  color: #f3f6fa;
  font-size: 13px;
}

.colorplane-quiz-result p {
  margin: 4px 0 0;
  color: #a8b2bf;
  font-size: 11.5px;
  line-height: 1.45;
}

body.light-theme :is(.colorplane-mode-choice, .colorplane-readiness-quiz fieldset, .colorplane-palette-choice button, .colorplane-editor-familiarity button) {
  background: rgb(24 40 58 / 3%);
  border-color: rgb(24 40 58 / 13%);
}

body.light-theme :is(.colorplane-mode-choice h3, .colorplane-palette-choice button strong, .colorplane-readiness-quiz legend, .colorplane-editor-familiarity button strong, .colorplane-familiar-workflow strong) {
  color: #172535;
}

body.light-theme :is(.colorplane-mode-choice p, .colorplane-mode-choice li, .colorplane-palette-choice button, .colorplane-readiness-quiz label, .colorplane-editor-familiarity button, .colorplane-familiar-workflow p) {
  color: #526273;
}

body.light-theme .colorplane-readiness-quiz label.is-selected {
  color: #172535;
  border-color: rgb(var(--colorplane-accent-rgb) / 58%);
  background: rgb(var(--colorplane-accent-rgb) / 10%);
}

body.light-theme .colorplane-quiz-option__control {
  background: rgb(24 40 58 / 5%);
}

@media (max-width: 680px) {
  .colorplane-mode-choice-grid,
  .colorplane-palette-choice,
  .colorplane-editor-familiarity {
    grid-template-columns: 1fr;
  }

  .colorplane-editor-familiarity button:last-child {
    grid-column: auto;
  }

  .colorplane-mode-choice-grid--entry .colorplane-mode-choice {
    min-height: 300px;
  }

  .colorplane-onboarding-actions {
    grid-template-columns: 1fr;
  }

  .colorplane-intro-body {
    padding: 18px;
  }

  .colorplane-intro-footer {
    flex-wrap: wrap;
    padding: 12px 18px;
  }

  .colorplane-intro-footer button {
    min-height: 44px;
    flex: 1 1 140px;
  }

}

/* Beginner mode removes expert-only surfaces without changing stored edits. */
body[data-interface-mode='beginner'] :is(
  .preset-group-container.advanced,
  .tool-advanced,
  .raw-advanced-toggle,
  .raw-advanced
) {
  display: none !important;
}

body.light-theme .colorplane-mode-toggle-container {
  background: rgb(240 244 248 / 92%);
  border-color: rgb(24 40 58 / 18%);
  box-shadow: 0 4px 16px rgb(24 40 58 / 20%);
}

body.light-theme .colorplane-mode-toggle-pill {
  background: rgb(24 40 58 / 10%);
}

body.light-theme .colorplane-mode-btn {
  color: #4d5c6b;
}

body.light-theme .colorplane-mode-drag-handle {
  color: #697888;
}

body.light-theme .colorplane-mode-drag-handle:hover,
body.light-theme .colorplane-mode-drag-handle:focus-visible {
  color: #24384d;
  background: rgb(24 40 58 / 8%);
}

body.light-theme .colorplane-intro-modal {
  background: #f7f9fb;
  border-color: rgb(24 40 58 / 20%);
  box-shadow: 0 24px 48px rgb(24 40 58 / 28%);
}

body.light-theme :is(
  .colorplane-intro-title,
  .colorplane-step-card h3
) {
  color: #172535;
}

body.light-theme :is(
  .colorplane-intro-subtitle,
  .colorplane-step-card p,
  .colorplane-mode-explain-box p
) {
  color: #526273;
}

body.light-theme .colorplane-step-card {
  background: rgb(24 40 58 / 4%);
  border-color: rgb(24 40 58 / 12%);
}

body.light-theme .colorplane-intro-footer {
  background: rgb(24 40 58 / 5%);
  border-color: rgb(24 40 58 / 12%);
}

body.light-theme .colorplane-btn-secondary {
  background: rgb(24 40 58 / 7%);
  border-color: rgb(24 40 58 / 16%);
  color: #35495d;
}

body.light-theme .colorplane-btn-navy {
  border-color: #2b5f96;
  background: linear-gradient(180deg, #1d4e83, #123761);
  color: #fff;
}

@media (max-width: 680px) {
  .colorplane-mode-toggle-container {
    top: auto;
    right: 6px;
    bottom: 90px;
    gap: 4px;
  }

  .colorplane-mode-toggle-container :is(.mode-label, .colorplane-intro-btn span, .colorplane-language-btn > span:last-child, .colorplane-account-btn > span:last-child) {
    display: none;
  }

  .colorplane-mode-btn,
  .colorplane-intro-btn,
  .colorplane-language-btn,
  .colorplane-account-btn {
    padding: 7px 9px;
  }

  .shared-account-overlay {
    align-items: end;
    padding: 8px;
  }

  .language-panel-overlay {
    align-items: end;
    padding: 8px;
  }

  .language-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  .language-panel__body {
    padding: 18px;
  }

  .shared-account-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  .shared-account-panel__body {
    padding: 18px;
  }

  .shared-account-products {
    grid-template-columns: 1fr;
  }

  .shared-account-products em {
    padding: 2px 0;
    transform: none;
  }

  .shared-account-provider-grid {
    grid-template-columns: 1fr;
  }

  .shared-account-panel__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .colorplane-modal-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .colorplane-intro-modal {
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  .colorplane-intro-header,
  .colorplane-intro-body,
  .colorplane-intro-footer {
    padding: 14px 16px;
  }

  .colorplane-quickstart-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .colorplane-intro-footer {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .colorplane-modal-overlay {
    animation: none;
  }
}

/* Compact Layers panel: scan-first rows and Photoshop-familiar controls. */
:is(#props_container, #floating_panels) .adjustment-layers {
  --layer-accent: 72 153 224;
  display: grid;
  min-width: 0;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(#props_container, #floating_panels) .adjustment-layers-toolbar {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  padding: 3px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 48%, transparent);
  background: color-mix(in srgb, var(--main-bg-color-props) 96%, var(--main-bg-color-deep));
}

:is(#props_container, #floating_panels) .adjustment-layers-toolbar--blend {
  grid-template-columns: minmax(54px, 0.55fr) minmax(122px, 1.15fr) minmax(96px, 0.8fr);
}

:is(#props_container, #floating_panels) .adjustment-layers-active-name {
  min-width: 0;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: calc(0.42 * var(--menu-t));
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-opacity {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(54px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

:is(#props_container, #floating_panels) .adjustment-layer-opacity input {
  width: 100%;
  min-width: 0;
  margin: 0;
  pointer-events: auto;
}

:is(#props_container, #floating_panels) .adjustment-layer-opacity output {
  color: var(--button-text-color);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  text-align: right;
}

:is(#props_container, #floating_panels) .adjustment-layer-blend-mode {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--button-text-inactive-color);
  font-size: calc(0.39 * var(--menu-t));
}

:is(#props_container, #floating_panels) .adjustment-layer-blend-mode select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 2px 5px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 3px;
  background: var(--button-bg-color);
  font: inherit;
}

:is(#props_container, #floating_panels) .adjustment-layers-stack {
  display: flex;
  max-height: min(440px, calc(100vh - 190px));
  min-height: 0;
  flex-direction: column-reverse;
  gap: 5px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: color-mix(in srgb, var(--main-bg-color-deep) 22%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer {
  position: relative;
  box-sizing: border-box;
  display: grid;
  flex: none;
  gap: 0;
  padding: 0;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 48%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--main-bg-color-props) 95%, var(--main-bg-color-deep));
  box-shadow: none;
  transition: background-color 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
}

:is(#props_container, #floating_panels) .adjustment-layer:hover:not(.adjustment-layer--selected) {
  border-color: color-mix(in srgb, rgb(var(--layer-accent)) 30%, var(--button-border-color));
  background: color-mix(in srgb, var(--main-bg-color-props) 92%, rgb(var(--layer-accent) / 8%));
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}

:is(#props_container, #floating_panels) .adjustment-layer--selected {
  border-color: rgb(var(--layer-tint, var(--layer-accent)) / 58%);
  background: color-mix(in srgb, var(--main-bg-color-props) 82%, rgb(var(--layer-tint, var(--layer-accent)) / 18%));
  box-shadow:
    0 0 0 1px rgb(var(--layer-tint, var(--layer-accent)) / 38%),
    0 0 10px rgb(var(--layer-tint, var(--layer-accent)) / 42%),
    0 0 22px rgb(var(--layer-tint, var(--layer-accent)) / 22%);
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden {
  opacity: 1;
  background: color-mix(in srgb, var(--main-bg-color-deep) 28%, var(--main-bg-color-props));
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden:hover,
:is(#props_container, #floating_panels) .adjustment-layer--hidden:focus-within {
  opacity: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden :is(
  .adjustment-layer-thumbnail,
  .adjustment-layer-mask-thumbnail
) {
  filter: saturate(0.35);
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden .adjustment-layer-visibility {
  color: var(--button-text-inactive-color);
}

:is(#props_container, #floating_panels) .adjustment-layer--dragging {
  opacity: 0.32;
  transform: none;
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-before::before,
:is(#props_container, #floating_panels) .adjustment-layer--drop-after::after {
  right: 4px;
  left: 4px;
  height: 2px;
  border-radius: 1px;
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-before::before {
  top: -1px;
}

:is(#props_container, #floating_panels) .adjustment-layer--drop-after::after {
  bottom: -1px;
}

:is(#props_container, #floating_panels) .adjustment-layer-main {
  display: grid;
  min-width: 0;
  min-height: 43px;
  grid-template-columns: 26px 15px 30px 23px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 4px 4px;
}

:is(#props_container, #floating_panels) .adjustment-layer-main--with-edit {
  grid-template-columns: 26px 15px 30px 23px minmax(0, 1fr) 27px 27px;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility {
  box-sizing: border-box;
  display: grid;
  width: 27px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 3px;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-eye-icon {
  display: block;
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility:hover {
  color: var(--button-text-hover-color);
  border-color: transparent;
  background: rgb(255 255 255 / 7%);
}

:is(#props_container, #floating_panels) .adjustment-layer-disclosure {
  display: grid;
  width: 16px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(0.64 * var(--menu-t));
  line-height: 1;
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform 100ms ease;
}

:is(#props_container, #floating_panels) .adjustment-layer-disclosure.is-expanded {
  transform: rotate(90deg);
}

:is(#props_container, #floating_panels) .adjustment-layer-disclosure--placeholder {
  cursor: default;
  transform: none;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail {
  position: relative;
  box-sizing: border-box;
  display: grid;
  width: 29px;
  height: 30px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: rgb(var(--layer-accent));
  border: 1px solid color-mix(in srgb, var(--button-border-color) 84%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--main-bg-color-deep) 72%, var(--main-bg-color-props));
  font: inherit;
  font-size: calc(0.54 * var(--menu-t));
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--adjustment {
  color: transparent;
  background:
    linear-gradient(135deg, rgb(131 104 180 / 68%), rgb(78 116 158 / 58%)),
    color-mix(in srgb, var(--main-bg-color-deep) 72%, var(--main-bg-color-props));
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--adjustment::before {
  width: 16px;
  height: 16px;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 50%;
  background: linear-gradient(90deg, rgb(255 255 255 / 85%) 50%, rgb(9 12 17 / 72%) 50%);
  content: "";
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--raw-processing {
  color: var(--button-text-color);
  border-color: color-mix(in srgb, rgb(var(--layer-accent)) 64%, var(--button-border-color));
  background:
    linear-gradient(145deg, rgb(var(--layer-accent) / 28%), rgb(var(--layer-accent) / 8%)),
    color-mix(in srgb, var(--main-bg-color-deep) 72%, var(--main-bg-color-props));
  font-weight: 700;
}

:is(#props_container, #floating_panels) .adjustment-layers-empty {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 4px;
  padding: 16px 20px;
  color: var(--button-text-color);
  text-align: center;
}

:is(#props_container, #floating_panels) .adjustment-layers-empty span {
  color: var(--button-text-inactive-color);
  font-size: calc(0.66 * var(--menu-t));
  line-height: 1.35;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--liquify {
  color: rgb(190 153 244);
  background: rgb(116 76 166 / 24%);
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--skin-smoothing {
  color: rgb(241 171 181);
  background: rgb(161 82 96 / 24%);
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--face-retouch {
  color: rgb(126 210 184);
  background: rgb(46 120 98 / 24%);
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--hair-cleanup {
  color: rgb(255 195 117);
  background: rgb(164 103 35 / 28%);
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail {
  position: relative;
  box-sizing: border-box;
  display: grid;
  width: 21px;
  height: 26px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: rgb(58 66 74);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 88%, transparent);
  border-radius: 4px;
  background: rgb(230 232 235);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail > .preset-group-icon {
  width: 14px;
  height: 14px;
  color: currentcolor;
}

:is(#props_container, #floating_panels) button.adjustment-layer-mask-thumbnail:hover:not(.adjustment-layer-mask-thumbnail--edited) {
  color: rgb(24 30 36);
  background: rgb(244 246 248);
}

:is(#props_container, #floating_panels) button.adjustment-layer-mask-thumbnail[draggable="true"] {
  cursor: grab;
}

:is(#props_container, #floating_panels) button.adjustment-layer-mask-thumbnail[draggable="true"]:active {
  cursor: grabbing;
}

:is(#props_container, #floating_panels) button.adjustment-layer-mask-thumbnail:focus-visible {
  outline: 2px solid rgb(var(--layer-accent));
  outline-offset: 2px;
}

:is(#props_container, #floating_panels) .adjustment-layer--mask-dragging .adjustment-layer-mask-thumbnail {
  filter: brightness(0.72);
}

:is(#props_container, #floating_panels) .adjustment-layer--mask-drop-target {
  background: rgb(var(--layer-accent) / 22%);
  box-shadow:
    inset 0 0 0 2px rgb(var(--layer-accent)),
    inset 2px 0 rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail--edited {
  background: rgb(12 14 17);
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail__preview {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail--empty {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-dot {
  right: -2px;
  bottom: -2px;
  width: 7px;
  height: 7px;
  border-color: color-mix(in srgb, var(--main-bg-color-props) 82%, var(--main-bg-color-deep));
  background: rgb(var(--layer-accent));
  box-shadow: none;
}

:is(#props_container, #floating_panels) .adjustment-layer-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding-left: 2px;
}

:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-remove {
  display: grid;
  width: 27px;
  height: 30px;
  min-height: 0;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
}

:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-remove:hover:not(:disabled) {
  color: rgb(235 104 104);
  border-color: rgb(235 104 104 / 26%);
  background: rgb(235 104 104 / 10%);
  opacity: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-remove:disabled {
  cursor: not-allowed;
  opacity: 0.18;
}

:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-remove svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-row .adjustment-layer-name,
:is(#props_container, #floating_panels) .adjustment-layer-name-row .adjustment-layer-name-input {
  min-width: 0;
  flex: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer-name {
  display: flex;
  min-width: 0;
  min-height: 19px;
  align-items: center;
  gap: 5px;
  padding: 0;
  overflow: hidden;
  color: var(--button-text-color);
  border: 0;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 660;
  line-height: 1.15;
  text-align: left;
  cursor: grab;
}

:is(#props_container, #floating_panels) .adjustment-layer-name > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-grip {
  flex: none;
  margin-left: auto;
  color: var(--button-text-inactive-color);
  font-size: calc(0.45 * var(--menu-t));
  opacity: 0;
  transition: opacity 100ms ease;
}

:is(#props_container, #floating_panels) .adjustment-layer:hover .adjustment-layer-grip,
:is(#props_container, #floating_panels) .adjustment-layer:focus-within .adjustment-layer-grip {
  color: var(--button-text-inactive-color);
  opacity: 0.72;
}

:is(#props_container, #floating_panels) .adjustment-layer-name-input {
  box-sizing: border-box;
  width: 100%;
  height: 23px;
  padding: 1px 5px;
  pointer-events: auto;
}

:is(#props_container, #floating_panels) .adjustment-layer-meta {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
}

:is(#props_container, #floating_panels) .adjustment-layer-meta > span {
  display: inline;
  min-width: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 9.5px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-colorspace {
  flex: none;
  color: rgb(177 154 228);
}

:is(#props_container, #floating_panels) .adjustment-layer-chip {
  color: var(--button-text-inactive-color);
}

:is(#props_container, #floating_panels) .adjustment-layer-actions,
:is(#props_container, #floating_panels) .adjustment-layer-add-grid {
  display: none;
}

:is(#props_container, #floating_panels) .adjustment-layer-effects {
  position: relative;
  display: grid;
  gap: 0;
  margin-left: 39px;
  padding: 2px 0 3px 32px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 34%, transparent);
  background: color-mix(in srgb, var(--main-bg-color-deep) 17%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-effects::before {
  top: 0;
  bottom: 13px;
  left: 22px;
  background: color-mix(in srgb, var(--button-border-color) 42%, transparent);
}

.paint-layer-properties {
  --layer-accent: 96 188 218;
  position: fixed;
  z-index: 2147483632;
  box-sizing: border-box;
  display: flex;
  width: min(400px, calc(100vw - 16px));
  max-height: min(680px, calc(100vh - 16px));
  flex-direction: column;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, rgb(var(--layer-accent)) 36%, var(--button-border-color));
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgb(var(--layer-accent) / 8%), transparent 44%),
    color-mix(in srgb, var(--main-bg-color-props) 96%, var(--main-bg-color-deep));
  box-shadow: 0 20px 56px rgb(0 0 0 / 48%), 0 3px 10px rgb(0 0 0 / 30%);
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.3;
  backdrop-filter: blur(18px);
}

#props_container .preset-group-container--layer-settings-bubble.preset-group-container--detached:not(.preset-group-container--docked) {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, rgb(var(--layer-accent, 96 188 218)) 36%, var(--button-border-color));
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgb(var(--layer-accent, 96 188 218) / 8%), transparent 44%),
    color-mix(in srgb, var(--main-bg-color-props) 96%, var(--main-bg-color-deep));
  box-shadow: 0 20px 56px rgb(0 0 0 / 48%), 0 3px 10px rgb(0 0 0 / 30%);
  backdrop-filter: blur(18px);
}

#props_container .preset-group-container--layer-settings-bubble.preset-group-container--detached:not(.preset-group-container--docked) > .preset-group-header {
  border-radius: 11px 11px 0 0;
}

body.light-theme :is(.paint-layer-properties, .navigator-paint-popover) {
  --button-text-inactive-color: #5f656c;
}

body.light-theme .navigator-paint-popover {
  color: #1f252b;
  background: #fff;
  --button-text-color: #1f252b;
}

body.dark-theme .navigator-paint-popover {
  color: #f0f3f5;
  background: #24282d;
  --button-text-color: #f0f3f5;
  --button-text-inactive-color: #c7ced5;
}

.paint-layer-properties__heading {
  display: grid;
  min-height: 50px;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 64%, transparent);
}

.paint-layer-properties__thumbnail {
  display: grid;
  box-sizing: border-box;
  width: 28px;
  height: 32px;
  place-items: center;
  color: rgb(var(--layer-accent));
  border: 1px solid rgb(var(--layer-accent) / 48%);
  border-radius: 5px;
  background: rgb(var(--layer-accent) / 12%);
  font-size: 16px;
}

.paint-layer-properties__heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.paint-layer-properties__heading strong,
.paint-layer-properties__heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paint-layer-properties__heading strong {
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 680;
}

.paint-layer-properties__heading > div > span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.paint-layer-properties__heading > button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}

.paint-layer-properties__heading > button:hover {
  color: var(--button-text-hover-color);
  background: rgb(255 255 255 / 7%);
}

.paint-layer-properties__body {
  min-height: 0;
  padding: 11px 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.paint-layer-properties__compositing {
  display: grid;
  gap: 8px;
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 52%, transparent);
}

.paint-layer-properties__compositing label {
  display: grid;
  min-height: 30px;
  grid-template-columns: 62px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.paint-layer-properties__compositing input[type='range'] {
  width: 100%;
  min-width: 80px;
  margin: 0;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.paint-layer-properties__compositing output {
  color: var(--button-text-color);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.paint-layer-properties__compositing select {
  grid-column: 2 / -1;
  box-sizing: border-box;
  width: 100%;
  min-height: 29px;
  padding: 3px 7px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  background: var(--button-bg-color);
  font: inherit;
}

:is(#props_container, .paint-layer-properties) .paint-layer-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 50px 11px 38px;
  white-space: normal;
}

.paint-layer-properties .paint-layer-controls {
  padding: 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-controls button {
  box-sizing: border-box;
  min-height: 32px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  background: var(--button-bg-color);
  font: inherit;
  cursor: pointer;
}

:is(#props_container, .paint-layer-properties) .paint-layer-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-engine,
:is(#props_container, .paint-layer-properties) .paint-layer-erase-target {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-engine legend,
:is(#props_container, .paint-layer-properties) .paint-layer-erase-target legend {
  margin-bottom: 6px;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  font-weight: 700;
}

:is(#props_container, .paint-layer-properties) .paint-layer-engine > div,
:is(#props_container, .paint-layer-properties) .paint-layer-erase-target > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-engine p,
:is(#props_container, .paint-layer-properties) .paint-layer-erase-target p {
  margin: 6px 0 0;
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
  line-height: 1.45;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-engine__option {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 38px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: var(--button-bg-color);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-engine__option.is-active {
  border-color: rgb(var(--layer-accent, 68 142 228) / 72%);
  background: rgb(var(--layer-accent, 68 142 228) / 16%);
  box-shadow: inset 0 0 0 1px rgb(var(--layer-accent, 68 142 228) / 16%);
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-engine__option .topcoat-radio-button__checkmark {
  flex: none;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-engine__option input[type='radio'] {
  width: 17px;
  height: 17px;
  margin: 0 -17px 0 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-mode button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:is(#props_container, .paint-layer-properties) .paint-tool-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
}

:is(#props_container, .paint-layer-properties) .paint-layer-mode button.is-active,
:is(#props_container, .paint-layer-properties) .paint-layer-brushes button.is-active {
  color: var(--button-text-color);
  border-color: rgb(var(--layer-accent) / 72%);
  background: rgb(var(--layer-accent) / 16%);
  box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 16%);
}

:is(#props_container, .paint-layer-properties) .paint-layer-brushes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-brushes legend,
:is(#props_container, .paint-layer-properties) .paint-layer-color-row label > span,
:is(#props_container, .paint-layer-properties) .paint-layer-size__heading > label:first-child {
  margin-bottom: 5px;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  font-weight: 700;
}

:is(#props_container, .paint-layer-properties) .paint-layer-brushes > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-brushes button {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  text-align: left;
}

:is(#props_container, .paint-layer-properties) .paint-layer-brushes button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, .paint-layer-properties) .paint-brush-sample {
  position: relative;
  display: block;
  width: 31px;
  height: 12px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-sample::before {
  position: absolute;
  top: 50%;
  right: 1px;
  left: 1px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  content: '';
  transform: translateY(-50%) rotate(-5deg);
}

:is(#props_container, .paint-layer-properties) .paint-brush-sample--charcoal::before {
  height: 7px;
  opacity: 0.78;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px);
  filter: blur(0.25px);
}

:is(#props_container, .paint-layer-properties) .paint-brush-sample--calligraphy::before {
  height: 3px;
  border-radius: 1px;
  transform: translateY(-50%) rotate(-13deg) skewX(-25deg);
}

:is(#props_container, .paint-layer-properties) .paint-brush-sample--marker::before {
  height: 8px;
  border-radius: 2px;
  opacity: 0.74;
  transform: translateY(-50%) rotate(-3deg);
}

:is(#props_container, .paint-layer-properties) .paint-layer-color-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options {
  display: grid;
  gap: 7px;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options > label {
  display: grid;
  min-height: 38px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--button-text-color);
  cursor: pointer;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options input {
  position: static;
  width: 16px;
  height: 16px;
  margin: 0;
  overflow: visible;
  opacity: 1;
  accent-color: rgb(var(--layer-accent));
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options label span {
  display: grid;
  gap: 2px;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options small {
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
  line-height: 1.35;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options p {
  display: grid;
  min-height: 34px;
  margin: 0;
  padding: 7px 9px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--button-bg-color) 90%, black);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  line-height: 1.35;
}

:is(#props_container, .paint-layer-properties, .navigator-paint-popover) .paint-layer-repair-options p.is-ready {
  border-color: rgb(var(--layer-accent) / 68%);
  background: rgb(var(--layer-accent) / 14%);
}

:is(#props_container, .paint-layer-properties) .paint-layer-color-row label {
  display: grid;
  min-width: 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-color-row input[type='color'] {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  background: var(--button-bg-color);
  cursor: pointer;
}

:is(#props_container, .paint-layer-properties) .paint-layer-color-row output {
  min-width: 64px;
  padding-bottom: 7px;
  color: var(--button-text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  text-align: right;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size {
  display: grid;
  min-width: 0;
  gap: 5px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size__heading {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size__heading > label:first-child {
  margin: 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size__number {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
}

:is(#props_container, .paint-layer-properties) .paint-layer-size__number input {
  box-sizing: border-box;
  width: 64px;
  height: 30px;
  padding: 2px 6px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  background: var(--button-bg-color);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size > input[type='range'] {
  width: 100%;
  height: 32px;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

:is(#props_container, .paint-layer-properties) .paint-layer-controls input {
  pointer-events: auto;
}

:is(#props_container, .paint-layer-properties) .paint-layer-size__scale {
  display: flex;
  justify-content: space-between;
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings {
  display: grid;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 52%, transparent);
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > header strong {
  font-size: max(14px, calc(0.92 * var(--menu-t)));
  font-weight: 680;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > header span,
:is(#props_container, .paint-layer-properties) .paint-brush-settings > p {
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
  line-height: 1.4;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > header button {
  min-height: 29px;
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings__group {
  display: grid;
  gap: 3px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings__group h4,
:is(#props_container, .paint-layer-properties) .paint-brush-dynamics legend {
  margin: 0 0 3px;
  padding: 0;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

:is(#props_container, .paint-layer-properties) .paint-brush-setting {
  display: grid;
  min-height: 36px;
  grid-template-columns: minmax(7.6em, 0.42fr) minmax(70px, 1fr) 72px;
  align-items: center;
  gap: 7px;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
}

:is(#props_container, .paint-layer-properties) .paint-brush-setting > input[type='range'] {
  width: 100%;
  min-width: 0;
  margin: 0;
  pointer-events: auto;
  touch-action: none;
}

:is(#props_container, .paint-layer-properties) .paint-brush-setting__number {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-setting__number input {
  box-sizing: border-box;
  width: 52px;
  height: 30px;
  padding: 2px 5px;
  color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  background: var(--button-bg-color);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:is(#props_container, .paint-layer-properties) .paint-brush-dynamics {
  position: relative;
  display: grid;
  margin: 0;
  padding: 9px;
  gap: 7px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 62%, transparent);
  border-radius: 6px;
}

:is(#props_container, .paint-layer-properties) .paint-brush-dynamics label {
  position: relative;
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  color: var(--button-text-color);
  font-size: max(13px, calc(0.85 * var(--menu-t)));
  line-height: 1.25;
  cursor: pointer;
}

:is(#props_container, .paint-layer-properties) .paint-brush-dynamics input[type='checkbox'] {
  position: static;
  z-index: auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  overflow: visible;
  opacity: 1;
  accent-color: rgb(var(--layer-accent));
  appearance: auto;
  cursor: pointer;
}

:is(#props_container, .paint-layer-properties) .paint-brush-settings > p {
  margin: -2px 0 0;
}

:is(#props_container, .paint-layer-properties) .paint-layer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

:is(#props_container, .paint-layer-properties) .paint-layer-controls button:disabled {
  color: var(--button-text-inactive-color);
  cursor: not-allowed;
}

:is(#props_container, .paint-layer-properties) .paint-layer-shortcuts {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--button-text-color);
  font-size: max(12px, calc(0.78 * var(--menu-t)));
  line-height: 1.45;
  white-space: normal;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect {
  display: grid;
  min-width: 0;
  min-height: 31px;
  grid-template-columns: 24px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 24%, transparent);
  border-radius: 3px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect:hover {
  background: rgb(255 255 255 / 3%);
}

:is(#props_container, #floating_panels) :is(.adjustment-layer-effect--mask, .adjustment-layer-effect--skin).is-active {
  background: rgb(var(--layer-accent) / 9%);
  box-shadow: inset 2px 0 rgb(var(--layer-accent) / 82%);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect--skin {
  --layer-accent: 255 154 167;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility {
  box-sizing: border-box;
  display: grid;
  width: 24px;
  height: 26px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border-radius: 2px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility:hover:not(:disabled),
:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility[aria-pressed='true'] {
  color: rgb(var(--layer-accent));
  background: rgb(var(--layer-accent) / 11%);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy strong {
  font-size: 10px;
  font-weight: 590;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy small {
  font-size: 9px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy--button {
  width: 100%;
  padding: 2px 0;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-trash,
:is(#props_container, #floating_panels) .adjustment-layer-edit {
  box-sizing: border-box;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-trash svg,
:is(#props_container, #floating_panels) .adjustment-layer-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

:is(#props_container, #floating_panels) .adjustment-layer-trash:hover:not(:disabled) {
  color: rgb(255 151 147);
  background: rgb(255 115 110 / 10%);
}

:is(#props_container, #floating_panels) .adjustment-layer-edit:hover:not(:disabled) {
  color: var(--button-text-hover-color);
  background: rgb(255 255 255 / 7%);
}

:is(#props_container, #floating_panels) .adjustment-layer-trash:disabled {
  cursor: not-allowed;
  opacity: 0.28;
}

:is(#props_container, #floating_panels) .spatial-mask-controls {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 8px 8px 10px 0;
  padding: 12px;
  overflow: hidden;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, rgb(var(--layer-accent)) 34%, var(--button-border-color));
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgb(var(--layer-accent) / 16%), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(0 0 0 / 10%)),
    color-mix(in srgb, var(--main-bg-color-props) 92%, var(--main-bg-color-deep));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 10px 28px rgb(0 0 0 / 18%);
}

:is(#props_container, #floating_panels) .spatial-mask-controls__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

:is(#props_container, #floating_panels) .spatial-mask-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

:is(#props_container, #floating_panels) .spatial-mask-kicker {
  display: inline-grid;
  min-height: 24px;
  place-items: center;
  padding: 0 7px;
  color: rgb(var(--layer-accent));
  border: 1px solid rgb(var(--layer-accent) / 32%);
  border-radius: 6px;
  background: rgb(var(--layer-accent) / 10%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

:is(#props_container, #floating_panels) .spatial-mask-controls__heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

:is(#props_container, #floating_panels) .spatial-mask-controls__heading strong {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

:is(#props_container, #floating_panels) .spatial-mask-controls__heading > div > span {
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.25;
}

:is(#props_container, #floating_panels) .spatial-mask-help {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 76%, transparent);
  border-radius: 50%;
  background: rgb(255 255 255 / 4%);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-header-done {
  min-height: 28px;
  padding: 0 9px;
  color: rgb(255 255 255 / 96%);
  border: 1px solid rgb(var(--layer-accent) / 72%);
  border-radius: 7px;
  background: rgb(var(--layer-accent) / 70%);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-intro {
  margin: 0;
  color: color-mix(in srgb, var(--button-text-color) 78%, var(--button-text-inactive-color));
  font-size: 12px;
  line-height: 1.45;
}

:is(#props_container, #floating_panels) .spatial-mask-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 48%, transparent);
}

:is(#props_container, #floating_panels) .spatial-mask-section-heading strong {
  flex: none;
  font-size: 12px;
  font-weight: 700;
}

:is(#props_container, #floating_panels) .spatial-mask-section-heading span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
}

:is(#props_container, #floating_panels) :is(
  .adjustment-layer-visibility,
  .adjustment-layer-disclosure,
  .adjustment-layer-thumbnail,
  .adjustment-layer-name,
  .adjustment-layer-effect-visibility,
  .adjustment-layer-effect-copy--button,
  .adjustment-layer-trash,
  .adjustment-layer-edit,
  .adjustment-layer-footer-action
):focus-visible {
  outline: 2px solid rgb(var(--layer-accent));
  outline-offset: 1px;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid > button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  border-radius: 9px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid > button:hover {
  border-color: rgb(var(--layer-accent) / 48%);
  background: rgb(var(--layer-accent) / 8%);
  transform: translateY(-1px);
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid > button.is-active {
  border-color: rgb(var(--layer-accent) / 78%);
  background: linear-gradient(145deg, rgb(var(--layer-accent) / 18%), rgb(var(--layer-accent) / 7%));
  box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 18%), 0 5px 14px rgb(var(--layer-accent) / 10%);
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid strong {
  font-size: 12px;
  font-weight: 680;
  line-height: 1.1;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid small {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-grid em {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 4px;
  color: rgb(var(--layer-accent));
  border-radius: 4px;
  background: rgb(var(--layer-accent) / 13%);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

:is(#props_container, #floating_panels) .spatial-mask-tool-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgb(var(--layer-accent));
  border: 1px solid rgb(var(--layer-accent) / 28%);
  border-radius: 7px;
  background: rgb(var(--layer-accent) / 10%);
  font-size: 15px;
  line-height: 1;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, rgb(var(--layer-accent)) 38%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgb(var(--layer-accent) / 14%), rgb(var(--layer-accent) / 5%)),
    rgb(0 0 0 / 8%);
  line-height: 1.35;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status--error {
  border-color: rgb(230 116 125 / 44%);
  background: rgb(230 116 125 / 9%);
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status--ready {
  border-color: rgb(90 205 166 / 42%);
  background: rgb(90 205 166 / 9%);
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: rgb(var(--layer-accent));
  border-radius: 9px;
  background: rgb(var(--layer-accent) / 14%);
  font-size: 17px;
  font-weight: 800;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status--loading-model .spatial-mask-segment-status__icon,
:is(#props_container, #floating_panels) .spatial-mask-segment-status--encoding-image .spatial-mask-segment-status__icon,
:is(#props_container, #floating_panels) .spatial-mask-segment-status--segmenting .spatial-mask-segment-status__icon {
  animation: spatial-mask-pulse 900ms ease-in-out infinite alternate;
}

@keyframes spatial-mask-pulse {
  to { opacity: 0.45; transform: scale(0.88); }
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status__copy strong {
  font-size: 12px;
  font-weight: 720;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status__copy small {
  color: var(--button-text-inactive-color);
  font-size: 10.5px;
  line-height: 1.35;
}

:is(#props_container, #floating_panels) .spatial-mask-privacy {
  width: fit-content;
  margin-top: 3px;
  color: rgb(90 205 166);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-status > button {
  grid-column: 1 / -1;
  min-height: 34px;
  color: rgb(var(--layer-accent));
  border: 1px solid rgb(var(--layer-accent) / 42%);
  border-radius: 7px;
  background: rgb(var(--layer-accent) / 12%);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-segment-progress {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
}

:is(#props_container, #floating_panels) .spatial-mask-segment-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--layer-accent));
  box-shadow: 0 0 10px rgb(var(--layer-accent) / 70%);
  transition: width 180ms ease;
}

:is(#props_container, #floating_panels) .spatial-mask-combine-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 68%, transparent);
  border-radius: 8px;
  background: rgb(0 0 0 / 10%);
}

:is(#props_container, #floating_panels) .spatial-mask-combine-row button {
  min-width: 0;
  min-height: 31px;
  padding: 0 4px;
  color: var(--button-text-inactive-color);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-combine-row button.is-active {
  color: var(--button-text-color);
  background: rgb(var(--layer-accent) / 18%);
  box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 28%);
}

:is(#props_container, #floating_panels) .spatial-mask-slider {
  display: grid;
  min-height: 30px;
  grid-template-columns: 70px minmax(50px, 1fr) 39px;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

:is(#props_container, #floating_panels) .spatial-mask-slider > span {
  font-weight: 620;
}

:is(#props_container, #floating_panels) .spatial-mask-slider input[type='range'] {
  width: 100%;
  min-width: 0;
  accent-color: rgb(var(--layer-accent));
}

:is(#props_container, #floating_panels) .spatial-mask-slider output {
  color: rgb(var(--layer-accent));
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row button,
:is(#props_container, #floating_panels) .spatial-mask-preview-row select {
  box-sizing: border-box;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 10.5px;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row select {
  grid-column: 1 / -1;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row button {
  cursor: pointer;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row button:disabled,
:is(#props_container, #floating_panels) .spatial-mask-preview-row select:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

:is(#props_container, #floating_panels) .spatial-mask-preview-row .spatial-mask-done {
  color: rgb(255 255 255 / 96%);
  border-color: rgb(var(--layer-accent) / 72%);
  background: rgb(var(--layer-accent) / 70%);
  font-weight: 750;
}

:is(#props_container, #floating_panels) .spatial-mask-instruction {
  display: block;
  padding: 8px 9px;
  color: color-mix(in srgb, var(--button-text-color) 74%, var(--button-text-inactive-color));
  border-left: 2px solid rgb(var(--layer-accent) / 64%);
  border-radius: 0 6px 6px 0;
  background: rgb(var(--layer-accent) / 6%);
  font-size: 10.5px;
  line-height: 1.4;
}

body.light-theme :is(#props_container, #floating_panels) .spatial-mask-controls {
  background:
    radial-gradient(circle at 100% 0, rgb(var(--layer-accent) / 12%), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(0 0 0 / 2%)),
    var(--main-bg-color-props);
  box-shadow: 0 9px 24px rgb(43 34 70 / 12%);
}

/* The layer mask editor mirrors a compact image-editor Properties panel. It is
 * portaled to the document root so dock and panel overflow cannot clip it. */
.spatial-mask-properties {
  --layer-accent: 72 153 224;
  position: fixed;
  z-index: 2147483630;
  box-sizing: border-box;
  display: flex;
  width: min(342px, calc(100vw - 24px));
  min-height: 220px;
  flex-direction: column;
  overflow: hidden;
  color: rgb(232 233 236);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 6px;
  background: rgb(37 38 42 / 98%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 38%);
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.3;
  backdrop-filter: blur(18px);
}

.spatial-mask-properties .spatial-mask-controls__heading {
  display: grid;
  min-height: 48px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 11px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: rgb(255 255 255 / 2%);
}

.spatial-mask-properties__thumbnail {
  position: relative;
  box-sizing: border-box;
  width: 25px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 2px;
  background: rgb(235 236 239);
}

.spatial-mask-properties__thumbnail::after {
  position: absolute;
  top: 5px;
  right: -2px;
  width: 18px;
  height: 21px;
  border-radius: 52% 20% 45% 38%;
  background: rgb(20 21 24);
  content: "";
  transform: rotate(-11deg);
}

.spatial-mask-properties__thumbnail.is-disabled::before {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: -3px;
  width: 31px;
  height: 2px;
  background: rgb(239 74 79);
  content: "";
  transform: rotate(-48deg);
}

.spatial-mask-properties .spatial-mask-controls__heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.spatial-mask-properties .spatial-mask-controls__heading strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-properties .spatial-mask-controls__heading > div > span {
  overflow: hidden;
  color: rgb(177 179 186);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-properties .spatial-mask-header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.spatial-mask-properties :is(.spatial-mask-help, .spatial-mask-header-close) {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  color: rgb(183 185 191);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.spatial-mask-properties :is(.spatial-mask-help, .spatial-mask-header-close):hover {
  color: white;
  background: rgb(255 255 255 / 8%);
}

.spatial-mask-properties__body {
  display: grid;
  min-height: 0;
  gap: 10px;
  padding: 10px 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.spatial-mask-properties__section {
  display: grid;
  gap: 7px;
}

.spatial-mask-properties__section + .spatial-mask-properties__section,
.spatial-mask-properties .spatial-mask-section-heading--combine,
.spatial-mask-properties .spatial-mask-section-heading--preview,
.spatial-mask-properties__section--refine {
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.spatial-mask-properties .spatial-mask-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.spatial-mask-properties .spatial-mask-section-heading strong {
  color: rgb(235 236 239);
  font-size: 11px;
  font-weight: 680;
}

.spatial-mask-properties .spatial-mask-section-heading span {
  color: rgb(154 156 163);
  font-size: 9px;
  text-align: right;
}

.spatial-mask-properties .spatial-mask-slider {
  display: grid;
  min-height: 25px;
  grid-template-columns: 59px minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: rgb(216 217 221);
  font-size: 10px;
}

.spatial-mask-properties .spatial-mask-slider input[type='range'] {
  width: 100%;
  min-width: 0;
  accent-color: rgb(var(--layer-accent));
}

.spatial-mask-properties .spatial-mask-slider:has(input:disabled) {
  opacity: 0.42;
}

.spatial-mask-properties .spatial-mask-slider output {
  box-sizing: border-box;
  min-width: 40px;
  padding: 3px 5px;
  color: rgb(226 228 232);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 3px;
  background: rgb(12 13 15 / 45%);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.spatial-mask-properties button,
.spatial-mask-properties select {
  color: rgb(225 226 230);
  font-family: inherit;
}

.spatial-mask-properties :is(.spatial-mask-select-and-mask, .spatial-mask-quick-actions button) {
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 4px;
  background: linear-gradient(rgb(255 255 255 / 8%), rgb(255 255 255 / 4%));
  font-size: 10px;
  cursor: pointer;
}

.spatial-mask-properties :is(.spatial-mask-select-and-mask, .spatial-mask-quick-actions button):hover:not(:disabled) {
  border-color: rgb(var(--layer-accent) / 64%);
  background: rgb(var(--layer-accent) / 14%);
}

.spatial-mask-properties .spatial-mask-select-and-mask {
  width: 100%;
}

.spatial-mask-properties__empty-note {
  color: rgb(154 156 163);
  font-size: 8.5px;
  line-height: 1.35;
}

.spatial-mask-properties .spatial-mask-quick-actions {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 1fr;
  gap: 5px;
}

.spatial-mask-properties button:disabled,
.spatial-mask-properties select:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.spatial-mask-properties .spatial-mask-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.spatial-mask-properties .spatial-mask-tool-grid > button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  color: rgb(190 192 198);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  cursor: pointer;
}

.spatial-mask-properties .spatial-mask-tool-grid > button:is(:hover, .is-active) {
  color: white;
  border-color: rgb(var(--layer-accent) / 60%);
  background: rgb(var(--layer-accent) / 14%);
}

.spatial-mask-properties .spatial-mask-tool-grid > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.spatial-mask-properties .spatial-mask-tool-grid :is(strong, small) {
  overflow: hidden;
  font-size: 8.5px;
  font-weight: 560;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-properties .spatial-mask-tool-grid small {
  display: none;
}

.spatial-mask-properties .spatial-mask-tool-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: currentColor;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.spatial-mask-properties .spatial-mask-tool-grid em {
  position: absolute;
  top: 2px;
  right: 3px;
  color: rgb(115 187 247);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.spatial-mask-properties .spatial-mask-combine-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  background: rgb(10 11 13 / 32%);
}

.spatial-mask-properties .spatial-mask-combine-row button {
  min-width: 0;
  min-height: 27px;
  padding: 0 3px;
  color: rgb(167 169 176);
  border: 0;
  border-radius: 3px;
  background: transparent;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.spatial-mask-properties .spatial-mask-combine-row button.is-active {
  color: white;
  background: rgb(var(--layer-accent) / 25%);
  box-shadow: inset 0 0 0 1px rgb(var(--layer-accent) / 35%);
}

.spatial-mask-properties .spatial-mask-segment-status {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(var(--layer-accent) / 25%);
  border-radius: 4px;
  background: rgb(var(--layer-accent) / 7%);
}

.spatial-mask-properties .spatial-mask-segment-status__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgb(118 190 249);
  font-size: 15px;
}

.spatial-mask-properties .spatial-mask-segment-status__copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.spatial-mask-properties .spatial-mask-segment-status__copy strong {
  font-size: 10px;
  font-weight: 650;
}

.spatial-mask-properties .spatial-mask-segment-status__copy small {
  color: rgb(160 162 169);
  font-size: 8.5px;
  line-height: 1.3;
}

.spatial-mask-properties .spatial-mask-privacy {
  width: fit-content;
  margin-top: 2px;
  color: rgb(91 203 165);
  font-size: 6.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.spatial-mask-properties .spatial-mask-segment-status > button {
  grid-column: 1 / -1;
  min-height: 28px;
  border: 1px solid rgb(var(--layer-accent) / 38%);
  border-radius: 3px;
  background: rgb(var(--layer-accent) / 12%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.spatial-mask-properties .spatial-mask-segment-progress {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
}

.spatial-mask-properties .spatial-mask-segment-progress > span {
  display: block;
  height: 100%;
  background: rgb(var(--layer-accent));
}

.spatial-mask-properties .spatial-mask-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.spatial-mask-properties .spatial-mask-preview-row :is(button, select) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 29px;
  padding: 0 7px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 4px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
}

.spatial-mask-properties .spatial-mask-preview-row select {
  grid-column: 1 / -1;
}

.spatial-mask-properties .spatial-mask-preview-row button {
  cursor: pointer;
}

.spatial-mask-properties .spatial-mask-preview-row .spatial-mask-done {
  color: white;
  border-color: rgb(var(--layer-accent) / 68%);
  background: rgb(var(--layer-accent) / 75%);
  font-weight: 700;
}

.spatial-mask-properties .spatial-mask-instruction {
  display: block;
  padding: 7px 8px;
  color: rgb(169 171 178);
  border-left: 2px solid rgb(var(--layer-accent) / 64%);
  background: rgb(var(--layer-accent) / 6%);
  font-size: 8.5px;
  line-height: 1.35;
}

body.light-theme .spatial-mask-properties {
  color: rgb(35 36 40);
  border-color: rgb(35 36 40 / 20%);
  background: rgb(239 240 243 / 98%);
  box-shadow: 0 18px 45px rgb(27 30 37 / 24%), 0 2px 8px rgb(27 30 37 / 15%);
}

body.light-theme .spatial-mask-properties .spatial-mask-controls__heading {
  border-bottom-color: rgb(35 36 40 / 14%);
  background: rgb(35 36 40 / 3%);
}

body.light-theme .spatial-mask-properties .spatial-mask-controls__heading strong,
body.light-theme .spatial-mask-properties .spatial-mask-section-heading strong,
body.light-theme .spatial-mask-properties .spatial-mask-slider,
body.light-theme .spatial-mask-properties button,
body.light-theme .spatial-mask-properties select {
  color: rgb(35 36 40);
}

body.light-theme .spatial-mask-properties .spatial-mask-controls__heading > div > span,
body.light-theme .spatial-mask-properties .spatial-mask-section-heading span,
body.light-theme .spatial-mask-properties .spatial-mask-segment-status__copy small,
body.light-theme .spatial-mask-properties__empty-note,
body.light-theme .spatial-mask-properties .spatial-mask-instruction {
  color: rgb(87 89 96);
}

body.light-theme .spatial-mask-properties :is(.spatial-mask-help, .spatial-mask-header-close) {
  color: rgb(72 74 80);
}

body.light-theme .spatial-mask-properties :is(.spatial-mask-help, .spatial-mask-header-close):hover {
  color: rgb(24 25 28);
  background: rgb(20 22 27 / 8%);
}

body.light-theme .spatial-mask-properties__section + .spatial-mask-properties__section,
body.light-theme .spatial-mask-properties .spatial-mask-section-heading--combine,
body.light-theme .spatial-mask-properties .spatial-mask-section-heading--preview,
body.light-theme .spatial-mask-properties__section--refine {
  border-top-color: rgb(35 36 40 / 13%);
}

body.light-theme .spatial-mask-properties .spatial-mask-slider output {
  color: rgb(35 36 40);
  border-color: rgb(35 36 40 / 18%);
  background: rgb(255 255 255 / 72%);
}

body.light-theme .spatial-mask-properties :is(
  .spatial-mask-select-and-mask,
  .spatial-mask-quick-actions button,
  .spatial-mask-preview-row button,
  .spatial-mask-preview-row select
) {
  border-color: rgb(35 36 40 / 18%);
  background: linear-gradient(rgb(255 255 255 / 86%), rgb(35 36 40 / 4%));
}

body.light-theme .spatial-mask-properties .spatial-mask-tool-grid > button {
  color: rgb(70 72 79);
  border-color: rgb(35 36 40 / 14%);
  background: rgb(255 255 255 / 38%);
}

body.light-theme .spatial-mask-properties .spatial-mask-tool-grid > button:is(:hover, .is-active),
body.light-theme .spatial-mask-properties .spatial-mask-preview-row .spatial-mask-done {
  color: rgb(20 22 26);
}

body.light-theme .spatial-mask-properties .spatial-mask-combine-row {
  border-color: rgb(35 36 40 / 16%);
  background: rgb(35 36 40 / 5%);
}

body.light-theme .spatial-mask-properties .spatial-mask-combine-row button {
  color: rgb(67 69 76);
}

body.light-theme .spatial-mask-properties .spatial-mask-combine-row button.is-active {
  color: rgb(20 22 26);
}

body.phone-layout .spatial-mask-properties {
  width: min(342px, calc(100vw - 16px));
  max-height: calc(100vh - 16px) !important;
}

/* The phone Masking deck is a dense editing surface. Keep generous hit areas,
 * but do not let the workspace-wide 52px form-control baseline turn every
 * mask tool and range into a separate oversized row. */
body.phone-layout #props_container .masking-pane {
  gap: 5px;
  padding: 6px;
}

body.phone-layout #props_container .masking-object-callout {
  min-height: 42px;
  gap: 7px;
  padding: 5px 7px;
}

body.phone-layout #props_container .masking-model-chooser {
  gap: 4px;
  padding: 5px;
}

body.phone-layout #props_container .masking-model-chooser label {
  min-height: 44px;
  gap: 5px;
  padding: 5px;
}

body.phone-layout #props_container .masking-boundary-toggle {
  gap: 2px;
  padding: 5px 6px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-help {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-tool-row {
  gap: 3px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-tool-row button {
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 4px;
  padding: 3px 4px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-button-icon {
  width: 16px;
  height: 16px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-slider {
  min-height: 40px;
  grid-template-columns: 62px minmax(0, 1fr) 30px;
  gap: 5px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-slider input[type='range'] {
  min-height: 40px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-slider input[type='range']::-webkit-slider-thumb {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-preview-row {
  gap: 3px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-preview-row :is(button, select) {
  min-height: 42px;
  padding: 3px 5px;
}

body.phone-layout #props_container .masking-pane .spatial-mask-instruction {
  padding: 5px 7px;
}

/* Skin Retouch uses the same portaled, viewport-clamped interaction model as
 * Mask Properties while keeping the Layers stack visible underneath. */
.skin-retouch-properties {
  --layer-accent: 255 154 167;
  --skin-surface: 37 38 42;
  position: fixed;
  z-index: 2147483630;
  box-sizing: border-box;
  display: flex;
  width: min(366px, calc(100vw - 24px));
  min-height: 260px;
  flex-direction: column;
  overflow: hidden;
  color: rgb(232 233 236);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 6px;
  background: rgb(var(--skin-surface) / 98%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 38%);
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.3;
  backdrop-filter: blur(18px);
}

.skin-retouch-properties__heading {
  display: grid;
  min-height: 48px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 11px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: linear-gradient(90deg, rgb(var(--layer-accent) / 8%), transparent 62%);
}

.skin-retouch-properties__thumbnail {
  display: grid;
  box-sizing: border-box;
  width: 27px;
  height: 30px;
  place-items: center;
  color: rgb(255 206 214);
  border: 1px solid rgb(var(--layer-accent) / 50%);
  border-radius: 4px;
  background: rgb(var(--layer-accent) / 12%);
  font-size: 15px;
}

.skin-retouch-properties__heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.skin-retouch-properties__heading strong {
  overflow: hidden;
  color: rgb(242 243 245);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-retouch-properties__heading > div > span {
  overflow: hidden;
  color: rgb(177 179 186);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-retouch-properties__header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.skin-retouch-properties :is(
  .skin-retouch-properties__help,
  .skin-retouch-properties__close
) {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  color: rgb(183 185 191);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.skin-retouch-properties :is(
  .skin-retouch-properties__help,
  .skin-retouch-properties__close
):hover {
  color: white;
  background: rgb(255 255 255 / 8%);
}

.skin-retouch-properties__body {
  min-height: 0;
  padding: 10px 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.skin-retouch-properties .skin-retouch-pane--floating {
  display: grid;
  gap: 10px;
  padding: 0;
  color: rgb(226 228 232);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.skin-retouch-properties .skin-retouch-recipes {
  display: grid;
  gap: 7px;
}

.skin-retouch-properties .pixel-layer-section-title,
.skin-retouch-properties .pixel-layer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.skin-retouch-properties .skin-retouch-recipes > .pixel-layer-section-title {
  padding-top: 0;
  border-top: 0;
}

.skin-retouch-properties .pixel-layer-section-title span {
  color: rgb(235 236 239);
  font-size: 11px;
  font-weight: 680;
}

.skin-retouch-properties .pixel-layer-section-title small,
.skin-retouch-properties .pixel-layer-footer > span,
.skin-retouch-properties .pixel-layer-note,
.skin-retouch-properties .pixel-layer-face-status {
  color: rgb(154 156 163);
  font-size: 9px;
}

.skin-retouch-properties .skin-retouch-recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.skin-retouch-properties .skin-retouch-recipe-grid button {
  display: grid;
  min-width: 0;
  min-height: 43px;
  align-content: center;
  gap: 2px;
  padding: 5px 7px;
  color: rgb(182 184 190);
  border: 1px solid rgb(var(--layer-accent) / 16%);
  border-radius: 4px;
  background: rgb(255 255 255 / 3%);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.skin-retouch-properties .skin-retouch-recipe-grid button:is(:hover, :focus-visible, .is-active) {
  color: white;
  border-color: rgb(var(--layer-accent) / 52%);
  background: rgb(var(--layer-accent) / 13%);
  outline: none;
}

.skin-retouch-properties .skin-retouch-recipe-grid strong,
.skin-retouch-properties .skin-retouch-recipe-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-retouch-properties .skin-retouch-recipe-grid strong {
  font-size: 10px;
  font-weight: 650;
}

.skin-retouch-properties .skin-retouch-recipe-grid small {
  color: rgb(151 153 160);
  font-size: 8px;
}

.skin-retouch-properties .pixel-layer-controls {
  display: grid;
  gap: 7px;
}

.skin-retouch-properties .pixel-layer-range {
  display: grid;
  min-height: 29px;
  grid-template-columns: 102px minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  color: rgb(213 214 219);
  font-size: 10px;
}

.skin-retouch-properties .pixel-layer-range__label {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.skin-retouch-properties .pixel-layer-range__label > span,
.skin-retouch-properties .pixel-layer-range__label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-retouch-properties .pixel-layer-range__label small {
  color: rgb(137 139 146);
  font-size: 8px;
}

.skin-retouch-properties .inline-slider {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.skin-retouch-properties .inline-slider input[type='range'] {
  width: 100%;
  min-width: 60px;
  margin: 0;
  accent-color: rgb(var(--layer-accent));
  cursor: ew-resize;
}

.skin-retouch-properties .inline-slider output {
  box-sizing: border-box;
  min-width: 42px;
  padding: 3px 5px;
  color: rgb(226 228 232);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 3px;
  background: rgb(12 13 15 / 45%);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.skin-retouch-properties .pixel-layer-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 4px;
}

.skin-retouch-properties .pixel-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgb(205 207 212);
  font-size: 10px;
  cursor: pointer;
}

.skin-retouch-properties .pixel-layer-toggle input {
  margin: 0;
  accent-color: rgb(var(--layer-accent));
}

.skin-retouch-properties .pixel-layer-face-status--detected {
  color: rgb(116 209 150);
}

.skin-retouch-properties .pixel-layer-face-status--warning {
  color: rgb(239 183 91);
}

.skin-retouch-properties .pixel-layer-note {
  margin: 1px 0 0;
  line-height: 1.4;
}

.skin-retouch-properties .pixel-layer-footer {
  align-items: flex-start;
  flex-direction: column;
}

.skin-retouch-properties .pixel-layer-footer__actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.skin-retouch-properties .pixel-layer-footer button {
  min-height: 29px;
  padding: 0 8px;
  color: rgb(214 216 221);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 4px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.skin-retouch-properties .pixel-layer-footer button:hover:not(:disabled) {
  color: white;
  border-color: rgb(var(--layer-accent) / 48%);
  background: rgb(var(--layer-accent) / 12%);
}

.skin-retouch-properties .pixel-layer-footer .skin-retouch-properties__done {
  margin-left: auto;
  color: white;
  border-color: rgb(var(--layer-accent) / 68%);
  background: rgb(var(--layer-accent) / 70%);
  font-weight: 700;
}

body.light-theme .skin-retouch-properties {
  --skin-surface: 239 240 243;
  color: rgb(35 36 40);
  border-color: rgb(35 36 40 / 20%);
  box-shadow: 0 18px 45px rgb(27 30 37 / 24%), 0 2px 8px rgb(27 30 37 / 15%);
}

body.light-theme .skin-retouch-properties__heading {
  border-bottom-color: rgb(35 36 40 / 14%);
}

body.light-theme .skin-retouch-properties :is(
  .skin-retouch-properties__heading strong,
  .pixel-layer-section-title span,
  .pixel-layer-range,
  .pixel-layer-toggle,
  .pixel-layer-footer button
) {
  color: rgb(35 36 40);
}

body.light-theme .skin-retouch-properties :is(
  .skin-retouch-properties__heading > div > span,
  .pixel-layer-section-title small,
  .pixel-layer-footer > span,
  .pixel-layer-note,
  .pixel-layer-face-status,
  .pixel-layer-range__label small
) {
  color: rgb(87 89 96);
}

body.light-theme .skin-retouch-properties .inline-slider output {
  color: rgb(35 36 40);
  border-color: rgb(35 36 40 / 18%);
  background: rgb(255 255 255 / 72%);
}

body.phone-layout .skin-retouch-properties {
  width: min(366px, calc(100vw - 16px));
  max-height: calc(100vh - 16px) !important;
}

@media (max-width: 430px) {
  .skin-retouch-properties .skin-retouch-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skin-retouch-properties .pixel-layer-range {
    grid-template-columns: 92px minmax(110px, 1fr);
  }
}

#props_container .spatial-mask-segmentation-status {
  display: grid;
  gap: 5px;
  margin: 5px 0;
  padding: 7px 8px;
  color: var(--button-text-inactive-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--main-bg-color-deep) 64%, transparent);
  font-size: calc(0.39 * var(--menu-t));
  line-height: 1.35;
}

#props_container .spatial-mask-segmentation-status--ready {
  color: rgb(102 216 192);
}

#props_container .spatial-mask-segmentation-status--error {
  color: rgb(242 151 143);
}

#props_container .spatial-mask-segmentation-status progress {
  width: 100%;
  height: 4px;
  accent-color: rgb(83 221 197);
}

.spatial-mask-floating-panel {
  --spatial-mask-accent: 83 221 197;
  position: fixed;
  box-sizing: border-box;
  display: grid;
  width: 352px;
  max-height: calc(100vh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--button-text-color, #ddd);
  border: 1px solid color-mix(in srgb, rgb(var(--spatial-mask-accent)) 28%, var(--button-border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--main-bg-color-props, #292929) 96%, #0a1717);
  box-shadow: 0 18px 52px rgb(0 0 0 / 46%), inset 0 1px rgb(255 255 255 / 6%);
  font-family: var(--main-font-family, sans-serif);
  pointer-events: auto;
  backdrop-filter: blur(18px);
}

.spatial-mask-floating-panel--dragging {
  opacity: .94;
  box-shadow: 0 24px 66px rgb(0 0 0 / 56%), 0 0 0 1px rgb(var(--spatial-mask-accent) / 24%);
}

.spatial-mask-floating-panel__header {
  box-sizing: border-box;
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto 28px 28px 28px;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  background: linear-gradient(120deg, rgb(var(--spatial-mask-accent) / 9%), transparent 58%);
}

.spatial-mask-floating-panel__drag {
  display: grid;
  min-width: 0;
  height: 38px;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 5px;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: none;
}

.spatial-mask-floating-panel__drag:active {
  cursor: grabbing;
}

.spatial-mask-floating-panel__drag > span:first-child {
  color: var(--button-text-inactive-color, #888);
  font-size: 13px;
}

.spatial-mask-floating-panel__drag > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.spatial-mask-floating-panel__drag strong {
  overflow: hidden;
  color: var(--button-text-color, #eee);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-floating-panel__drag small {
  overflow: hidden;
  color: var(--button-text-inactive-color, #999);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-floating-panel__count {
  padding: 3px 7px;
  color: rgb(var(--spatial-mask-accent));
  border: 1px solid rgb(var(--spatial-mask-accent) / 20%);
  border-radius: 999px;
  background: rgb(var(--spatial-mask-accent) / 7%);
  font-size: 8px;
  font-weight: 680;
  white-space: nowrap;
}

.spatial-mask-floating-panel__reset,
.spatial-mask-floating-panel__help,
.spatial-mask-floating-panel__reset,
.spatial-mask-floating-panel__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color, #999);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.spatial-mask-floating-panel__reset:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.spatial-mask-floating-panel__reset:hover:not(:disabled),
.spatial-mask-floating-panel__help:hover,
.spatial-mask-floating-panel__reset:hover:not(:disabled),
.spatial-mask-floating-panel__close:hover {
  color: var(--button-text-color, #eee);
  border-color: color-mix(in srgb, var(--button-border-color) 72%, transparent);
  background: rgb(255 255 255 / 6%);
}

.spatial-mask-floating-panel__reset:disabled {
  color: #8f9a9f;
  cursor: not-allowed;
}

#props_container .masking-pane .pixel-layer-inspector__reset:disabled {
  color: #8f9a9f;
  cursor: default;
  opacity: 1;
}

.spatial-mask-floating-panel__close {
  font-size: 18px;
  line-height: 1;
}

.spatial-mask-floating-panel__body {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 12px;
  padding: 12px;
  overflow: auto;
}

.spatial-mask-panel {
  --spatial-mask-accent: 83 221 197;
  --layer-accent: var(--spatial-mask-accent);
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  color: var(--button-text-color);
}

.spatial-mask-panel__identity {
  display: grid;
  gap: 2px;
  padding: 10px 12px 8px;
}

.spatial-mask-panel__identity strong {
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 700;
}

.spatial-mask-panel__identity small {
  color: var(--button-text-inactive-color);
  font-size: 11px;
}

.spatial-mask-panel .spatial-mask-workflow {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 12px 10px;
  overflow: auto;
  overscroll-behavior: contain;
}

.spatial-mask-workflow {
  --spatial-mask-workflow-accent: var(--layer-accent, 83 221 197);
  display: grid;
  gap: 10px;
  color: var(--button-text-color, #eee);
}

.spatial-mask-workflow__step {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--button-border-color, #666) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--main-bg-color-deep, #191919) 58%, transparent);
}

.spatial-mask-workflow__step-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.spatial-mask-workflow__step-heading > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: rgb(8 42 35);
  border-radius: 50%;
  background: rgb(var(--spatial-mask-workflow-accent));
  font-size: 9px;
  font-weight: 800;
}

.spatial-mask-workflow__step-heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.spatial-mask-workflow__step-heading strong {
  color: var(--button-text-color, #eee);
  font-size: 10px;
}

.spatial-mask-workflow__step-heading small,
.spatial-mask-workflow__shapes small,
.spatial-mask-workflow__status small,
.spatial-mask-workflow__boundary-toggle small,
.spatial-mask-workflow__manual-tools p {
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
  line-height: 1.35;
}

.spatial-mask-workflow__models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.spatial-mask-workflow__models legend {
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
}

.spatial-mask-workflow__models label {
  display: grid;
  min-width: 0;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  padding: 7px;
  color: var(--button-text-color, #eee);
  border: 1px solid color-mix(in srgb, var(--button-border-color, #666) 70%, transparent);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
  cursor: pointer;
}

.spatial-mask-workflow__models label.is-selected {
  border-color: rgb(var(--spatial-mask-workflow-accent) / 70%);
  background: rgb(var(--spatial-mask-workflow-accent) / 12%);
}

.spatial-mask-workflow__models label.is-disabled {
  color: var(--button-text-inactive-color, #aaa);
  cursor: not-allowed;
}

.spatial-mask-workflow__models input {
  margin: 2px 0 0;
  accent-color: rgb(var(--spatial-mask-workflow-accent));
}

.spatial-mask-workflow__models label > span {
  display: grid;
  grid-column: 2;
  gap: 2px;
}

.spatial-mask-workflow__models strong {
  font-size: 8.5px;
}

.spatial-mask-workflow__models small {
  color: var(--button-text-inactive-color, #aaa);
  font-size: 7px;
  line-height: 1.3;
}

.spatial-mask-workflow__model-settings {
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid rgb(var(--spatial-mask-workflow-accent) / 28%);
  border-radius: 6px;
  background: rgb(var(--spatial-mask-workflow-accent) / 6%);
}

.spatial-mask-workflow__model-settings > strong {
  color: var(--button-text-color, #eee);
  font-size: 8px;
}

.spatial-mask-workflow__model-settings > small {
  color: var(--button-text-inactive-color, #aaa);
  font-size: 7px;
  line-height: 1.3;
}

.spatial-mask-workflow__model-settings .spatial-mask-workflow__slider {
  min-height: 23px;
}

.spatial-mask-workflow__model-settings .spatial-mask-workflow__slider output {
  overflow: visible;
  white-space: nowrap;
}

.spatial-mask-workflow__status {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 4px 6px;
  padding: 6px 7px;
  color: var(--button-text-color, #eee);
  border-radius: 6px;
  background: rgb(var(--spatial-mask-workflow-accent) / 7%);
}

.spatial-mask-workflow__status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--spatial-mask-workflow-accent));
  box-shadow: 0 0 6px rgb(var(--spatial-mask-workflow-accent) / 58%);
}

.spatial-mask-workflow__status strong {
  font-size: 8.5px;
}

.spatial-mask-workflow__status small {
  grid-column: 2;
}

.spatial-mask-workflow__status em {
  grid-column: 2;
  color: #ffaaa3;
  font-size: 7.5px;
  font-style: normal;
  line-height: 1.35;
}

.spatial-mask-workflow__status--error > span {
  background: #ff8a82;
}

.spatial-mask-workflow__action-grid,
.spatial-mask-workflow__manual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.spatial-mask-workflow__action-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spatial-mask-workflow__action-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spatial-mask-workflow__action-grid--four .spatial-mask-workflow__lasso {
  grid-column: 1 / -1;
}

.spatial-mask-workflow__shapes {
  display: grid;
  gap: 5px;
}

.spatial-mask-workflow__shapes strong {
  color: var(--button-text-color, #eee);
  font-size: 8px;
}

.spatial-mask-workflow__shapes small {
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
  line-height: 1.35;
}

.spatial-mask-workflow button,
.spatial-mask-workflow select,
.spatial-mask-workflow__manual-tools summary {
  color: var(--button-text-color, #eee);
  border: 1px solid color-mix(in srgb, var(--button-border-color, #666) 72%, transparent);
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
  font: inherit;
}

.spatial-mask-workflow button {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 6px;
  font-size: 8px;
  cursor: pointer;
}

.spatial-mask-workflow button:is(:hover, :focus-visible),
.spatial-mask-workflow button.is-active {
  color: rgb(198 255 244);
  border-color: rgb(var(--spatial-mask-workflow-accent) / 68%);
  background: rgb(var(--spatial-mask-workflow-accent) / 15%);
  outline: none;
}

.spatial-mask-button-icon--stacked {
  position: relative;
}

.spatial-mask-button-icon--stacked i {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  width: 11px;
  height: 11px;
  place-items: center;
  color: rgb(7 35 30);
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  background: rgb(var(--spatial-mask-workflow-accent));
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.spatial-mask-workflow__boundary-toggle {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  color: var(--button-text-color, #eee);
  cursor: pointer;
}

.spatial-mask-workflow__boundary-toggle input {
  margin: 2px 0 0;
  accent-color: rgb(var(--spatial-mask-workflow-accent));
}

.spatial-mask-workflow__boundary-toggle > span {
  display: grid;
  grid-column: 2;
  gap: 1px;
}

.spatial-mask-workflow__boundary-toggle strong {
  font-size: 8px;
}

.spatial-mask-workflow__slider {
  display: grid;
  min-height: 28px;
  grid-template-columns: 62px minmax(50px, 1fr) 40px;
  align-items: center;
  gap: 6px;
  color: var(--button-text-color, #eee);
  font-size: 8px;
}

.spatial-mask-workflow__slider input {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: rgb(var(--spatial-mask-workflow-accent));
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.spatial-mask-workflow__slider output {
  color: rgb(var(--spatial-mask-workflow-accent));
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.spatial-mask-workflow__manual-tools summary {
  padding: 6px 8px;
  font-size: 8px;
  cursor: pointer;
}

.spatial-mask-workflow__manual-tools p {
  margin: 6px 1px;
}

.spatial-mask-workflow__manual-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spatial-mask-workflow__manual-grid button {
  min-height: 31px;
}

.spatial-mask-workflow__preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.spatial-mask-workflow__preview-actions > label {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
}

.spatial-mask-workflow__preview-actions select {
  min-width: 0;
  min-height: 30px;
  padding: 0 6px;
  font-size: 8px;
}

body.light-theme .spatial-mask-workflow__step {
  background: rgb(24 65 57 / 4%);
}

body.light-theme .spatial-mask-workflow__step-heading strong,
body.light-theme .spatial-mask-workflow__shapes strong,
body.light-theme .spatial-mask-workflow__models label,
body.light-theme .spatial-mask-workflow__status,
body.light-theme .spatial-mask-workflow__boundary-toggle,
body.light-theme .spatial-mask-workflow__slider,
body.light-theme .spatial-mask-workflow button,
body.light-theme .spatial-mask-workflow select,
body.light-theme .spatial-mask-workflow__manual-tools summary {
  color: #24383d;
}

body.light-theme .spatial-mask-workflow button:is(:hover, :focus-visible),
body.light-theme .spatial-mask-workflow button.is-active {
  color: #0c6556;
}

body.light-theme .spatial-mask-floating-panel__reset:disabled,
body.light-theme #props_container .masking-pane .pixel-layer-inspector__reset:disabled {
  color: #66747a;
}

.spatial-mask-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.spatial-mask-tool-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 70px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 4px;
  color: var(--button-text-inactive-color, #999);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 70%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-bg-color, #333) 48%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  font: inherit;
  cursor: pointer;
}

.spatial-mask-tool-button:hover {
  color: var(--button-text-color, #eee);
  border-color: rgb(var(--spatial-mask-accent) / 34%);
  background: rgb(var(--spatial-mask-accent) / 7%);
}

.spatial-mask-tool-button.is-active {
  color: rgb(190 255 243);
  border-color: rgb(var(--spatial-mask-accent) / 58%);
  background: linear-gradient(145deg, rgb(var(--spatial-mask-accent) / 18%), rgb(var(--spatial-mask-accent) / 6%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 0 0 1px rgb(var(--spatial-mask-accent) / 8%);
}

.spatial-mask-tool-button > span:not(.spatial-mask-tool-button__icon) {
  overflow: hidden;
  max-width: 100%;
  font-size: 8px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-mask-tool-button small {
  display: none;
}

.spatial-mask-tool-button--object {
  min-height: 54px;
  grid-column: 1 / -1;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: start;
  align-content: center;
  column-gap: 10px;
  padding: 7px 11px;
  text-align: left;
}

.spatial-mask-tool-button--object .spatial-mask-tool-button__icon {
  grid-row: 1 / 3;
  align-self: center;
}

.spatial-mask-tool-button--object > span:not(.spatial-mask-tool-button__icon) {
  align-self: end;
  font-size: 9px;
}

.spatial-mask-tool-button--object small {
  display: block;
  align-self: start;
  color: var(--button-text-inactive-color, #999);
  font-size: 7px;
}

.spatial-mask-tool-button__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
}

.spatial-mask-tool-button svg,
.navigator-spatial-mask-tool svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.spatial-mask-tool-icon__target {
  fill: currentColor;
  stroke: none;
}

.spatial-mask-object-assistant {
  display: grid;
  min-height: 92px;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  color: var(--button-text-inactive-color, #aaa);
  border: 1px solid rgb(var(--spatial-mask-accent) / 22%);
  border-radius: 10px;
  background:
    radial-gradient(circle at 36px 50%, rgb(var(--spatial-mask-accent) / 11%), transparent 76px),
    rgb(0 0 0 / 10%);
}

.spatial-mask-object-assistant--ready,
.spatial-mask-object-assistant--segmenting {
  color: rgb(176 244 232);
}

.spatial-mask-object-assistant--error {
  --spatial-mask-accent: 242 151 143;
}

.spatial-mask-object-assistant__visual {
  position: relative;
  width: 68px;
  height: 68px;
}

.spatial-mask-object-assistant__frame {
  position: absolute;
  inset: 9px;
  border: 1px solid rgb(var(--spatial-mask-accent) / 52%);
  border-radius: 10px 16px 12px 17px;
  transform: rotate(-8deg);
}

.spatial-mask-object-assistant__frame::before,
.spatial-mask-object-assistant__frame::after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: '';
  border-color: rgb(var(--spatial-mask-accent));
}

.spatial-mask-object-assistant__frame::before {
  top: -5px;
  left: -5px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.spatial-mask-object-assistant__frame::after {
  right: -5px;
  bottom: -5px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.spatial-mask-object-assistant__pulse,
.spatial-mask-object-assistant__point {
  position: absolute;
  top: 31px;
  left: 33px;
  border-radius: 50%;
}

.spatial-mask-object-assistant__pulse {
  width: 4px;
  height: 4px;
  background: rgb(var(--spatial-mask-accent) / 22%);
  animation: spatial-mask-assistant-pulse 1.8s ease-out infinite;
}

.spatial-mask-object-assistant__point {
  width: 6px;
  height: 6px;
  margin: -1px;
  background: rgb(var(--spatial-mask-accent));
  box-shadow: 0 0 8px rgb(var(--spatial-mask-accent) / 75%);
}

.spatial-mask-object-assistant--loading .spatial-mask-object-assistant__frame,
.spatial-mask-object-assistant--segmenting .spatial-mask-object-assistant__frame {
  animation: spatial-mask-assistant-scan 1.6s ease-in-out infinite alternate;
}

.spatial-mask-object-assistant__copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.spatial-mask-object-assistant__copy > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.spatial-mask-object-assistant__copy strong {
  color: var(--button-text-color, #eee);
  font-size: 10px;
}

.spatial-mask-object-assistant__copy > div span {
  color: rgb(var(--spatial-mask-accent));
  font-size: 8px;
  font-weight: 720;
  text-transform: uppercase;
}

.spatial-mask-object-assistant__copy p {
  margin: 0;
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
  line-height: 1.45;
}

.spatial-mask-object-assistant__copy progress {
  width: 100%;
  height: 4px;
  accent-color: rgb(var(--spatial-mask-accent));
}

.spatial-mask-floating-panel__section {
  display: grid;
  gap: 7px;
}

.spatial-mask-floating-panel__section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.spatial-mask-floating-panel__section-title strong {
  color: var(--button-text-color, #eee);
  font-size: 9px;
}

.spatial-mask-floating-panel__section-title small {
  color: var(--button-text-inactive-color, #999);
  font-size: 7px;
}

.spatial-mask-combine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 70%, transparent);
  border-radius: 8px;
  background: rgb(0 0 0 / 9%);
}

.spatial-mask-combine-grid button,
.spatial-mask-preview-controls button,
.spatial-mask-floating-panel__footer button {
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  color: var(--button-text-inactive-color, #aaa);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.spatial-mask-combine-grid button,
.spatial-mask-preview-controls button,
.spatial-mask-floating-panel__footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.spatial-mask-combine-grid .spatial-mask-button-icon,
.spatial-mask-preview-controls .spatial-mask-button-icon,
.spatial-mask-floating-panel__footer .spatial-mask-button-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.spatial-mask-combine-grid button:hover,
.spatial-mask-preview-controls button:hover:not(:disabled),
.spatial-mask-floating-panel__footer button:hover:not(:disabled) {
  color: var(--button-text-color, #eee);
  background: rgb(255 255 255 / 6%);
}

.spatial-mask-combine-grid button.is-active {
  color: rgb(190 255 243);
  border-color: rgb(var(--spatial-mask-accent) / 34%);
  background: rgb(var(--spatial-mask-accent) / 13%);
}

.spatial-mask-floating-slider {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 31px;
  align-items: center;
  gap: 8px;
  color: var(--button-text-inactive-color, #aaa);
  font-size: 8px;
}

.spatial-mask-floating-slider input {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: rgb(var(--spatial-mask-accent));
}

.spatial-mask-floating-slider output {
  color: var(--button-text-color, #eee);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.spatial-mask-preview-controls {
  display: grid;
  grid-template-columns: 70px 82px minmax(0, 1fr);
  gap: 5px;
}

.spatial-mask-preview-controls button,
.spatial-mask-preview-controls select {
  box-sizing: border-box;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  background: color-mix(in srgb, var(--button-bg-color, #333) 52%, transparent);
}

.spatial-mask-preview-controls button[aria-pressed='true'] {
  color: rgb(190 255 243);
  border-color: rgb(var(--spatial-mask-accent) / 35%);
  background: rgb(var(--spatial-mask-accent) / 11%);
}

.spatial-mask-preview-controls select {
  min-width: 0;
  padding: 0 5px;
  color: var(--button-text-color, #ddd);
  border-radius: 6px;
  font: inherit;
  font-size: 8px;
}

.spatial-mask-preview-controls :disabled,
.spatial-mask-floating-panel__footer button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.spatial-mask-floating-panel__footer {
  display: grid;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 68%, transparent);
  background: rgb(0 0 0 / 8%);
}

.spatial-mask-floating-panel__footer > span {
  color: var(--button-text-inactive-color, #999);
  font-size: 7px;
}

.spatial-mask-floating-panel__footer button {
  border-color: color-mix(in srgb, var(--button-border-color) 72%, transparent);
  background: rgb(255 255 255 / 3%);
}

.spatial-mask-floating-panel__footer button.is-primary {
  min-width: 56px;
  color: #09231f;
  border-color: rgb(var(--spatial-mask-accent) / 72%);
  background: rgb(var(--spatial-mask-accent));
  font-weight: 720;
}

.spatial-mask-floating-panel__footer button.is-primary:hover {
  color: #061b18;
  background: rgb(122 238 217);
}

.spatial-mask-panel__footer {
  display: grid;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 10px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 68%, transparent);
}

.spatial-mask-panel__footer > span {
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.35;
}

.spatial-mask-panel__footer button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--button-text-color);
  border: 1px solid color-mix(in srgb, var(--button-border-color) 72%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--button-bg-color) 88%, transparent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.spatial-mask-panel__footer button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.spatial-mask-panel__footer button.is-primary {
  min-width: 64px;
  color: #09231f;
  border-color: rgb(var(--spatial-mask-accent) / 72%);
  background: rgb(var(--spatial-mask-accent));
  font-weight: 720;
}

.spatial-mask-panel__footer button.is-primary:hover {
  color: #061b18;
  background: rgb(122 238 217);
}

.spatial-mask-panel__footer .spatial-mask-button-icon {
  display: inline-grid;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  place-items: center;
  vertical-align: -2px;
}

.navigator-spatial-mask-tools {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  color: var(--button-text-inactive-color, #999);
  border: 1px solid rgb(83 221 197 / 24%);
  border-radius: 9px;
  background: linear-gradient(90deg, rgb(83 221 197 / 10%), rgb(83 221 197 / 3%));
}

.navigator-spatial-mask-tools__identity {
  display: inline-flex;
  max-width: 104px;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  color: rgb(155 237 222);
  font-size: 8px;
  white-space: nowrap;
}

.navigator-spatial-mask-tools__identity > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(83 221 197);
  box-shadow: 0 0 7px rgb(83 221 197 / 62%);
}

.navigator-spatial-mask-tool {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 5px;
  color: var(--button-text-inactive-color, #999);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.navigator-spatial-mask-tool:hover,
.navigator-spatial-mask-tool.is-active {
  color: rgb(190 255 243);
  border-color: rgb(83 221 197 / 34%);
  background: rgb(83 221 197 / 12%);
}

.navigator-spatial-mask-tool > i {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(83 221 197);
}

.navigator-spatial-mask-tool--loading > i,
.navigator-spatial-mask-tool--segmenting > i {
  animation: spatial-mask-toolbar-status 1s ease-in-out infinite alternate;
}

.navigator-spatial-mask-tool--error > i {
  background: rgb(242 151 143);
}

.navigator-spatial-mask-tools__done {
  position: relative;
  height: 24px;
  padding: 0 7px;
  color: #09231f;
  border: 0;
  border-radius: 6px;
  background: rgb(83 221 197);
  font: inherit;
  font-size: 8px;
  font-weight: 720;
  cursor: pointer;
}

@keyframes spatial-mask-assistant-pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--spatial-mask-accent) / 52%); }
  75%, 100% { box-shadow: 0 0 0 24px rgb(var(--spatial-mask-accent) / 0%); }
}

@keyframes spatial-mask-assistant-scan {
  from { transform: translateX(-2px) rotate(-8deg); }
  to { transform: translateX(2px) rotate(4deg); }
}

@keyframes spatial-mask-toolbar-status {
  from { opacity: .35; transform: scale(.78); }
  to { opacity: 1; transform: scale(1.2); }
}

@container navigator-toolbar (max-width: 720px) {
  .navigator-spatial-mask-tools__identity {
    display: none;
  }
}

@container navigator-toolbar (max-width: 520px) {
  .navigator-spatial-mask-tools__done {
    width: 25px;
    padding: 0;
    overflow: hidden;
    color: transparent;
  }

  .navigator-spatial-mask-tools__done::after {
    display: grid;
    position: absolute;
    width: 25px;
    height: 24px;
    place-items: center;
    color: #09231f;
    content: '✓';
  }
}

body.light-theme .spatial-mask-floating-panel {
  color: #344149;
  border-color: rgb(25 137 119 / 26%);
  background: rgb(247 250 249 / 96%);
  box-shadow: 0 18px 52px rgb(42 57 54 / 25%), inset 0 1px rgb(255 255 255 / 85%);
}

body.light-theme .spatial-mask-tool-button,
body.light-theme .spatial-mask-floating-slider,
body.light-theme .spatial-mask-object-assistant__copy p,
body.light-theme .spatial-mask-floating-panel__section-title small,
body.light-theme .spatial-mask-floating-panel__footer > span {
  color: #596a72;
}

body.light-theme .spatial-mask-tool-button {
  background: rgb(30 70 63 / 4%);
}

body.light-theme .spatial-mask-tool-button:hover,
body.light-theme .spatial-mask-tool-button.is-active,
body.light-theme .spatial-mask-combine-grid button.is-active {
  color: #126d5e;
}

body.light-theme .spatial-mask-object-assistant {
  background:
    radial-gradient(circle at 36px 50%, rgb(var(--spatial-mask-accent) / 15%), transparent 76px),
    rgb(30 70 63 / 3%);
}

body.light-theme .spatial-mask-object-assistant__copy strong,
body.light-theme .spatial-mask-floating-panel__section-title strong,
body.light-theme .spatial-mask-floating-slider output,
body.light-theme .spatial-mask-floating-panel__drag strong {
  color: #26373d;
}

@media (max-width: 480px) {
  .spatial-mask-floating-panel {
    top: auto !important;
    right: 8px;
    bottom: 8px;
    left: 8px !important;
    width: auto;
    max-height: min(74vh, 620px);
  }

  .spatial-mask-floating-panel__drag {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-mask-object-assistant__pulse,
  .spatial-mask-object-assistant__frame,
  .navigator-spatial-mask-tool > i {
    animation: none !important;
  }
}

:is(#props_container, #floating_panels) .adjustment-layer-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-top: 1px solid color-mix(in srgb, var(--button-border-color) 48%, transparent);
  background: color-mix(in srgb, var(--main-bg-color-props) 90%, var(--main-bg-color-deep));
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-spacer {
  flex: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action {
  box-sizing: border-box;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: var(--button-text-inactive-color);
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--main-bg-color-deep) 18%, transparent);
  font: inherit;
  font-size: calc(0.57 * var(--menu-t));
  line-height: 1;
  cursor: pointer;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action:hover:not(:disabled) {
  color: var(--button-text-hover-color);
  border-color: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  background: rgb(255 255 255 / 6%);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--adjustment > span {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--liquify {
  color: rgb(190 153 244);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--skin {
  color: rgb(241 171 181);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--face {
  color: rgb(126 210 184);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--paint {
  color: rgb(126 204 229);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--hair {
  color: rgb(255 195 117);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--blur {
  color: rgb(168 196 226);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--gradient {
  color: rgb(214 176 255);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action .preset-group-icon {
  width: 17px;
  height: 17px;
  color: inherit;
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--liquify {
  color: rgb(111 72 158);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--skin {
  color: rgb(160 70 85);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--face {
  color: rgb(32 110 92);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--paint {
  color: rgb(22 111 139);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--hair {
  color: rgb(128 70 0);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--blur {
  color: rgb(36 78 122);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--gradient {
  color: rgb(108 42 148);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--remove:hover:not(:disabled) {
  color: rgb(255 151 147);
  border-color: rgb(255 115 110 / 30%);
  background: rgb(255 115 110 / 9%);
}

:is(#props_container, #floating_panels) :is(
  .adjustment-layer-visibility,
  .adjustment-layer-disclosure,
  .adjustment-layer-thumbnail,
  .adjustment-layer-name,
  .adjustment-layer-effect-visibility,
  .adjustment-layer-effect-copy--button,
  .adjustment-layer-remove,
  .adjustment-layer-edit,
  .adjustment-layer-footer-action
):focus-visible {
  outline: 2px solid rgb(var(--layer-accent));
  outline-offset: 1px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layers-toolbar {
  grid-template-columns: 1fr;
  gap: 2px;
  min-height: 66px;
  padding: 5px 10px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-main {
  min-height: 58px;
  grid-template-columns: 48px 30px 40px 32px minmax(0, 1fr) 46px;
  gap: 3px;
  padding: 3px 9px 3px 2px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-main--with-edit {
  grid-template-columns: 48px 30px 40px 32px minmax(0, 1fr) 46px 46px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-visibility,
body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-disclosure {
  width: 48px;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  margin: 0;
  border-radius: 7px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-disclosure {
  width: 30px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-thumbnail {
  width: 38px;
  height: 42px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail {
  width: 30px;
  height: 38px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-remove {
  width: 44px;
  height: 48px;
  border-radius: 7px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effects {
  margin-left: 48px;
  padding-left: 31px;
}

body.phone-layout #props_container .paint-layer-controls {
  padding-right: 10px;
}

body.phone-layout .paint-layer-properties {
  width: min(344px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
}

body.phone-layout .paint-layer-properties .paint-layer-controls {
  padding: 0;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effects::before {
  display: block;
  left: 19px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect {
  min-height: 48px;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 5px;
  padding: 2px 8px 2px 0;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect-visibility {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-trash,
body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-edit {
  width: 46px;
  height: 46px;
  border-radius: 7px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-footer {
  min-height: 54px;
  gap: 2px;
  padding: 2px 5px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-footer-action {
  width: 50px;
  height: 50px;
  border-radius: 8px;
}

@media (max-width: 330px) {
  :is(#props_container, #floating_panels) .adjustment-layer-main {
    grid-template-columns: 25px 15px 29px 23px minmax(0, 1fr) 27px;
    gap: 2px;
  }

  :is(#props_container, #floating_panels) .adjustment-layer-main--with-edit {
    grid-template-columns: 25px 15px 29px 23px minmax(0, 1fr) 27px 27px;
  }
}

/* Contemporary Layers hierarchy: quiet parent cards with editable child lines. */
:is(#props_container, #floating_panels) .adjustment-layers {
  --layers-accent: #78bdf5;
  --layers-action: #286da5;
  --layers-bg: #171c22;
  --layers-surface: #20262d;
  --layers-surface-hover: #252d35;
  --layers-surface-selected: #223448;
  --layers-border: #4b5864;
  --layers-border-soft: #35404a;
  --layers-text: #f1f5f8;
  --layers-muted: #b8c2cb;
  --layers-danger: #ff9b96;
  --layer-tint-wash: 12%;
  --layer-tint-adjustment: 118 172 214;
  --layer-tint-paint: 214 148 158;
  --layer-tint-liquify: 174 146 214;
  --layer-tint-skin: 214 166 158;
  --layer-tint-face: 110 176 158;
  --layer-tint-hair: 210 172 122;
  --layer-tint-blur: 148 168 196;
  --layer-tint-gradient: 186 132 214;
  --layer-tint-raw: 122 186 186;
  overflow: hidden;
  color: var(--layers-text);
  border: 1px solid var(--layers-border-soft);
  border-radius: 12px;
  background: var(--layers-bg);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layers {
  --layers-accent: #256da8;
  --layers-action: #256da8;
  --layers-bg: #edf1f4;
  --layers-surface: #fff;
  --layers-surface-hover: #f8fafc;
  --layers-surface-selected: #e8f3fc;
  --layers-border: #9dabb7;
  --layers-border-soft: #c6d0d8;
  --layers-text: #17212a;
  --layers-muted: #586875;
  --layers-danger: #a63c3c;
  --layer-tint-wash: 8%;
  --layer-tint-adjustment: 56 122 176;
  --layer-tint-paint: 176 92 108;
  --layer-tint-liquify: 126 88 176;
  --layer-tint-skin: 176 108 108;
  --layer-tint-face: 46 122 104;
  --layer-tint-hair: 168 118 48;
  --layer-tint-blur: 72 108 148;
  --layer-tint-gradient: 126 64 168;
  --layer-tint-raw: 32 138 148;
  box-shadow: inset 0 1px #fff, 0 1px 2px rgb(31 44 56 / 8%);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layers {
  --layers-accent: #c45c58;
  --layers-action: #9a3f3c;
  --layers-bg: #f3ddd8;
  --layers-surface: #fff8f2;
  --layers-surface-hover: #fff1e6;
  --layers-surface-selected: #ffe7d6;
  --layers-border: #c48a6a;
  --layers-border-soft: #e0b9a4;
  --layers-text: #2a1a12;
  --layers-muted: #6a4a3a;
  --layers-danger: #9a3f3c;
  --layer-tint-wash: 10%;
  --layer-tint-adjustment: 70 130 170;
  --layer-tint-paint: 196 82 74;
  --layer-tint-liquify: 148 82 186;
  --layer-tint-skin: 210 120 110;
  --layer-tint-face: 70 140 118;
  --layer-tint-hair: 196 140 48;
  --layer-tint-blur: 88 118 150;
  --layer-tint-gradient: 148 72 176;
  --layer-tint-raw: 90 148 86;
  box-shadow: inset 0 1px #fff8f2, 0 1px 2px rgb(90 40 20 / 10%);
}

:is(#props_container, #floating_panels) .adjustment-layers-toolbar {
  min-height: 42px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--layers-border-soft);
  background: var(--layers-surface);
}

:is(#props_container, #floating_panels) .adjustment-layer-opacity {
  grid-template-columns: 48px minmax(70px, 1fr) 38px;
  gap: 9px;
  color: var(--layers-muted);
}

:is(#props_container, #floating_panels) .adjustment-layer-opacity output {
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .gaussian-blur-radius {
  margin: 4px 0 6px;
  padding-right: 4px;
}

:is(#props_container, #floating_panels) .gaussian-blur-radius span,
:is(#props_container, #floating_panels) .gaussian-blur-radius output {
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .gradient-layer-card {
  display: grid;
  gap: 10px;
  margin: 2px 0 8px;
  padding: 4px 2px 2px;
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .gradient-layer-card > p {
  margin: 0;
  color: var(--layers-text);
  font-size: 12px;
  line-height: 1.45;
}

:is(#props_container, #floating_panels) .gradient-layer-card__kinds {
  display: flex;
  gap: 6px;
}

:is(#props_container, #floating_panels) .gradient-layer-card__kinds button,
:is(#props_container, #floating_panels) .gradient-layer-card__stops button,
:is(#props_container, #floating_panels) .gradient-layer-card > button {
  min-height: 28px;
  padding: 0 10px;
  color: var(--layers-text);
  border: 1px solid var(--layers-border);
  border-radius: 7px;
  background: var(--layers-surface);
  cursor: pointer;
}

:is(#props_container, #floating_panels) .gradient-layer-card__kinds button.is-active {
  border-color: rgb(var(--layer-tint) / 72%);
  background: color-mix(in srgb, rgb(var(--layer-tint)) 22%, var(--layers-surface));
}

:is(#props_container, #floating_panels) .gradient-layer-card__stops {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(#props_container, #floating_panels) .gradient-layer-card__stops li {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--layers-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--layers-surface) 88%, rgb(var(--layer-tint)));
}

:is(#props_container, #floating_panels) .gradient-layer-card__stop-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

:is(#props_container, #floating_panels) .gradient-layer-card__color {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--layers-text);
  font-size: 11px;
}

:is(#props_container, #floating_panels) .gradient-layer-card input {
  pointer-events: auto;
}

:is(#props_container, #floating_panels) .gradient-layer-card__stops input[type='color'] {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--layers-border);
  border-radius: 6px;
  background: var(--layers-surface);
  cursor: pointer;
  pointer-events: auto;
}

:is(#props_container, #floating_panels) .gradient-layer-card__slider {
  padding: 0;
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .gradient-layer-card__slider output {
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .gradient-layer-card__stops button:disabled,
:is(#props_container, #floating_panels) .gradient-layer-card > button:disabled {
  color: var(--layers-muted);
  cursor: default;
}

:is(#props_container, #floating_panels) .adjustment-layers-stack {
  max-height: min(520px, calc(100vh - 190px));
  gap: 8px;
  padding: 12px;
  background: var(--layers-bg);
}

:is(#props_container, #floating_panels) .adjustment-layer {
  --layer-tint: var(--layer-tint-adjustment);
  --layer-accent: var(--layer-tint);
  overflow: hidden;
  color: var(--layers-text);
  border: 1px solid color-mix(in srgb, rgb(var(--layer-tint)) 26%, var(--layers-border-soft));
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(var(--layer-tint) / var(--layer-tint-wash)) 0%, transparent 64%),
    var(--layers-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

:is(#props_container, #floating_panels) .adjustment-layer--adjustment {
  --layer-tint: var(--layer-tint-adjustment);
}

:is(#props_container, #floating_panels) .adjustment-layer--paint {
  --layer-tint: var(--layer-tint-paint);
}

:is(#props_container, #floating_panels) .adjustment-layer--liquify {
  --layer-tint: var(--layer-tint-liquify);
}

:is(#props_container, #floating_panels) .adjustment-layer--skin-smoothing {
  --layer-tint: var(--layer-tint-skin);
}

:is(#props_container, #floating_panels) .adjustment-layer--face-retouch {
  --layer-tint: var(--layer-tint-face);
}

:is(#props_container, #floating_panels) .adjustment-layer--hair-cleanup {
  --layer-tint: var(--layer-tint-hair);
}

:is(#props_container, #floating_panels) .adjustment-layer--gaussian-blur {
  --layer-tint: var(--layer-tint-blur);
}

:is(#props_container, #floating_panels) .adjustment-layer--gradient {
  --layer-tint: var(--layer-tint-gradient);
}

:is(#props_container, #floating_panels) .adjustment-layer--raw-processing {
  --layer-tint: var(--layer-tint-raw);
}

:is(#props_container, #floating_panels) .adjustment-layer:hover:not(.adjustment-layer--selected) {
  border-color: color-mix(in srgb, rgb(var(--layer-tint)) 40%, var(--layers-border));
  background:
    linear-gradient(180deg, rgb(var(--layer-tint) / 16%) 0%, transparent 64%),
    var(--layers-surface-hover);
  box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
}

:is(#props_container, #floating_panels) .adjustment-layer--selected,
:is(#props_container, #floating_panels) .adjustment-layer--selected:hover {
  border-color: rgb(var(--layer-tint) / 62%);
  background:
    linear-gradient(180deg, rgb(var(--layer-tint) / 22%) 0%, transparent 70%),
    var(--layers-surface-selected);
  box-shadow:
    0 0 0 1px rgb(var(--layer-tint) / 42%),
    0 0 10px rgb(var(--layer-tint) / 46%),
    0 0 22px rgb(var(--layer-tint) / 24%);
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden {
  --layer-tint-wash: 5%;
  background:
    linear-gradient(180deg, rgb(var(--layer-tint) / 5%) 0%, transparent 64%),
    var(--layers-bg);
}

:is(#props_container, #floating_panels) .adjustment-layer--selected.adjustment-layer--hidden {
  border-color: rgb(var(--layer-tint) / 50%);
  background:
    linear-gradient(180deg, rgb(var(--layer-tint) / 16%) 0%, transparent 70%),
    var(--layers-bg);
  box-shadow:
    0 0 0 1px rgb(var(--layer-tint) / 32%),
    0 0 10px rgb(var(--layer-tint) / 34%),
    0 0 22px rgb(var(--layer-tint) / 16%);
}

:is(#props_container, #floating_panels) .adjustment-layer--hidden .adjustment-layer-name,
:is(#props_container, #floating_panels) .adjustment-layer--hidden .adjustment-layer-meta {
  color: var(--layers-muted);
}

:is(#props_container, #floating_panels) .adjustment-layer-main {
  min-height: 52px;
  grid-template-columns: 30px 18px 34px 26px minmax(0, 1fr) 30px;
  gap: 4px;
  padding: 5px 7px 5px 6px;
}

:is(#props_container, #floating_panels) .adjustment-layer-main--with-edit {
  grid-template-columns: 30px 18px 34px 26px minmax(0, 1fr) 30px 30px;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility,
:is(#props_container, #floating_panels) .adjustment-layer-disclosure,
:is(#props_container, #floating_panels) .adjustment-layer-trash,
:is(#props_container, #floating_panels) .adjustment-layer-edit {
  color: var(--layers-muted);
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility {
  width: 30px;
  height: 34px;
  border-radius: 7px;
}

:is(#props_container, #floating_panels) .adjustment-layer-visibility:hover {
  color: var(--layers-accent);
  background: color-mix(in srgb, var(--layers-accent) 12%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-disclosure {
  width: 18px;
  height: 34px;
  font-size: 15px;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail {
  width: 34px;
  height: 36px;
  color: var(--layers-accent);
  border-color: var(--layers-border);
  border-radius: 8px;
  background: var(--layers-bg);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail > .preset-group-icon {
  width: 20px;
  height: 20px;
  color: currentcolor;
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--adjustment {
  border-color: color-mix(in srgb, var(--layers-accent) 52%, var(--layers-border));
  background: color-mix(in srgb, var(--layers-accent) 11%, var(--layers-bg));
}

:is(#props_container, #floating_panels) .adjustment-layer-thumbnail--adjustment::before {
  width: 17px;
  height: 17px;
  border-color: color-mix(in srgb, var(--layers-text) 82%, transparent);
  background: linear-gradient(90deg, var(--layers-text) 50%, var(--layers-bg) 50%);
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail {
  width: 26px;
  height: 32px;
  color: var(--layers-muted);
  border-color: var(--layers-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--layers-text) 8%, var(--layers-bg));
}

:is(#props_container, #floating_panels) .adjustment-layer-mask-thumbnail > .preset-group-icon {
  width: 16px;
  height: 16px;
}

:is(#props_container, #floating_panels) button.adjustment-layer-mask-thumbnail:hover:not(.adjustment-layer-mask-thumbnail--edited) {
  color: var(--layers-accent);
  background: color-mix(in srgb, var(--layers-accent) 12%, var(--layers-bg));
}

:is(#props_container, #floating_panels) .adjustment-layer-copy {
  gap: 3px;
  padding-left: 3px;
}

:is(#props_container, #floating_panels) .adjustment-layer-name {
  min-height: 20px;
  color: var(--layers-text);
  font-size: 11.5px;
  font-weight: 720;
}

:is(#props_container, #floating_panels) .adjustment-layer-name:hover .adjustment-layer-grip,
:is(#props_container, #floating_panels) .adjustment-layer-name:focus-visible .adjustment-layer-grip {
  opacity: 1;
}

:is(#props_container, #floating_panels) .adjustment-layer-meta,
:is(#props_container, #floating_panels) .adjustment-layer-chip {
  color: var(--layers-muted);
}

:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-trash,
:is(#props_container, #floating_panels) .adjustment-layer-main > .adjustment-layer-edit {
  width: 30px;
  height: 34px;
  border-radius: 7px;
}

:is(#props_container, #floating_panels) .adjustment-layer-trash:hover:not(:disabled) {
  color: var(--layers-danger);
  background: color-mix(in srgb, var(--layers-danger) 12%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-edit:hover:not(:disabled) {
  color: var(--layers-accent);
  background: color-mix(in srgb, var(--layers-accent) 12%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-effects {
  position: relative;
  gap: 1px;
  margin: 0;
  padding: 4px 7px 7px 68px;
  border-top: 1px solid var(--layers-border-soft);
  background: color-mix(in srgb, var(--layers-bg) 62%, var(--layers-surface));
}

:is(#props_container, #floating_panels) .adjustment-layer-effects::before {
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 51px;
  width: 1px;
  background: var(--layers-border);
  content: '';
}

:is(#props_container, #floating_panels) .adjustment-layer-effect {
  position: relative;
  min-height: 40px;
  grid-template-columns: 26px minmax(0, 1fr) 62px;
  gap: 7px;
  padding: 3px 3px 3px 0;
  border: 0;
  border-radius: 7px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect::before {
  position: absolute;
  top: 20px;
  left: -17px;
  width: 14px;
  height: 1px;
  background: var(--layers-border);
  content: '';
}

:is(#props_container, #floating_panels) .adjustment-layer-effect:hover {
  background: color-mix(in srgb, var(--layers-accent) 8%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect--hidden {
  color: var(--layers-muted);
  background: transparent;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-icon {
  display: grid;
  width: 26px;
  height: 30px;
  place-items: center;
  color: var(--layers-accent);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-icon > .preset-group-icon {
  width: 18px;
  height: 18px;
  color: currentcolor;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy {
  align-content: center;
  gap: 2px;
  color: var(--layers-text);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 10.5px;
  font-weight: 680;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy small {
  overflow: hidden;
  color: var(--layers-muted);
  font-size: 9.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy--button {
  min-height: 34px;
  border-radius: 5px;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-copy--button:hover strong {
  color: var(--layers-accent);
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-actions {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  justify-content: end;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility,
:is(#props_container, #floating_panels) .adjustment-layer-effect-actions .adjustment-layer-trash {
  width: 30px;
  height: 32px;
  color: var(--layers-muted);
  border: 0;
  border-radius: 6px;
  background: transparent;
}

:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility:hover:not(:disabled),
:is(#props_container, #floating_panels) .adjustment-layer-effect-visibility[aria-pressed='true'] {
  color: var(--layers-accent);
  background: color-mix(in srgb, var(--layers-accent) 12%, transparent);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer {
  min-height: 50px;
  gap: 5px;
  padding: 7px 8px;
  border-top: 1px solid var(--layers-border-soft);
  background: var(--layers-surface);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action {
  width: 34px;
  height: 34px;
  color: var(--layers-muted);
  border: 1px solid var(--layers-border-soft);
  border-radius: 8px;
  background: var(--layers-bg);
  font-size: 15px;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action:hover:not(:disabled) {
  color: var(--layers-text);
  border-color: var(--layers-border);
  background: var(--layers-surface-hover);
  transform: translateY(-1px);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action .preset-group-icon {
  width: 17px;
  height: 17px;
  color: inherit;
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--liquify {
  color: rgb(174 146 214);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--skin {
  color: rgb(214 166 158);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--face {
  color: rgb(110 176 158);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--paint {
  color: rgb(118 172 214);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--hair {
  color: rgb(210 172 122);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--blur {
  color: rgb(148 168 196);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--gradient {
  color: rgb(186 132 214);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--liquify {
  color: rgb(126 88 176);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--skin {
  color: rgb(176 108 108);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--face {
  color: rgb(46 122 104);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--paint {
  color: rgb(56 122 176);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--hair {
  color: rgb(168 118 48);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--blur {
  color: rgb(72 108 148);
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--gradient {
  color: rgb(126 64 168);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--liquify {
  color: rgb(148 82 186);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--skin {
  color: rgb(210 120 110);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--face {
  color: rgb(70 140 118);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--paint {
  color: rgb(70 130 170);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--hair {
  color: rgb(196 140 48);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--blur {
  color: rgb(70 98 132);
}

body.food-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--gradient {
  color: rgb(126 48 128);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--primary {
  display: flex;
  width: auto;
  min-width: 84px;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  color: #fff;
  border-color: color-mix(in srgb, var(--layers-action) 78%, #fff);
  background: var(--layers-action);
  box-shadow: inset 0 1px rgb(255 255 255 / 20%);
}

:is(#props_container, #floating_panels) .adjustment-layer-footer-action--primary strong {
  font-size: 10px;
  font-weight: 720;
}

body.light-theme :is(#props_container, #floating_panels) .adjustment-layer-footer-action--primary {
  color: #fff;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effects {
  margin: 0;
  padding-left: 78px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effects::before {
  left: 58px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect {
  min-height: 48px;
  grid-template-columns: 36px minmax(0, 1fr) 92px;
  gap: 6px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect::before {
  top: 24px;
  left: -20px;
  width: 17px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect-icon {
  width: 36px;
  height: 42px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect-actions {
  grid-template-columns: repeat(2, 46px);
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-effect-actions .adjustment-layer-trash {
  width: 46px;
  height: 46px;
}

body.phone-layout :is(#props_container, #floating_panels) .adjustment-layer-footer-action--primary {
  width: auto;
  min-width: 108px;
  padding: 0 12px;
}

/* StudioHeader & Command Palette - Universal Progressive-Disclosure UX Styling */
.studio-header {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--studio-header-height);
  padding: 0 16px;
  background: rgba(18, 19, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  z-index: 99980;
}

.studio-header__left, .studio-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.studio-header__right {
  gap: 8px;
}

.studio-header__panel-launcher-slot,
.studio-header__panel-launchers {
  display: flex;
  align-items: center;
}

.studio-header__panel-launchers {
  gap: 4px;
}

.studio-header__panel-launchers .panel-library-trigger {
  position: static;
  width: 30px;
  height: 30px;
  opacity: 1;
  border-color: rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 4%);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}

.studio-header__panel-launchers .panel-library-trigger:hover,
.studio-header__panel-launchers .panel-library-trigger:focus-visible,
.studio-header__panel-launchers .panel-library-trigger--dragging {
  transform: none;
}

.studio-header__panel-launchers .panel-library-trigger:hover,
.studio-header__panel-launchers .panel-library-trigger:focus-visible {
  color: #fff;
  border-color: rgb(98 168 255 / 42%);
  background: rgb(255 255 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(98 168 255 / 8%);
}

.studio-header__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.studio-header__logo-icon {
  color: #3b82f6;
  font-size: 14px;
}

.studio-header__version-badge {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.studio-header__workflow-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.studio-header__step-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  touch-action: manipulation;
}

.studio-header__step-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.studio-header__step-btn.is-active {
  color: #fff;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.studio-header__action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  touch-action: manipulation;
}

.studio-header__action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.studio-header__action-btn.is-active {
  background: rgba(59, 130, 246, 0.25);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.5);
}

.studio-header__photo-navigation {
  height: 28px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 1px;
  color: rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.studio-header__photo-navigation button {
  width: 25px;
  height: 24px;
  display: grid;
  padding: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.studio-header__photo-navigation button:hover:not(:disabled) {
  background: rgb(255 255 255 / 10%);
}

.studio-header__photo-navigation button:focus-visible {
  outline: 2px solid #78b7ff;
  outline-offset: -2px;
}

.studio-header__photo-navigation button:disabled {
  color: rgb(255 255 255 / 32%);
  cursor: default;
}

.studio-header__photo-position {
  min-width: 38px;
  display: inline-flex;
  justify-content: center;
  gap: 3px;
  color: rgb(255 255 255 / 68%);
  white-space: nowrap;
}

.studio-header__photo-position strong {
  color: #fff;
  font-weight: 700;
}

.studio-header__kbd {
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.5);
}

.studio-header__mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-header__mode-btn {
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}

.studio-header__mode-btn:hover {
  color: #fff;
}

.studio-header__mode-btn.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Command Palette Backdrop & Modal */
.command-palette__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: 99999;
}

.command-palette__modal {
  width: 580px;
  max-width: 90vw;
  background: #18191c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.command-palette__search-wrapper {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 10px;
}

.command-palette__search-icon {
  color: rgba(255, 255, 255, 0.4);
}

.command-palette__input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.command-palette__esc-kbd {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.command-palette__results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 0;
}

.command-palette__empty {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.command-palette__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 100ms ease;
}

.command-palette__item.is-selected, .command-palette__item:hover {
  background: rgba(59, 130, 246, 0.2);
}

.command-palette__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-palette__item-title {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.command-palette__item-category {
  font-size: 10px;
  color: rgba(59, 130, 246, 0.9);
  background: rgba(59, 130, 246, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.command-palette__item-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.command-palette__item-kbd {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* StudioDeck Visual Quick Controls Styling */
.studio-deck {
  padding: 16px;
  background: rgba(20, 22, 26, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  user-select: none;
  z-index: 990;
}

.studio-deck__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.studio-deck__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-deck__title {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.studio-deck__badge {
  font-size: 10px;
  color: rgba(59, 130, 246, 0.9);
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.studio-deck__reset-all-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: color 150ms;
}

.studio-deck__reset-all-btn:hover {
  color: #ef4444;
}

.studio-deck__quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.studio-deck__action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}

.studio-deck__action-card:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.studio-deck__card-icon {
  font-size: 20px;
}

.studio-deck__action-card strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.studio-deck__action-card small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.studio-deck__film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.studio-deck__film-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 150ms ease;
}

.studio-deck__film-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: scale(1.02);
}

.studio-deck__film-swatch {
  height: 48px;
  width: 100%;
}

.studio-deck__film-info {
  padding: 8px 10px;
}

.studio-deck__film-info strong {
  display: block;
  font-size: 12px;
  color: #fff;
}

.studio-deck__film-info span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.studio-deck__sliders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.studio-deck__slider-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
  border-radius: 8px;
}

.studio-deck__slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-deck__slider-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
}

.studio-deck__slider-value-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.studio-deck__slider-val {
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.studio-deck__inspect-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 120ms;
}

.studio-deck__inspect-btn:hover, .studio-deck__inspect-btn.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.studio-deck__slider-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.studio-deck__slider-track::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 100ms;
}

.studio-deck__slider-track::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.studio-deck__inline-inspect {
  margin-top: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border-left: 2px solid #3b82f6;
}

.studio-deck__inspect-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
}

.studio-deck__inspect-badge {
  font-size: 9px;
  color: #3b82f6;
}

.studio-deck__inspect-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  line-height: 1.35;
}

/* Light mode overrides for Studio Header */
body.light-theme .studio-header {
  background: color-mix(in srgb, var(--main-bg-color) 85%, transparent);
  border-bottom-color: var(--button-border-color);
}
body.light-theme .studio-header__brand,
body.light-theme .studio-header__photo-position strong,
body.light-theme .studio-header__photo-navigation button {
  color: var(--main-text-color-deep);
}
body.light-theme .studio-header__version-badge,
body.light-theme .studio-header__step-btn,
body.light-theme .studio-header__photo-position,
body.light-theme .studio-header__photo-navigation button:disabled,
body.light-theme .studio-header__mode-btn {
  color: var(--button-text-inactive-color);
}
body.light-theme .studio-header__workflow-nav,
body.light-theme .studio-header__action-btn,
body.light-theme .studio-header__photo-navigation,
body.light-theme .studio-header__mode-toggle,
body.light-theme .studio-header__panel-launchers .panel-library-trigger,
body.light-theme .studio-header__kbd {
  background: var(--button-bg-color);
  border-color: var(--button-border-color);
  color: var(--button-text-color);
}
body.light-theme .studio-header__step-btn:hover,
body.light-theme .studio-header__action-btn:hover,
body.light-theme .studio-header__mode-btn:hover,
body.light-theme .studio-header__photo-navigation button:hover:not(:disabled),
body.light-theme .studio-header__panel-launchers .panel-library-trigger:hover,
body.light-theme .studio-header__panel-launchers .panel-library-trigger:focus-visible {
  color: var(--button-text-hover-color);
  background: var(--hover-button-bg-color);
}
body.light-theme .studio-header__step-btn.is-active,
body.light-theme .studio-header__action-btn.is-active,
body.light-theme .studio-header__mode-btn.is-active {
  color: var(--selected-control-text-color);
  background: var(--active-button-bg-color);
  border-color: var(--button-border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
body.light-theme .studio-header__panel-launchers .panel-library-trigger:hover,
body.light-theme .studio-header__panel-launchers .panel-library-trigger:focus-visible {
  box-shadow: inset 0 0 0 1px var(--button-border-color);
}
.gallery-panel {
  --gallery-accent: #448ee4;
  --gallery-accent-soft: rgb(68 142 228 / 16%);
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  --gallery-toolbar: color-mix(in srgb, var(--main-bg-color) 70%, transparent);
  box-sizing: border-box;
  container-name: gallery-panel;
  container-type: inline-size;
  overflow: hidden;
  background: var(--gallery-surface);
  color: var(--button-text-color);
}

/* Shoot timing overview --------------------------------------------------- */
.shoot-timeline {
  grid-column: 1 / -1;
  overflow: visible;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(0 0 0 / 5%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
}

.shoot-timeline-pane {
  --gallery-accent: #448ee4;
  --gallery-accent-soft: rgb(68 142 228 / 16%);
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  min-height: 100%;
  padding: 8px;
  background: var(--gallery-surface, var(--main-bg-color));
}

body.dark-theme .shoot-timeline-pane {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.shoot-timeline-pane > .shoot-timeline {
  margin: 0;
}

.shoot-timeline-pane__empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--button-text-inactive-color);
  text-align: center;
}

.shoot-timeline-pane__empty strong {
  margin-bottom: 5px;
  color: var(--button-text-color);
}

/* Lens statistics -------------------------------------------------------- */
.lens-statistics-pane {
  --gallery-accent: #448ee4;
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  min-height: 100%;
  padding: 8px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
}

body.dark-theme .lens-statistics-pane {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.lens-statistics__header {
  position: relative;
  z-index: 6;
  display: flex;
  min-height: 48px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
}

.lens-statistics__header > div:first-child,
.lens-statistics__totals {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.lens-statistics__header-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lens-statistics__header > div:first-child strong {
  font-size: 12px;
}

.lens-statistics__header > div:first-child span,
.lens-statistics__totals span {
  margin-top: 2px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.lens-statistics__totals {
  align-items: flex-end;
}

.lens-statistics__totals strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lens-statistics__year-filter {
  position: relative;
  flex: 0 0 auto;
}

.lens-statistics__year-filter summary {
  display: flex;
  min-width: 82px;
  height: 28px;
  padding: 4px 7px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid var(--gallery-border);
  border-radius: 4px;
  color: var(--button-text-color);
  background: var(--button-bg-color);
  box-shadow: 0 1px 0 rgb(255 255 255 / 10%) inset;
  cursor: pointer;
  font-size: 9px;
  list-style: none;
  white-space: nowrap;
}

.lens-statistics__year-filter summary::-webkit-details-marker {
  display: none;
}

.lens-statistics__year-filter summary:hover,
.lens-statistics__year-filter[open] summary {
  border-color: var(--button-border-color);
  background: var(--hover-button-bg-color);
}

.lens-statistics__year-filter summary i {
  color: var(--button-text-inactive-color);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  transition: transform 120ms ease;
}

.lens-statistics__year-filter[open] summary i {
  transform: rotate(180deg);
}

.lens-statistics__year-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  width: 192px;
  max-height: 188px;
  padding: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--button-border-color);
  border-radius: 6px;
  background: var(--main-bg-color);
  box-shadow: 0 10px 28px rgb(0 0 0 / 38%);
}

body.dark-theme .lens-statistics__year-menu {
  background: var(--main-bg-color-props);
}

.lens-statistics__year-menu button {
  min-width: 0;
  height: 28px;
  padding: 3px 5px;
  border: 1px solid var(--gallery-border);
  border-radius: 4px;
  color: var(--button-text-inactive-color);
  background: var(--button-bg-color);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.lens-statistics__year-menu button:hover,
.lens-statistics__year-menu button:focus-visible {
  border-color: var(--button-border-color);
  color: var(--button-text-color);
  background: var(--hover-button-bg-color);
}

.lens-statistics__year-menu button[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--gallery-accent) 70%, var(--gallery-border));
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--gallery-accent) 18%, var(--button-bg-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 16%, transparent) inset;
}

.lens-statistics__year-menu .lens-statistics__year-all {
  grid-column: 1 / -1;
}

.lens-statistics__body {
  position: relative;
  padding-top: 8px;
}

.lens-statistics__jump-bar {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gallery-surface) 94%, transparent);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 12%),
    0 1px 0 rgb(255 255 255 / 7%) inset;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.lens-statistics__jump-bar button {
  display: grid;
  min-width: 106px;
  max-width: 148px;
  height: 36px;
  padding: 4px 6px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--gallery-border) 74%, transparent);
  border-radius: 4px;
  color: var(--button-text-color);
  background: var(--gallery-surface-raised);
  box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
  text-align: left;
}

.lens-statistics__jump-bar button:hover,
.lens-statistics__jump-bar button:focus-visible {
  border-color: var(--button-border-color);
  background: var(--hover-button-bg-color);
}

.lens-statistics__jump-icon {
  width: 22px;
  height: 22px;
  fill: color-mix(in srgb, currentColor 13%, transparent);
  stroke: currentColor;
  stroke-width: 1.4;
}

.lens-statistics__jump-bar button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.lens-statistics__jump-bar strong,
.lens-statistics__jump-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-statistics__jump-bar strong {
  font-size: 9px;
  line-height: 1.15;
}

.lens-statistics__jump-bar small {
  margin-top: 2px;
  color: var(--button-text-inactive-color);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

.lens-statistics__explanation {
  margin: 0 2px 7px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.35;
}

.lens-statistics__list {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.lens-statistics__lens {
  overflow: hidden;
  padding: 9px;
  scroll-margin-top: 54px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.lens-statistics__lens-heading,
.lens-statistics__lens-name,
.lens-statistics__lens-total,
.lens-statistics__lens-meta {
  display: flex;
  align-items: center;
}

.lens-statistics__lens-heading {
  justify-content: space-between;
  gap: 10px;
}

.lens-statistics__lens-name {
  min-width: 0;
  gap: 7px;
}

.lens-statistics__lens-name i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
}

.lens-statistics__lens-name strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-statistics__lens-total {
  flex: 0 0 auto;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}

.lens-statistics__lens-total strong {
  font-size: 11px;
}

.lens-statistics__lens-total span {
  min-width: 40px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  text-align: right;
}

.lens-statistics__ratio {
  overflow: hidden;
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-bg-color-deep) 32%, var(--gallery-surface));
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%) inset;
}

.lens-statistics__ratio span {
  display: block;
  min-width: 1px;
  height: 100%;
  border-radius: inherit;
}

.lens-statistics__lens-meta {
  gap: 5px;
  margin-top: 6px;
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.lens-statistics__lens-meta span + span::before {
  margin-right: 5px;
  content: '·';
}

.lens-statistics__sessions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-direction: column;
}

.lens-statistics__sessions button {
  display: grid;
  min-width: 0;
  min-height: 36px;
  padding: 5px 6px;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--gallery-border) 66%, transparent);
  border-radius: 4px;
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--main-bg-color) 78%, transparent);
  text-align: left;
}

.lens-statistics__sessions button:hover:not(:disabled),
.lens-statistics__sessions button:focus-visible {
  border-color: var(--button-border-color);
  background: var(--hover-button-bg-color);
}

.lens-statistics__sessions button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.lens-statistics__sessions button strong,
.lens-statistics__sessions button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-statistics__sessions button strong {
  font-size: 10px;
}

.lens-statistics__sessions button small {
  margin-top: 2px;
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.lens-statistics__sessions .lens-statistics__scan-badge {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 5px;
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, #d89b3c 48%, var(--gallery-border));
  border-radius: 999px;
  color: color-mix(in srgb, #d89b3c 82%, var(--button-text-color));
  background: color-mix(in srgb, #d89b3c 12%, transparent);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.lens-statistics__sessions button em {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.lens-statistics__sessions button b {
  color: var(--button-text-inactive-color);
  font-size: 12px;
  font-weight: normal;
}

.lens-statistics__empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-align: center;
}

.lens-statistics__empty strong {
  margin-bottom: 5px;
  color: var(--button-text-color);
  font-size: 11px;
}

.lens-statistics__empty span {
  max-width: 250px;
  line-height: 1.4;
}

@media (max-width: 420px) {
  .lens-statistics__header {
    align-items: flex-start;
  }

  .lens-statistics__header-controls {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: 5px;
  }
}

/* Sessions --------------------------------------------------------------- */
.sessions-pane {
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  --shoot-accent: #78a9cf;
  min-height: 100%;
  padding: 8px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
}

.sessions-pane,
.sessions-pane * {
  box-sizing: border-box;
}

body.dark-theme .sessions-pane {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
  --shoot-accent: #83b8df;
}

.sessions-pane__header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 48px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset;
  backdrop-filter: blur(10px);
}

.sessions-pane__header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sessions-pane__header > div strong {
  font-size: 12px;
}

.sessions-pane__header > div span {
  margin-top: 2px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.sessions-pane__year-picker {
  display: flex;
  min-width: 86px;
  height: 30px;
  padding: 0 7px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border: 1px solid var(--gallery-border);
  border-radius: 5px;
  background: var(--gallery-surface-raised);
}

.sessions-pane__year-picker > span {
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.sessions-pane__year-picker select {
  width: 51px;
  padding: 1px 0;
  border: 0;
  outline: 0;
  color: var(--button-text-color);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sessions-pane__summary {
  display: flex;
  min-height: 31px;
  padding: 6px 9px;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  border-bottom: 1px solid var(--gallery-border);
  flex: 0 0 auto;
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.sessions-pane__summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.sessions-pane__summary strong {
  color: var(--button-text-color);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.sessions-pane__months {
  display: grid;
  padding-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 8px;
}

.sessions-pane__month {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.sessions-pane__month-heading {
  display: flex;
  height: 32px;
  padding: 0 9px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--gallery-border);
  background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent);
}

.sessions-pane__month-heading strong {
  font-size: 11px;
}

.sessions-pane__month-heading span {
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.sessions-pane__weekdays,
.sessions-pane__calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sessions-pane__weekdays {
  height: 23px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--gallery-border) 70%, transparent);
  color: var(--button-text-inactive-color);
  font-size: 7px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.sessions-pane__calendar {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--gallery-border) 55%, transparent) 0);
  background-size: calc(100% / 7) 100%;
}

.sessions-pane__day,
.sessions-pane__day-spacer {
  min-width: 0;
  min-height: 72px;
  border-bottom: 1px solid color-mix(in srgb, var(--gallery-border) 55%, transparent);
}

.sessions-pane__day {
  padding: 4px 3px;
}

.sessions-pane__day > time {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--button-text-inactive-color);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

.sessions-pane__day--active {
  background: color-mix(in srgb, var(--shoot-accent) 4%, transparent);
}

.sessions-pane__day--active > time {
  color: var(--button-text-color);
  font-weight: 700;
}

.sessions-pane__day--today > time {
  color: #172737;
  background: var(--shoot-accent);
}

.sessions-pane__day-sessions {
  display: flex;
  min-width: 0;
  margin-top: 2px;
  flex-direction: column;
  gap: 2px;
}

.sessions-pane__session {
  display: grid;
  min-width: 0;
  height: 22px;
  padding: 2px 3px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--shoot-accent) 30%, var(--gallery-border));
  border-radius: 3px;
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--shoot-accent) 11%, var(--gallery-surface));
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  text-align: left;
}

.sessions-pane__session:hover,
.sessions-pane__session:focus-visible {
  z-index: 1;
  border-color: color-mix(in srgb, var(--shoot-accent) 72%, var(--button-border-color));
  outline: 0;
  background: color-mix(in srgb, var(--shoot-accent) 21%, var(--gallery-surface));
}

.sessions-pane__session span,
.sessions-pane__session small {
  color: var(--button-text-inactive-color);
  font-size: 6px;
  font-variant-numeric: tabular-nums;
}

.sessions-pane__session strong {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessions-pane__session small::after {
  content: 'p';
}

.sessions-pane__empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-align: center;
}

.sessions-pane__empty strong {
  margin-bottom: 5px;
  color: var(--button-text-color);
  font-size: 11px;
}

.sessions-pane__empty span {
  max-width: 250px;
  line-height: 1.4;
}

@media (max-width: 420px) {
  .sessions-pane__header {
    align-items: flex-start;
  }

  .sessions-pane__day,
  .sessions-pane__day-spacer {
    min-height: 62px;
  }

  .sessions-pane__session {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sessions-pane__session span {
    display: none;
  }
}

.shoot-timeline__header,
.shoot-timeline__summary,
.shoot-timeline__legend,
.shoot-timeline__track,
.shoot-timeline__group-label,
.shoot-timeline__nav button {
  display: flex;
  align-items: center;
}

.shoot-timeline__header {
  min-height: 36px;
  padding: 0 8px;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%));
  border-radius: 6px 6px 0 0;
}

.shoot-timeline--collapsed .shoot-timeline__header { border-bottom: 0; border-radius: 6px; }

.shoot-timeline__collapse {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  border: 0;
  color: var(--button-text-color);
  background: transparent;
  font-size: 11px;
}

.shoot-timeline__collapse > span {
  width: 12px;
  color: var(--button-text-inactive-color);
  font-size: 15px;
}

.shoot-timeline__summary {
  gap: 7px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.shoot-timeline__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shoot-timeline__regenerate {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--gallery-border);
  border-radius: 4px;
  color: var(--button-text-color);
  background: var(--button-bg-color);
  font-size: 9px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 16%) inset;
}

.shoot-timeline__regenerate:hover {
  border-color: var(--button-border-color);
  background: var(--hover-button-bg-color);
}

.shoot-timeline__regenerate > span {
  color: var(--button-text-inactive-color);
  font-size: 13px;
  line-height: 1;
}

.shoot-timeline__summary strong { color: var(--button-text-color); font-size: 11px; }
.shoot-timeline__summary span + span::before { margin-right: 7px; color: var(--button-text-inactive-color); content: '·'; }
.shoot-timeline__analyzing { color: var(--button-text-inactive-color); font-size: 10px; }
.shoot-timeline__body { padding: 8px; }

.shoot-timeline__nav {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 5px;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--gallery-border) 72%, transparent);
}

.shoot-timeline__nav button {
  position: relative;
  min-width: 0;
  min-height: 32px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--button-text-color);
  background: transparent;
}

.shoot-timeline__nav button:last-child { justify-content: flex-end; text-align: right; }
.shoot-timeline__nav button:hover:not(:disabled) { border-color: var(--gallery-border); background: rgb(255 255 255 / 7%); }
.shoot-timeline__nav button:disabled { opacity: .3; }
.shoot-timeline__nav button span, .shoot-timeline__title { min-width: 0; }
.shoot-timeline__nav small, .shoot-timeline__nav button strong, .shoot-timeline__title strong, .shoot-timeline__title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shoot-timeline__nav small, .shoot-timeline__title span { color: var(--button-text-inactive-color); font-size: 9px; }
.shoot-timeline__nav button strong { margin-top: 1px; font-size: 10px; }
.shoot-timeline__title { text-align: center; }
.shoot-timeline__title strong { font-size: 12px; }
.shoot-timeline__title span { margin-top: 2px; }

.shoot-timeline__nav-shoot {
  display: grid !important;
  width: 32px;
  height: 32px;
  justify-self: start;
  place-items: center;
  cursor: pointer;
}

.shoot-timeline__nav-shoot--next {
  justify-self: end;
}

.shoot-timeline__nav-arrow {
  color: var(--button-text-inactive-color);
  font-size: 18px;
  line-height: 1;
}

.shoot-timeline__nav-shoot:hover:not(:disabled) .shoot-timeline__nav-arrow,
.shoot-timeline__nav-shoot:focus-visible .shoot-timeline__nav-arrow {
  color: var(--button-text-color);
}

.shoot-timeline__nav-details {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  left: 0;
  display: grid !important;
  visibility: hidden;
  width: 286px;
  min-height: 98px;
  padding: 8px;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  color: var(--button-text-color);
  background: var(--main-bg-color);
  box-shadow: 0 8px 24px rgb(0 0 0 / 42%);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-2px);
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    visibility 0s linear 100ms;
}

body.dark-theme .shoot-timeline__nav-details {
  background: var(--main-bg-color-props);
}

.shoot-timeline__nav-shoot--next .shoot-timeline__nav-details {
  right: 0;
  left: auto;
}

.shoot-timeline__nav-shoot:hover .shoot-timeline__nav-details,
.shoot-timeline__nav-shoot:focus-visible .shoot-timeline__nav-details {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.shoot-timeline__directory-preview {
  display: grid !important;
  overflow: hidden;
  width: 84px;
  height: 84px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border: 1px solid var(--gallery-border);
  border-radius: 3px;
  background: color-mix(in srgb, var(--main-bg-color-deep) 28%, var(--gallery-surface));
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.shoot-timeline__directory-preview--1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.shoot-timeline__directory-preview--2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

.shoot-timeline__directory-preview--3 > span:first-child {
  grid-row: 1 / 3;
}

.shoot-timeline__directory-preview > span {
  display: block;
  overflow: hidden;
  min-width: 0;
  border: .5px solid color-mix(in srgb, var(--gallery-surface) 62%, transparent);
}

.shoot-timeline__directory-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shoot-timeline__directory-preview .shoot-timeline__directory-preview-fallback {
  display: grid;
  color: var(--button-text-inactive-color);
  font-size: 30px;
  place-items: center;
}

.shoot-timeline__nav-copy {
  display: grid !important;
  align-content: center;
  min-width: 0;
}

.shoot-timeline__nav .shoot-timeline__nav-copy strong {
  display: block;
  overflow: visible;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.shoot-timeline__nav-copy > span {
  display: block;
  margin-top: 3px;
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.2;
  white-space: normal;
}

.shoot-timeline__orientation-stats {
  display: flex;
  gap: 12px;
  margin-top: 7px;
  justify-content: flex-end;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.shoot-timeline__orientation-stats span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.shoot-timeline__orientation-stats strong {
  color: var(--button-text-color);
  font-size: 10px;
}

.shoot-timeline__orientation-mark {
  display: inline-block;
  border-radius: 1px;
  background: var(--button-text-color);
  opacity: .7;
}

.shoot-timeline__orientation-mark--portrait { width: 2px; height: 11px; }
.shoot-timeline__orientation-mark--landscape { width: 11px; height: 3px; }

.shoot-timeline__legend {
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 5px 0 8px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.shoot-timeline__legend span { display: inline-flex; gap: 5px; align-items: center; }
.shoot-timeline__legend i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 18%); }
.shoot-timeline__legend em { margin-left: auto; opacity: .75; font-style: normal; }
.shoot-timeline__groups { display: flex; flex-direction: column; gap: 7px; }

.shoot-timeline__group {
  display: flex;
  gap: 4px;
  flex-direction: column;
}

.shoot-timeline__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.shoot-timeline__group-label { align-items: flex-start; flex-direction: column; color: var(--button-text-inactive-color); font-size: 8px; line-height: 1.2; }
.shoot-timeline__group-label strong { color: var(--button-text-color); font-size: 10px; font-variant-numeric: tabular-nums; }

.shoot-timeline__track {
  --shoot-timeline-darkness: .12;
  --shoot-timeline-light-color: rgb(255 244 220);
  --shoot-timeline-light-strength: 18%;
  position: relative;
  min-width: 0;
  min-height: 29px;
  padding: 3px;
  border: 1px solid var(--gallery-border);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(10% - .5px),
      color-mix(in srgb, var(--gallery-border) 34%, transparent) calc(10% - .5px),
      color-mix(in srgb, var(--gallery-border) 34%, transparent) 10%
    ),
    linear-gradient(rgb(0 0 0 / var(--shoot-timeline-darkness))),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--shoot-timeline-light-color) var(--shoot-timeline-light-strength),
        transparent
      ),
      transparent
    ),
    color-mix(in srgb, var(--main-bg-color-deep) 32%, var(--gallery-surface));
  box-shadow:
    0 1px 2px rgb(0 0 0 / 8%) inset,
    0 1px 0 color-mix(
      in srgb,
      var(--shoot-timeline-light-color) var(--shoot-timeline-light-strength),
      transparent
    ) inset;
  transition: background-color 160ms ease;
}

.shoot-timeline__track::before {
  position: absolute;
  top: 50%;
  right: 4px;
  left: 4px;
  height: 1px;
  background: color-mix(in srgb, var(--button-text-inactive-color) 30%, transparent);
  content: '';
}

.shoot-timeline__track-midpoint {
  display: none;
}

.shoot-timeline__photo {
  position: absolute;
  top: 50%;
  z-index: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 34%);
  transform: translate(-50%, -50%);
}

.shoot-timeline__photo--portrait {
  width: 4px;
  height: 18px;
  border-color: #111;
  transform: translate(-50%, calc(-50% + 2px));
}

.shoot-timeline__photo--landscape {
  width: 4px;
  height: 18px;
  border-color: #fff;
  transform: translate(-50%, calc(-50% - 2px));
}
.shoot-timeline__photo--square { width: 7px; height: 7px; }
.shoot-timeline__photo--unknown { width: 3px; height: 15px; border-style: dashed; }

.shoot-timeline:has(.shoot-timeline__photo--portrait:hover) .shoot-timeline__photo--portrait,
.shoot-timeline:has(.shoot-timeline__photo--portrait:focus-visible) .shoot-timeline__photo--portrait,
.shoot-timeline:has(.shoot-timeline__photo--landscape:hover) .shoot-timeline__photo--landscape,
.shoot-timeline:has(.shoot-timeline__photo--landscape:focus-visible) .shoot-timeline__photo--landscape {
  z-index: 3;
}

.shoot-timeline__photo:hover,
.shoot-timeline__photo:focus-visible {
  z-index: 4 !important;
  outline: 1px solid var(--button-text-color);
  outline-offset: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 48%);
}

.shoot-timeline__photo-popover {
  position: fixed;
  z-index: 2147483646;
  display: flex;
  width: 164px;
  padding: 6px;
  align-items: stretch;
  flex-direction: column;
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  color: var(--button-text-color);
  background: var(--main-bg-color);
  box-shadow: 0 10px 28px rgb(0 0 0 / 52%);
  pointer-events: none;
  text-align: left;
}

body.dark-theme .shoot-timeline__photo-popover { background: var(--main-bg-color-props); }

.shoot-timeline__photo-preview {
  display: flex;
  overflow: hidden;
  min-height: 72px;
  max-height: 180px;
  margin-bottom: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--button-border-color) 70%, transparent);
  border-radius: 3px;
  color: var(--button-text-inactive-color);
  background: color-mix(in srgb, var(--main-bg-color-deep) 72%, black);
  font-size: 9px;
}

.shoot-timeline__photo-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}

.shoot-timeline__photo-popover strong,
.shoot-timeline__photo-popover small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shoot-timeline__photo-popover strong { font-size: 10px; }
.shoot-timeline__photo-popover small { margin-top: 3px; color: var(--button-text-inactive-color); font-size: 9px; }
.shoot-timeline__photo-popover em { margin-top: 6px; color: var(--button-text-inactive-color); font-size: 8px; font-style: normal; }

.shoot-timeline__long-pause {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.shoot-timeline__long-pause > span {
  display: flex;
  align-items: center;
  flex-direction: column;
  white-space: nowrap;
}

.shoot-timeline__long-pause strong {
  color: var(--button-text-color);
  font-size: 9px;
}

.shoot-timeline__long-pause small {
  margin-top: 2px;
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.shoot-timeline__long-pause::before,
.shoot-timeline__long-pause::after {
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg, var(--gallery-border) 0 3px, transparent 3px 7px);
  content: '';
}

.shoot-timeline__empty {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-align: center;
}

.shoot-timeline__empty strong { margin-bottom: 3px; color: var(--button-text-color); font-size: 10px; }

@media (max-width: 620px) {
  .shoot-timeline__nav { grid-template-columns: 1fr 1fr; }
  .shoot-timeline__title { grid-column: 1 / -1; grid-row: 1; }
  .shoot-timeline__row { grid-template-columns: 58px minmax(0, 1fr); }
  .shoot-timeline__legend em { width: 100%; margin-left: 0; }
  .shoot-timeline__summary { display: none; }
}

body.dark-theme .gallery-panel {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
  --gallery-toolbar: #202224;
}

.gallery-panel *,
.gallery-panel *::before,
.gallery-panel *::after,
.gallery-memory-backdrop *,
.gallery-memory-backdrop *::before,
.gallery-memory-backdrop *::after {
  box-sizing: border-box;
}

.gallery-icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.gallery-toolbar {
  position: relative;
  min-height: 44px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--gallery-border);
  background: var(--gallery-toolbar);
}

.gallery-toolbar__location,
.gallery-toolbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.gallery-toolbar__location {
  flex: 0 0 auto;
}

.gallery-toolbar__actions {
  flex: 1 1 auto;
}

.gallery-toolbar__utilities {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.gallery-utility-menu {
  display: contents;
}

.gallery-utility-menu__trigger {
  display: none;
}

:is(#props_container, #floating_panels, #main_tabs_react)
  .gallery-toolbar__utilities > .preset-group-controls {
  position: static;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

:is(#props_container, #floating_panels, #main_tabs_react)
  .gallery-toolbar__utilities > .preset-group-controls .preset-group-control {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
}

.gallery-toolbar__status {
  max-width: 180px;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-file-input {
  display: none;
}

.gallery-add-menu {
  position: relative;
  display: flex;
}

.gallery-add-menu__trigger {
  min-width: 96px;
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 84%, #fff);
  border-radius: 7px;
  outline: 0;
  background: color-mix(in srgb, var(--gallery-accent) 88%, #172230);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--gallery-accent) 28%, transparent),
    inset 0 1px rgb(255 255 255 / 18%);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.gallery-add-menu__trigger:hover,
.gallery-add-menu__trigger[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--gallery-accent) 66%, #fff);
  background: color-mix(in srgb, var(--gallery-accent) 96%, #172230);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--gallery-accent) 40%, transparent),
    inset 0 1px rgb(255 255 255 / 24%);
}

.gallery-add-menu__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--gallery-surface),
    0 0 0 4px color-mix(in srgb, var(--gallery-accent) 68%, #fff);
}

.gallery-add-menu__chevron {
  margin-top: -2px;
  font-size: 13px;
  line-height: 1;
}

.gallery-add-menu__menu {
  position: absolute;
  z-index: 32;
  top: calc(100% + 5px);
  left: 50%;
  width: 248px;
  padding: 5px;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: var(--gallery-surface);
  box-shadow: 0 12px 34px rgb(0 0 0 / 38%);
  transform: translateX(-50%);
}

.gallery-add-menu__menu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 6px;
  content: '';
}

.gallery-add-menu__menu > button {
  width: 100%;
  min-height: 46px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: var(--button-text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-add-menu__menu > button:hover,
.gallery-add-menu__menu > button:focus-visible {
  background: var(--hover-button-bg-color);
}

.gallery-add-menu__menu > button:disabled {
  cursor: wait;
  opacity: .5;
}

.gallery-add-menu__menu > button.gallery-add-menu__more {
  margin-top: 4px;
  border-top: 1px solid var(--gallery-border);
  border-radius: 0 0 6px 6px;
}

.gallery-add-menu__menu > button > .gallery-icon {
  color: var(--gallery-accent);
}

.gallery-add-menu__menu > button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gallery-add-menu__menu strong,
.gallery-add-menu__menu small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-add-menu__menu strong {
  font-size: 11px;
}

.gallery-add-menu__menu small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.gallery-folder-picker {
  position: relative;
  min-width: 0;
  max-width: 280px;
  height: 30px;
  flex: 1 1 180px;
}

.gallery-folder-picker .gallery-icon {
  color: var(--props-text-color);
}

.gallery-folder-picker__trigger {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: 0;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font: inherit;
  cursor: pointer;
}

.gallery-folder-picker__trigger:hover,
.gallery-folder-picker__trigger[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--gallery-accent) 55%, var(--gallery-border));
}

.gallery-folder-picker__trigger:focus-visible {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-folder-picker__trigger > span:not(.gallery-folder-picker__chevron) {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-folder-picker__chevron {
  margin-top: -3px;
  flex: none;
  color: var(--button-text-inactive-color);
  font-size: 15px;
}

.gallery-folder-picker__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  width: max(100%, 230px);
  max-height: 280px;
  padding: 5px;
  overflow: auto;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: var(--gallery-surface);
  box-shadow: 0 12px 34px rgb(0 0 0 / 38%);
}

.gallery-folder-picker__option {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--button-text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-folder-picker__option:hover,
.gallery-folder-picker__option:focus-visible {
  outline: 0;
  background: var(--hover-button-bg-color);
}

.gallery-folder-picker__option[aria-selected='true'] {
  background: var(--gallery-accent-soft);
}

.gallery-folder-picker__option > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.gallery-folder-picker__option strong,
.gallery-folder-picker__option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-folder-picker__option strong {
  font-size: 10px;
  font-weight: 650;
}

.gallery-folder-picker__option small {
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.gallery-folder-picker__option i {
  color: var(--gallery-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.gallery-icon-button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--props-text-color);
  cursor: pointer;
}

.gallery-icon-button:hover {
  border-color: var(--gallery-border);
  background: var(--hover-button-bg-color);
  color: var(--button-text-color);
}

.gallery-icon-button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.gallery-prepare-control {
  position: relative;
  flex: 0 0 auto;
}

.gallery-prepare-button {
  position: relative;
  min-width: 68px;
  height: 30px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 72%, var(--gallery-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--gallery-accent) 16%, var(--gallery-surface-raised));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 8%, transparent);
  color: var(--button-text-color);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.gallery-prepare-control:hover .gallery-prepare-button,
.gallery-prepare-control:focus-within .gallery-prepare-button {
  border-color: color-mix(in srgb, var(--gallery-accent) 92%, #fff);
  background: color-mix(in srgb, var(--gallery-accent) 27%, var(--hover-button-bg-color));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--gallery-accent) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--gallery-accent) 32%, transparent);
  transform: translateY(-1px);
}

.gallery-prepare-button:disabled {
  opacity: 1;
  cursor: wait;
  transform: none;
}

.gallery-prepare-button__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--gallery-accent) 30%, transparent);
  transition: width 180ms linear;
}

.gallery-prepare-button__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
}

.gallery-prepare-tip {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  width: 280px;
  padding: 12px;
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 48%, var(--gallery-border));
  border-radius: 9px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 10px 26px rgb(0 0 0 / 30%);
  color: var(--button-text-color);
}

.gallery-prepare-tip::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 90px;
  height: 8px;
  content: '';
}

.gallery-prepare-tip::after {
  position: absolute;
  right: 26px;
  bottom: calc(100% - 4px);
  width: 8px;
  height: 8px;
  border-top: 1px solid color-mix(in srgb, var(--gallery-accent) 48%, var(--gallery-border));
  border-left: 1px solid color-mix(in srgb, var(--gallery-accent) 48%, var(--gallery-border));
  background: var(--gallery-surface-raised);
  content: '';
  transform: rotate(45deg);
}

.gallery-prepare-tip strong {
  font-size: 11px;
}

.gallery-prepare-tip span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.4;
}

.gallery-prepare-tip .gallery-prepare-tip__action {
  padding: 7px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--gallery-accent) 16%, transparent);
  color: var(--button-text-color);
  font-weight: 600;
}

.gallery-prepare-tip .gallery-prepare-tip__estimate {
  color: var(--button-text-color);
}

.gallery-prepare-tip .gallery-prepare-tip__current {
  overflow: hidden;
  color: var(--button-text-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-prepare-tip__current strong {
  color: var(--gallery-accent);
  font-size: inherit;
}

.gallery-prepare-tip__estimate strong {
  color: var(--gallery-accent);
  font-size: inherit;
}

.gallery-prepare-tip button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gallery-accent);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.gallery-prepare-backdrop {
  width: min(620px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  border-radius: 12px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  box-shadow: 0 18px 60px rgb(0 0 0 / 45%);
}

.gallery-prepare-backdrop::backdrop {
  background: rgb(0 0 0 / 46%);
}

.gallery-prepared-dialog {
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.gallery-prepared-dialog__header {
  padding: 17px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-prepared-dialog__header h2,
.gallery-prepared-dialog__header p {
  margin: 0;
}

.gallery-prepared-dialog__header h2 {
  font-size: 15px;
}

.gallery-prepared-dialog__header p {
  margin-top: 4px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-prepared-dialog__header > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

.gallery-prepared-dialog__header > button:hover {
  background: var(--hover-button-bg-color);
}

.gallery-prepared-list {
  padding: 10px;
  overflow: auto;
}

.gallery-prepared-dialog__usage {
  min-height: 38px;
  padding: 0 18px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  border-top: 1px solid var(--gallery-border);
  background: color-mix(in srgb, var(--gallery-surface-raised) 92%, transparent);
  box-shadow: 0 -8px 20px rgb(0 0 0 / 16%);
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-prepared-dialog__usage > div,
.gallery-prepared-dialog__memory {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.gallery-prepared-dialog__usage strong,
.gallery-prepared-dialog__memory strong {
  color: var(--button-text-color);
  font-size: 11px;
}

.gallery-prepared-dialog__memory {
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.gallery-prepared-dialog__memory:hover {
  background: var(--hover-button-bg-color);
  color: var(--gallery-accent);
}

.gallery-prepared-dialog__memory:focus-visible {
  outline: 1px solid var(--gallery-accent);
  outline-offset: 1px;
}

.gallery-settings-backdrop,
.gallery-settings-confirm-backdrop {
  --gallery-accent: #448ee4;
  --gallery-accent-soft: rgb(68 142 228 / 16%);
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  box-sizing: border-box;
  width: min(590px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  border-radius: 13px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  font: inherit;
  box-shadow: 0 22px 70px rgb(0 0 0 / 58%);
}

.gallery-settings-confirm-backdrop {
  width: min(490px, calc(100vw - 40px));
}

body.dark-theme .gallery-settings-backdrop,
body.dark-theme .gallery-settings-confirm-backdrop {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.gallery-settings-backdrop::backdrop {
  background: rgb(0 0 0 / 54%);
}

.gallery-settings-backdrop {
  overflow: visible;
}

.gallery-settings-confirm-backdrop::backdrop {
  background: rgb(0 0 0 / 68%);
}

.gallery-settings-dialog,
.gallery-settings-confirm {
  display: flex;
  max-height: min(680px, calc(100vh - 32px));
  flex-direction: column;
  overflow: hidden;
}

.gallery-settings-dialog {
  border-radius: inherit;
}

.gallery-settings-dialog__header {
  padding: 18px 19px 16px;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-settings-dialog__header h2,
.gallery-settings-dialog__header p {
  margin: 0;
}

.gallery-settings-dialog__header h2 {
  margin-top: 4px;
  font-size: 17px;
}

.gallery-settings-dialog__header p {
  max-width: 430px;
  margin-top: 5px;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-dialog__eyebrow {
  color: var(--gallery-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gallery-settings-dialog__eyebrow--warning {
  color: #e5a948;
}

.gallery-settings-dialog__header > button {
  width: 29px;
  height: 29px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 21px;
  cursor: pointer;
}

.gallery-settings-dialog__header > button:hover:not(:disabled) {
  background: var(--hover-button-bg-color);
  color: var(--button-text-color);
}

.gallery-settings-dialog__header > button:disabled {
  cursor: wait;
  opacity: .5;
}

.gallery-webdav-progress {
  min-width: 112px;
  padding: 7px 9px 8px;
  margin-left: auto;
  display: grid;
  flex: none;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 22%, var(--gallery-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--gallery-accent) 6%, var(--gallery-surface-raised));
}

.gallery-webdav-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gallery-webdav-progress strong {
  color: var(--button-text-color);
  font-size: 9px;
}

.gallery-webdav-progress > div:first-child > span {
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.gallery-webdav-progress__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.gallery-webdav-progress__track > span {
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--button-text-inactive-color) 18%, transparent);
}

.gallery-webdav-progress__track > span.is-reached {
  background: var(--gallery-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--gallery-accent) 45%, transparent);
}

.gallery-webdav-choice-summary {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 650;
}

.gallery-webdav-choice-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--gallery-accent) 74%, var(--button-text-color));
}

.gallery-webdav-choice-summary > i {
  color: color-mix(in srgb, var(--button-text-inactive-color) 42%, transparent);
  font-style: normal;
}

.gallery-settings-backdrop.gallery-webdav-backdrop {
  width: min(780px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 32px));
}

.gallery-webdav-dialog__content {
  display: grid;
  flex: 1 1 auto;
  gap: 16px;
  overflow-x: hidden;
}

.gallery-webdav-dialog__content > * {
  min-width: 0;
}

.gallery-webdav-dialog > .gallery-settings-dialog__footer {
  justify-content: center;
}

.gallery-webdav-dialog .gallery-settings-dialog__header p {
  font-size: 12px;
}

.gallery-webdav-access-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gallery-webdav-access-tabs > button,
.gallery-webdav-key-tiles > button {
  min-width: 0;
  min-height: 84px;
  padding: 15px 16px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: var(--gallery-surface-raised);
  color: var(--button-text-inactive-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-webdav-access-tabs > button {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 1px;
}

.gallery-webdav-access-tabs > button > strong,
.gallery-webdav-access-tabs > button > span,
.gallery-webdav-key-tiles > button > strong,
.gallery-webdav-key-tiles > button > span {
  grid-column: 2;
}

.gallery-webdav-key-tiles > button {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 1px;
}

.gallery-webdav-choice-icon {
  width: 42px;
  height: 42px;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 24%, var(--gallery-border));
  border-radius: 9px;
  background: var(--gallery-accent-soft);
  color: var(--gallery-accent);
}

.gallery-webdav-access-tabs > button:hover,
.gallery-webdav-key-tiles > button:hover {
  border-color: color-mix(in srgb, var(--gallery-accent) 45%, var(--gallery-border));
}

.gallery-webdav-access-tabs > button[aria-pressed='true'],
.gallery-webdav-key-tiles > button[aria-pressed='true'] {
  border-color: var(--gallery-accent);
  background: var(--gallery-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 25%, transparent);
}

.gallery-webdav-access-tabs strong,
.gallery-webdav-key-tiles strong {
  color: var(--button-text-color);
  font-size: 13px;
}

.gallery-webdav-access-tabs span,
.gallery-webdav-key-tiles span {
  font-size: 10px;
  line-height: 1.4;
}

.gallery-webdav-access-tabs i {
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgb(214 83 74 / 14%);
  color: #d6534a;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.gallery-webdav-access-note {
  margin-top: -8px;
  padding: 10px 11px;
  border: 1px solid var(--gallery-border);
  border-radius: 8px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.5;
}

.gallery-webdav-access-note strong {
  color: var(--button-text-color);
}

.gallery-webdav-wizard-stage {
  display: grid;
  gap: 14px;
}

.gallery-webdav-wizard-back {
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gallery-accent);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.gallery-webdav-key-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gallery-webdav-key-ready,
.gallery-webdav-own-keys {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 35%, var(--gallery-border));
  border-radius: 9px;
  background: var(--gallery-accent-soft);
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.5;
}

.gallery-webdav-key-ready > strong {
  color: var(--button-text-color);
  font-size: 12px;
}

.gallery-webdav-key-ready > p {
  margin: 4px 0 10px;
}

.gallery-webdav-own-keys {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.gallery-webdav-own-keys label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.gallery-webdav-own-keys label > span,
.gallery-webdav-directory-row label > span,
.gallery-webdav-local-host > span,
.gallery-webdav-final-options label > span {
  color: var(--button-text-color);
  font-size: 10px;
  font-weight: 700;
}

.gallery-webdav-own-keys textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  padding: 8px;
  resize: vertical;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.gallery-webdav-own-keys textarea:focus,
.gallery-webdav-directory-row input:focus,
.gallery-webdav-local-host input:focus,
.gallery-webdav-final-options input:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-webdav-own-keys small {
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.gallery-webdav-existing-authorization,
.gallery-webdav-existing-details {
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 30%, var(--gallery-border));
  border-radius: 9px;
  background: var(--gallery-accent-soft);
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.5;
}

.gallery-webdav-existing-authorization > div > strong {
  color: var(--button-text-color);
  font-size: 12px;
}

.gallery-webdav-existing-authorization > div > p {
  margin: 4px 0 0;
}

.gallery-webdav-existing-authorization p > code,
.gallery-webdav-existing-details small > code {
  color: var(--button-text-color);
  font-size: 9px;
}

.gallery-webdav-existing-details > label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.gallery-webdav-existing-details > label > span {
  color: var(--button-text-color);
  font-size: 10px;
  font-weight: 700;
}

.gallery-webdav-existing-details input,
.gallery-webdav-existing-details textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font: inherit;
  font-size: 11px;
}

.gallery-webdav-existing-details input {
  height: 36px;
}

.gallery-webdav-existing-details textarea {
  min-height: 74px;
  resize: vertical;
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.gallery-webdav-existing-details input:focus,
.gallery-webdav-existing-details textarea:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-webdav-existing-details small {
  font-size: 9px;
}

.gallery-webdav-derived-key {
  padding: 10px;
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, #4da873 48%, var(--gallery-border));
  border-radius: 8px;
  background: color-mix(in srgb, #4da873 14%, var(--gallery-surface-raised));
}

.gallery-webdav-derived-key > strong {
  color: color-mix(in srgb, #64c68b 82%, var(--button-text-color));
  font-size: 10px;
}

.gallery-webdav-derived-key > p {
  margin: 0;
}

.gallery-webdav-key-checking {
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.gallery-webdav-key-fingerprint {
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 18%, var(--gallery-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--gallery-surface-raised) 88%, transparent);
}

.gallery-webdav-key-fingerprint__mark {
  width: 58px;
  height: 58px;
  padding: 7px;
  display: grid;
  flex: none;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 1px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--gallery-surface) 82%, black);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%), 0 4px 14px rgb(0 0 0 / 16%);
}

.gallery-webdav-key-fingerprint__mark > span {
  border-radius: 1px;
}

.gallery-webdav-key-fingerprint__mark > span.is-filled {
  box-shadow: 0 0 4px currentcolor;
}

.gallery-webdav-key-fingerprint__details {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gallery-webdav-key-fingerprint > .gallery-secondary-button {
  margin-left: auto;
  flex: none;
}

.gallery-webdav-key-fingerprint strong {
  color: var(--button-text-color);
  font-size: 9px;
}

.gallery-webdav-key-fingerprint__details > span {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-webdav-wizard-actions {
  display: flex;
  justify-content: center;
}

.gallery-webdav-directory-list {
  display: grid;
  gap: 8px;
}

.gallery-webdav-directory-list__head,
.gallery-webdav-directory-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(220px, 1.3fr) 30px;
  align-items: end;
  gap: 8px;
}

.gallery-webdav-directory-list__head {
  padding: 0 2px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-webdav-directory-row {
  padding: 10px;
  border: 1px solid var(--gallery-border);
  border-radius: 8px;
  background: var(--gallery-surface-raised);
}

.gallery-webdav-directory-row label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.gallery-webdav-directory-row input,
.gallery-webdav-local-host input,
.gallery-webdav-final-options input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  font: inherit;
  font-size: 11px;
}

.gallery-webdav-directory-row > button {
  width: 30px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: transparent;
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}

.gallery-webdav-directory-row > button:disabled {
  cursor: default;
  opacity: .35;
}

.gallery-webdav-add-directory {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  color: var(--button-text-color);
  font-size: 11px;
}

.gallery-webdav-add-directory > div {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gallery-webdav-add-directory > div > button {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.gallery-webdav-setup-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gallery-webdav-setup-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
}

.gallery-webdav-setup-summary > button {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  border: 1px solid var(--gallery-border);
  border-radius: 8px;
  background: var(--gallery-surface-raised);
  color: var(--button-text-inactive-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-webdav-setup-summary span {
  grid-column: 1;
  font-size: 9px;
  text-transform: uppercase;
}

.gallery-webdav-setup-summary strong {
  min-width: 0;
  grid-column: 1;
  overflow: hidden;
  color: var(--button-text-color);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-webdav-setup-summary i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--gallery-accent);
  font-size: 9px;
  font-style: normal;
}

.gallery-webdav-step-accordion {
  min-height: 0;
  display: grid;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--gallery-border);
  border-radius: 10px;
}

.gallery-webdav-step + .gallery-webdav-step {
  border-top: 1px solid var(--gallery-border);
}

.gallery-webdav-step__header {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gallery-surface-raised);
}

.gallery-webdav-step__header > input {
  width: 16px;
  height: 16px;
  accent-color: var(--gallery-accent);
}

.gallery-webdav-step__header > input:disabled {
  opacity: .42;
}

.gallery-webdav-step__header > button {
  min-width: 0;
  padding: 8px 0;
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: var(--button-text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-webdav-step__header span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-transform: uppercase;
}

.gallery-webdav-step__header strong {
  font-size: 12px;
}

.gallery-webdav-step__header i {
  color: var(--button-text-inactive-color);
  font-size: 15px;
  font-style: normal;
}

.gallery-webdav-step--open .gallery-webdav-step__header {
  background: var(--gallery-accent-soft);
}

.gallery-webdav-step__content {
  padding: 14px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--gallery-border);
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.5;
}

.gallery-webdav-step__content > p {
  margin: 0;
}

.gallery-webdav-step__content > .gallery-primary-button {
  width: max-content;
  justify-self: end;
}

.gallery-webdav-step__content a {
  color: var(--gallery-accent);
}

.gallery-webdav-step__content :not(pre) > code {
  color: var(--button-text-color);
}

.gallery-webdav-step__blocked {
  padding: 10px;
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, #d6534a 36%, var(--gallery-border));
  border-radius: 8px;
  background: color-mix(in srgb, #d6534a 8%, var(--gallery-surface-raised));
}

.gallery-webdav-step__blocked-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-webdav-step__blocked-summary > div {
  display: flex;
  flex: none;
  gap: 6px;
}

.gallery-webdav-step__blocked-summary .gallery-secondary-button {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.gallery-webdav-manual-publisher-key {
  padding-top: 10px;
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, #d6534a 24%, var(--gallery-border));
}

.gallery-webdav-manual-publisher-key label {
  display: grid;
  gap: 5px;
}

.gallery-webdav-manual-publisher-key label > span {
  color: var(--button-text-color);
  font-size: 9px;
  font-weight: 700;
}

.gallery-webdav-manual-publisher-key textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 8px;
  resize: vertical;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.gallery-webdav-manual-publisher-key textarea:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-webdav-manual-publisher-key > p {
  margin: 0;
  font-size: 9px;
}

.gallery-webdav-manual-publisher-key > .gallery-primary-button {
  width: max-content;
  margin: 0;
  justify-self: end;
}

.gallery-webdav-manual-publisher-key__error {
  color: #dc6b63;
  font-size: 9px;
}

.gallery-webdav-local-host {
  display: grid;
  gap: 6px;
}

.gallery-webdav-local-host small {
  font-size: 9px;
}

.gallery-webdav-final-options {
  display: grid;
  gap: 10px;
}

.gallery-webdav-final-options > div {
  display: grid;
  gap: 3px;
}

.gallery-webdav-final-options > div > strong {
  color: var(--button-text-color);
  font-size: 12px;
}

.gallery-webdav-final-options > div > p {
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-webdav-final-options label {
  display: grid;
  gap: 5px;
}

.gallery-webdav-access-note--network {
  border-color: color-mix(in srgb, #4d9d72 38%, var(--gallery-border));
  background: color-mix(in srgb, #4d9d72 8%, var(--gallery-surface-raised));
}

.gallery-webdav-access-note--public {
  border-color: color-mix(in srgb, #d6534a 38%, var(--gallery-border));
  background: color-mix(in srgb, #d6534a 7%, var(--gallery-surface-raised));
}

.gallery-webdav-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.gallery-webdav-fields > * {
  min-width: 0;
}

.gallery-webdav-fields > label {
  display: grid;
  gap: 6px;
}

.gallery-webdav-fields__wide {
  grid-column: 1 / -1;
}

.gallery-webdav-fields > label > span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-webdav-fields > label > span i {
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.gallery-webdav-fields > label > small {
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.45;
}

.gallery-webdav-fields input,
.gallery-webdav-fields textarea {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  color: var(--button-text-color);
  background: var(--gallery-surface-raised);
  font: inherit;
  font-size: 11px;
}

.gallery-webdav-fields textarea {
  min-height: 74px;
  height: auto;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.gallery-webdav-fields input:focus,
.gallery-webdav-fields textarea:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-webdav-dialog__security {
  margin: 0;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.45;
}

.gallery-webdav-dialog__security {
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 24%, var(--gallery-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--gallery-accent) 7%, var(--gallery-surface-raised));
}

.gallery-webdav-setup {
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--gallery-surface-raised) 72%, transparent);
}

.gallery-webdav-setup > summary {
  padding: 12px 14px;
  color: var(--button-text-color);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.gallery-webdav-setup[open] > summary {
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-webdav-setup__body {
  padding: 2px 14px 16px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.55;
}

.gallery-webdav-setup__intro {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-left: 3px solid var(--gallery-accent);
  border-radius: 3px 7px 7px 3px;
  background: var(--gallery-accent-soft);
  color: var(--button-text-color);
}

.gallery-webdav-setup__intro--public {
  border-left-color: #d6534a;
  background: color-mix(in srgb, #d6534a 10%, var(--gallery-surface-raised));
}

.gallery-webdav-developer-url {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.gallery-webdav-developer-url > span {
  color: var(--button-text-color);
  font-size: 10px;
  font-weight: 700;
}

.gallery-webdav-developer-url > small {
  font-size: 8px;
}

.gallery-webdav-developer-url input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  outline: none;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font: inherit;
  font-size: 11px;
}

.gallery-webdav-developer-url input:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 2px var(--gallery-accent-soft);
}

.gallery-webdav-setup ol {
  margin: 14px 0 0;
  padding-left: 24px;
}

.gallery-webdav-setup li {
  padding: 0 0 17px 4px;
}

.gallery-webdav-setup li:last-child {
  padding-bottom: 0;
}

.gallery-webdav-setup h3,
.gallery-webdav-setup p {
  margin: 0;
}

.gallery-webdav-setup h3 {
  color: var(--button-text-color);
  font-size: 11px;
}

.gallery-webdav-setup p {
  margin-top: 4px;
}

.gallery-webdav-setup a {
  color: var(--gallery-accent);
}

.gallery-webdav-setup :not(pre) > code {
  padding: 1px 4px;
  border: 1px solid var(--gallery-border);
  border-radius: 4px;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font-size: 9px;
}

.gallery-webdav-setup__code {
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: color-mix(in srgb, #090b0d 82%, var(--gallery-surface-raised));
}

.gallery-webdav-setup__code > div {
  min-height: 28px;
  padding: 0 6px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 58%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gallery-webdav-setup__code button {
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 74%);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.gallery-webdav-setup__code button:hover {
  background: rgb(255 255 255 / 14%);
  color: white;
}

.gallery-webdav-setup__code pre {
  margin: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #d8e7f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}

.gallery-webdav-setup__code pre code {
  color: inherit;
}

@media (max-width: 620px) {
  .gallery-webdav-access-tabs,
  .gallery-webdav-key-tiles,
  .gallery-webdav-own-keys,
  .gallery-webdav-setup-summary,
  .gallery-webdav-final-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-webdav-directory-list__head {
    display: none;
  }

  .gallery-webdav-directory-row {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .gallery-webdav-directory-row label {
    grid-column: 1;
  }

  .gallery-webdav-directory-row > button {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .gallery-webdav-add-directory {
    align-items: stretch;
    flex-direction: column;
  }

  .gallery-webdav-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-webdav-fields__wide {
    grid-column: auto;
  }
}

.gallery-settings-dialog__content,
.gallery-settings-confirm__body {
  padding: 16px 18px;
  overflow: auto;
}

.gallery-settings-edited-count {
  min-height: 72px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 32%, var(--gallery-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--gallery-accent) 8%, var(--gallery-surface-raised));
}

.gallery-settings-edited-count__icon,
.gallery-settings-action__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: var(--gallery-accent-soft);
  color: var(--gallery-accent);
}

.gallery-settings-edited-count > div {
  min-width: 70px;
  display: grid;
}

.gallery-settings-edited-count strong {
  font-size: 20px;
  line-height: 1;
}

.gallery-settings-edited-count > div span {
  margin-top: 4px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-settings-edited-count p {
  margin: 0 0 0 6px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.45;
}

.gallery-settings-actions {
  margin-top: 12px;
  display: grid;
  gap: 9px;
}

.gallery-settings-action {
  min-height: 74px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gallery-border);
  border-radius: 10px;
  background: var(--gallery-surface-raised);
}

.gallery-settings-action h3,
.gallery-settings-action p {
  margin: 0;
}

.gallery-settings-action h3 {
  font-size: 12px;
}

.gallery-settings-action p {
  margin-top: 4px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.35;
}

.gallery-settings-action .gallery-primary-button,
.gallery-settings-dialog__footer .gallery-primary-button {
  min-width: 92px;
  margin-top: 0;
}

.gallery-settings-action .gallery-secondary-button {
  min-width: 92px;
}

.gallery-settings-json-panel {
  min-width: 0;
  padding: 12px 13px;
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 45%, var(--gallery-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--gallery-accent) 6%, var(--gallery-surface-raised));
}

.gallery-settings-json-panel__header,
.gallery-settings-json-panel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-settings-json-panel__header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gallery-settings-json-panel__header strong {
  font-size: 11px;
}

.gallery-settings-json-panel__header span {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-json-panel__header > span {
  flex: none;
}

.gallery-settings-json-code,
.gallery-settings-paste textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 116px;
  padding: 9px 10px;
  outline: 0;
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--main-bg-color) 88%, #000);
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}

.gallery-settings-json-code {
  min-width: 0;
  max-height: 260px;
  margin: 0;
  min-height: 150px;
  overflow: auto;
  padding-block: 7px;
}

.gallery-settings-json-tree {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.gallery-settings-json-tree__toolbar {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gallery-settings-json-tree__toolbar > span {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-json-tree__toolbar button {
  min-height: 24px;
  padding: 0 8px;
  color: var(--button-text-color);
  background: var(--gallery-surface);
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  font: inherit;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.gallery-settings-json-tree__toolbar button:hover {
  color: var(--gallery-accent);
  border-color: color-mix(in srgb, var(--gallery-accent) 55%, var(--gallery-border));
}

.gallery-settings-json-line {
  min-width: max-content;
  min-height: 18px;
  padding-right: 10px;
  display: flex;
  align-items: baseline;
  white-space: pre;
}

.gallery-settings-json-toggle,
.gallery-settings-json-toggle-spacer {
  width: 16px;
  height: 16px;
  margin-right: 1px;
  flex: none;
}

.gallery-settings-json-toggle {
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--button-text-inactive-color);
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.gallery-settings-json-toggle:hover,
.gallery-settings-json-toggle:focus-visible {
  color: var(--gallery-accent);
  background: var(--gallery-accent-soft);
  outline: 0;
}

.gallery-settings-json-field {
  border-radius: 3px;
  cursor: help;
}

.gallery-settings-json-field:hover,
.gallery-settings-json-field:focus-visible {
  background: var(--gallery-accent-soft);
  outline: 1px solid color-mix(in srgb, var(--gallery-accent) 45%, transparent);
}

.gallery-settings-json-field--property {
  color: #6cb6ff;
}

.gallery-settings-json-field--index {
  color: var(--button-text-inactive-color);
}

.gallery-settings-json-punctuation {
  color: var(--button-text-inactive-color);
}

.gallery-settings-json-summary {
  margin: 0 5px;
  color: var(--button-text-inactive-color);
  font-style: italic;
}

.gallery-settings-json-help {
  display: grid;
  min-width: 300px;
  gap: 9px;
  text-align: left;
}

.native-tooltip[data-theme='gallery-json-help'] {
  border-color: #78869a;
  border-radius: 7px;
  background: #171c24;
  box-shadow: 0 10px 28px rgb(0 0 0 / 48%);
  color: #f4f7fb;
}

.native-tooltip[data-theme='gallery-json-help'] > .native-tooltip__content {
  padding: 10px 12px;
}

.native-tooltip[data-theme='gallery-json-help'] > .native-tooltip__arrow {
  border-color: #78869a;
  background: #171c24;
}

.gallery-settings-json-help > code {
  max-width: 370px;
  padding-bottom: 8px;
  overflow-wrap: anywhere;
  color: #8fc5ff;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.gallery-settings-json-help > strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.gallery-settings-json-help dl {
  margin: 0;
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 6px 9px;
}

.gallery-settings-json-help dt {
  color: #aeb9c9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.gallery-settings-json-help dd {
  margin: 0;
  color: #edf2f8;
  font-size: 11px;
  line-height: 1.5;
}

.gallery-settings-paste textarea {
  resize: vertical;
}

.gallery-settings-json-code:focus,
.gallery-settings-paste textarea:focus {
  border-color: var(--gallery-accent);
  box-shadow: 0 0 0 1px var(--gallery-accent);
}

.gallery-settings-json-token--property {
  color: #6cb6ff;
}

.gallery-settings-json-token--string {
  color: #7ee787;
}

.gallery-settings-json-token--number {
  color: #d2a8ff;
}

.gallery-settings-json-token--boolean {
  color: #ffa657;
}

.gallery-settings-json-token--null {
  color: #ff7b72;
}

body:not(.dark-theme) .gallery-settings-json-token--property {
  color: #0550ae;
}

body:not(.dark-theme) .gallery-settings-json-field--property {
  color: #0550ae;
}

body:not(.dark-theme) .gallery-settings-json-token--string {
  color: #116329;
}

body:not(.dark-theme) .gallery-settings-json-token--number {
  color: #8250df;
}

body:not(.dark-theme) .gallery-settings-json-token--boolean {
  color: #953800;
}

body:not(.dark-theme) .gallery-settings-json-token--null {
  color: #cf222e;
}

.gallery-settings-json-panel__actions {
  justify-content: flex-end;
}

.gallery-settings-json-panel__actions .gallery-primary-button {
  min-width: 112px;
  margin-top: 0;
}

.gallery-settings-paste {
  padding-top: 10px;
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  border-top: 1px solid var(--gallery-border);
}

.gallery-settings-paste label {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-settings-paste button {
  justify-self: end;
}

.gallery-settings-dialog__message {
  margin: 12px 1px 0;
  padding: 8px 10px;
  color: var(--button-text-color);
  font-size: 10px;
  line-height: 1.4;
  border-radius: 7px;
  background: color-mix(in srgb, var(--gallery-accent) 10%, var(--gallery-surface-raised));
}

.gallery-settings-dialog__footer {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--gallery-border);
  background: color-mix(in srgb, var(--gallery-surface-raised) 92%, transparent);
}

.gallery-settings-dialog__footer--single {
  min-height: 50px;
}

.gallery-settings-dialog__footer .gallery-secondary-button {
  min-width: 80px;
}

.gallery-settings-dialog__footer .gallery-primary-button:disabled {
  cursor: default;
}

.gallery-settings-confirm__body {
  display: grid;
  gap: 12px;
}

.gallery-settings-confirm__file {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--button-text-inactive-color);
  border: 1px solid var(--gallery-border);
  border-radius: 8px;
  background: var(--gallery-surface-raised);
}

.gallery-settings-confirm__file svg {
  color: var(--gallery-accent);
}

.gallery-settings-confirm__file span {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-confirm__counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.gallery-settings-confirm__count {
  padding: 12px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: var(--gallery-surface-raised);
}

.gallery-settings-confirm__count strong {
  font-size: 18px;
}

.gallery-settings-confirm__count span {
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-settings-confirm__count--match {
  border-color: color-mix(in srgb, #62b884 50%, var(--gallery-border));
}

.gallery-settings-confirm__count--warning {
  border-color: color-mix(in srgb, #e5a948 58%, var(--gallery-border));
}

.gallery-settings-confirm__warning,
.gallery-settings-confirm__missing {
  padding: 10px 11px;
  color: color-mix(in srgb, #e5a948 72%, var(--button-text-color));
  font-size: 10px;
  line-height: 1.45;
  border-radius: 8px;
  background: color-mix(in srgb, #e5a948 10%, var(--gallery-surface-raised));
}

.gallery-settings-confirm__missing strong {
  display: block;
}

.gallery-settings-confirm__missing ul {
  margin: 7px 0 0;
  padding-left: 17px;
}

.gallery-settings-confirm__missing li {
  overflow: hidden;
  color: var(--button-text-inactive-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-settings-confirm__missing > span {
  display: block;
  margin-top: 5px;
  color: var(--button-text-inactive-color);
}

@media (max-width: 520px) {
  .gallery-settings-edited-count {
    grid-template-columns: auto 1fr;
  }

  .gallery-settings-edited-count p {
    grid-column: 1 / -1;
    margin: 0;
  }

  .gallery-settings-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gallery-settings-action > button {
    grid-column: 1 / -1;
  }
}

.gallery-memory-backdrop {
  --gallery-accent: #448ee4;
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  box-sizing: border-box;
  width: min(780px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  border-radius: 12px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  font: inherit;
  box-shadow: 0 22px 70px rgb(0 0 0 / 58%);
}

body.dark-theme .gallery-memory-backdrop {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.gallery-memory-backdrop::backdrop {
  background: rgb(0 0 0 / 58%);
}

.gallery-memory-dialog {
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.gallery-memory-summary {
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--gallery-border);
  background: color-mix(in srgb, var(--gallery-surface-raised) 84%, transparent);
}

.gallery-memory-summary > div {
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--gallery-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gallery-surface) 86%, transparent);
}

.gallery-memory-summary span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.gallery-memory-summary strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
}

.gallery-memory-list {
  min-height: 0;
  padding: 6px 18px 14px;
  flex: 1 1 auto;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.gallery-memory-group {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
}

.gallery-memory-group > header {
  min-height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--gallery-border);
  background: color-mix(in srgb, var(--gallery-surface-raised) 87%, transparent);
}

.gallery-memory-group > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-memory-group > header strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-memory-group > header > span {
  flex: 0 0 auto;
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.gallery-memory-group__kind {
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 34%, var(--gallery-border));
  border-radius: 4px;
  color: var(--gallery-accent);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.gallery-memory-group__kind--worker {
  border-color: color-mix(in srgb, #b78eff 38%, var(--gallery-border));
  color: #c6a7ff;
}

.gallery-memory-row {
  padding: 13px 11px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 15px;
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-memory-row:last-child {
  border-bottom: 0;
}

.gallery-memory-row__size {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-memory-row__size strong {
  color: var(--gallery-accent);
  font-size: 13px;
}

.gallery-memory-row__size span,
.gallery-memory-row__heading span {
  color: var(--button-text-inactive-color);
  font-size: 9px;
}

.gallery-memory-row__contexts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-memory-row__contexts > div + div {
  padding-top: 11px;
  border-top: 1px dashed color-mix(in srgb, var(--gallery-border) 70%, transparent);
}

.gallery-memory-row__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gallery-memory-row__heading strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-memory-row__heading span {
  flex: 0 0 auto;
}

.gallery-memory-row p {
  margin: 4px 0 5px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  line-height: 1.4;
}

.gallery-memory-row code {
  color: color-mix(in srgb, var(--gallery-accent) 72%, var(--button-text-inactive-color));
  font-size: 9px;
}

.gallery-memory-empty {
  height: 100%;
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--button-text-inactive-color);
  text-align: center;
}

.gallery-memory-empty strong {
  color: var(--button-text-color);
  font-size: 12px;
}

.gallery-memory-empty span {
  font-size: 10px;
}

.gallery-memory-note {
  padding: 10px 18px;
  flex: 0 0 auto;
  border-top: 1px solid var(--gallery-border);
  color: var(--button-text-inactive-color);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .gallery-memory-summary {
    grid-template-columns: 1fr;
  }

  .gallery-memory-row {
    grid-template-columns: 75px minmax(0, 1fr);
  }
}

.gallery-prepared-empty {
  padding: 40px 18px;
  color: var(--button-text-inactive-color);
  text-align: center;
}

.gallery-prepared-row {
  padding: 11px 12px;
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-prepared-row:last-child {
  border-bottom: 0;
}

.gallery-prepared-row__heading,
.gallery-prepared-row__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gallery-prepared-row__heading strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-prepared-row__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.gallery-prepared-row__actions button {
  height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: transparent;
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.gallery-prepared-row__move {
  width: 25px;
  padding: 0 !important;
  justify-content: center;
  font-size: 13px !important;
}

.gallery-prepared-row__move:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gallery-accent) 60%, var(--gallery-border));
  background: color-mix(in srgb, var(--gallery-accent) 12%, transparent);
  color: var(--gallery-accent);
}

.gallery-prepared-row__forget:hover:not(:disabled) {
  border-color: color-mix(in srgb, #df6565 55%, var(--gallery-border));
  background: color-mix(in srgb, #df6565 10%, transparent);
  color: #df6565;
}

.gallery-prepared-row__actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

.gallery-prepared-row__forget:disabled {
  cursor: wait;
}

.gallery-prepared-row__heading span,
.gallery-prepared-row__details {
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-prepared-row__details {
  margin-top: 6px;
}

.gallery-prepared-row__details span:nth-child(2) {
  margin-left: auto;
}

.gallery-prepared-row__progress {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gallery-border) 70%, transparent);
}

.gallery-prepared-row__progress span {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #287fd2, #68b8fa);
  transition: width 180ms linear;
}

.gallery-prepared-dialog__error {
  margin: 10px 12px;
  color: #df6565;
  font-size: 10px;
}

.gallery-upload-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: rgb(255 255 255 / 7%);
}

.gallery-upload-progress span {
  display: block;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #287fd2, #68b8fa);
  box-shadow: 0 0 7px rgb(86 168 245 / 45%);
  transition: width 180ms linear;
}

.gallery-icon-button:focus-visible,
.gallery-prepare-button:focus-visible,
.gallery-primary-button:focus-visible,
.gallery-card:focus-visible,
.gallery-breadcrumbs button:focus-visible {
  outline: 2px solid var(--gallery-accent);
  outline-offset: 2px;
}

.gallery-icon-button--danger:hover {
  color: #df6565;
}

.gallery-scroll {
  width: 100%;
}

.gallery-scroll .os-scrollbar-horizontal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none;
}

.gallery-scroll-to-selected {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 16px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 76%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gallery-accent) 88%, #17202a);
  box-shadow: 0 5px 18px rgb(0 0 0 / 38%), 0 0 0 2px rgb(68 142 228 / 18%);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
}

.gallery-scroll-to-selected:hover {
  background: color-mix(in srgb, var(--gallery-accent) 94%, #fff);
  box-shadow: 0 7px 22px rgb(0 0 0 / 44%), 0 0 0 3px rgb(68 142 228 / 22%);
}

.gallery-scroll-to-selected:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.gallery-browser {
  position: relative;
  min-height: 100%;
  padding: 0 12px 18px;
}

.gallery-directory-refresh {
  position: sticky;
  z-index: 5;
  bottom: 0;
  width: calc(100% + 24px);
  height: 3px;
  margin: 15px -12px -18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gallery-accent) 16%, transparent);
  pointer-events: none;
}

.gallery-directory-refresh span {
  width: 100%;
  height: 100%;
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gallery-accent) 70%, #fff),
    var(--gallery-accent),
    color-mix(in srgb, var(--gallery-accent) 72%, #fff)
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--gallery-accent) 68%, transparent);
  transition: transform 90ms linear;
}

.gallery-directory-refresh--finishing {
  opacity: 0;
  transition: opacity 220ms ease 40ms;
}

.gallery-browser__header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: 45px;
  padding: 9px 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--gallery-border);
  background: color-mix(in srgb, var(--gallery-surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.gallery-editing-mark-note {
  display: flex;
  margin: 8px 0 0;
  padding: 6px 9px;
  gap: 7px;
  align-items: center;
  color: var(--props-text-color);
  background: color-mix(in srgb, var(--gallery-accent) 8%, var(--gallery-surface));
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 28%, var(--gallery-border));
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.35;
}

.gallery-editing-mark-note__icon {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--gallery-accent);
  border-radius: 50%;
}

.gallery-browser__path-row {
  width: 100%;
  min-width: 0;
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gallery-breadcrumbs {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  overflow: visible;
  white-space: normal;
}

.gallery-breadcrumbs button {
  min-width: 0;
  max-width: min(220px, calc(100% - 18px));
  padding: 3px 5px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--props-text-color);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.gallery-breadcrumbs button:hover:not(:disabled) {
  background: var(--hover-button-bg-color);
  color: var(--button-text-color);
}

.gallery-breadcrumbs button:disabled {
  color: var(--button-text-color);
  font-weight: 600;
}

.gallery-breadcrumbs__separator,
.gallery-browser__status {
  color: var(--button-text-inactive-color);
}

.gallery-filename-filter {
  position: relative;
  width: clamp(120px, 22vw, 210px);
  flex: 0 1 210px;
}

.gallery-filename-filter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.gallery-filename-filter input {
  width: 100%;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface-raised);
  color: var(--button-text-color);
  font: inherit;
  font-size: 11px;
}

.gallery-filename-filter input::placeholder {
  color: var(--button-text-inactive-color);
}

.gallery-filename-filter input:focus {
  border-color: var(--gallery-accent);
  outline: 1px solid color-mix(in srgb, var(--gallery-accent) 45%, transparent);
}

.gallery-filter-menu {
  position: relative;
  flex: 0 0 auto;
}

.gallery-filter-menu > summary {
  height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface-raised);
  color: var(--button-text-inactive-color);
  font-size: 10px;
  cursor: pointer;
}

.gallery-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.gallery-filter-menu > summary:hover,
.gallery-filter-menu[open] > summary,
.gallery-filter-menu--active > summary {
  border-color: color-mix(in srgb, var(--gallery-accent) 64%, var(--gallery-border));
  color: var(--button-text-color);
}

.gallery-filter-menu--active > summary {
  background: var(--gallery-accent-soft);
}

.gallery-filter-menu > summary strong {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--gallery-accent);
  color: #fff;
  font-size: 9px;
}

.gallery-filter-menu__icon {
  font-size: 16px;
  line-height: 1;
  transform: rotate(90deg);
}

.gallery-filter-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  width: 320px;
  max-height: min(570px, calc(100vh - 130px));
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 14px 36px rgb(0 0 0 / 42%);
  color: var(--button-text-color);
}

.gallery-filter-popover--detached {
  --gallery-accent: #448ee4;
  --gallery-accent-soft: rgb(68 142 228 / 16%);
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));
  position: fixed;
  z-index: 10040;
  right: auto;
  max-height: calc(100vh - 16px);
  box-sizing: border-box;
  font: inherit;
}

body.dark-theme .gallery-filter-popover--detached {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.gallery-filter-popover > header {
  padding: 1px 1px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-filter-popover > header > strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.gallery-filter-popover--detached > header {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.gallery-filter-popover--detached > header:active {
  cursor: grabbing;
}

.gallery-filter-popover__grip {
  color: var(--button-text-inactive-color);
  font-size: 13px;
  letter-spacing: -.1em;
}

.gallery-filter-popover__header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.gallery-filter-mode {
  padding: 2px;
  display: flex;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface);
}

.gallery-filter-mode button {
  height: 22px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.gallery-filter-mode button.is-active {
  background: var(--gallery-accent);
  color: #fff;
}

.gallery-filter-detach {
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface);
  color: var(--button-text-inactive-color);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.gallery-filter-detach:hover,
.gallery-filter-detach:focus-visible {
  border-color: color-mix(in srgb, var(--gallery-accent) 58%, var(--gallery-border));
  color: var(--gallery-accent);
  outline: 0;
}

.gallery-filter-popover section {
  padding: 8px 1px;
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--gallery-border);
}

.gallery-filter-popover h3 {
  margin: 0;
  padding: 0 5px 5px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-filter-option {
  min-height: 27px;
  padding: 3px 6px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
}

.gallery-filter-option:hover {
  background: var(--hover-button-bg-color);
}

.gallery-filter-option.is-selected {
  background: var(--gallery-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 46%, transparent);
}

.gallery-filter-option.is-selected > span {
  color: var(--button-text-color);
}

.gallery-filter-option input {
  margin: 0;
  accent-color: var(--gallery-accent);
}

.gallery-filter-option > strong {
  min-width: 18px;
  color: var(--button-text-inactive-color);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.gallery-filter-option__color {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gallery-filter-tiles {
  padding: 3px 3px 2px;
  display: flex;
  gap: 6px;
}

.gallery-filter-tile {
  position: relative;
  min-width: 0;
  height: 45px;
  flex: 1 1 0;
  display: grid;
  grid-template-rows: 25px 12px;
  place-items: center;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface);
  color: var(--button-text-inactive-color);
  cursor: pointer;
  transition: border-color 90ms ease, background 90ms ease, color 90ms ease, transform 90ms ease;
}

.gallery-filter-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gallery-filter-tile > span {
  align-self: end;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.gallery-filter-tile > strong {
  align-self: start;
  color: var(--button-text-inactive-color);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.gallery-filter-tile:hover,
.gallery-filter-tile:focus-within {
  border-color: color-mix(in srgb, var(--gallery-accent) 58%, var(--gallery-border));
  color: var(--button-text-color);
}

.gallery-filter-tile.is-selected {
  border-color: color-mix(in srgb, var(--gallery-accent) 76%, var(--gallery-border));
  background: var(--gallery-accent-soft);
  color: var(--button-text-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 24%, transparent);
}

.gallery-filter-tile.is-drop-target {
  border-color: var(--gallery-accent);
  background: color-mix(in srgb, var(--gallery-accent) 28%, var(--gallery-surface-raised));
  color: var(--button-text-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 22%);
}

.gallery-filter-color-tiles .gallery-color-dot {
  width: 16px;
  height: 16px;
}

.gallery-filter-ratings {
  padding: 3px 3px 2px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.gallery-filter-rating-choice {
  position: relative;
  min-width: 0;
  height: 45px;
  display: grid;
  grid-template-rows: 25px 12px;
  place-items: center;
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
  background: var(--gallery-surface);
  color: color-mix(in srgb, var(--button-text-inactive-color) 66%, transparent);
  cursor: pointer;
  transition: border-color 90ms ease, background 90ms ease, color 90ms ease, transform 90ms ease;
}

.gallery-filter-rating-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gallery-filter-rating-choice > span {
  align-self: end;
  font-size: 16px;
  line-height: 1;
}

.gallery-filter-rating-choice > strong {
  align-self: start;
  color: var(--button-text-inactive-color);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.gallery-filter-option--unrated.is-drop-target {
  background: color-mix(in srgb, #efbd48 24%, var(--gallery-surface-raised));
  box-shadow: inset 0 0 0 1px #efbd48;
}

.gallery-filter-rating-choice:hover,
.gallery-filter-rating-choice:focus-within {
  border-color: color-mix(in srgb, #efbd48 56%, var(--gallery-border));
  color: #efbd48;
}

.gallery-filter-rating-choice.is-selected {
  border-color: color-mix(in srgb, #efbd48 72%, var(--gallery-border));
  background: color-mix(in srgb, #efbd48 17%, var(--gallery-surface));
  color: #efbd48;
}

.gallery-filter-rating-choice.is-drop-target {
  border-color: #efbd48;
  background: color-mix(in srgb, #efbd48 28%, var(--gallery-surface-raised));
  color: #efbd48;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 22%);
}

.gallery-filter-rating-hint {
  margin: 3px 4px 0;
  color: var(--button-text-inactive-color);
  font-size: 8px;
}

.gallery-filter-popover > footer {
  padding: 8px 2px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--gallery-border);
}

.gallery-filter-popover > footer span {
  color: var(--button-text-inactive-color);
  font-size: 8px;
  line-height: 1.35;
}

.gallery-filter-popover > footer button {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid var(--gallery-border);
  border-radius: 5px;
  background: var(--gallery-surface);
  color: var(--button-text-color);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.gallery-filter-popover > footer button:disabled {
  opacity: .45;
  cursor: default;
}

.gallery-color-dot {
  width: 11px;
  height: 11px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 18%);
}

.gallery-color-dot--none {
  border-color: var(--button-text-inactive-color);
  background:
    linear-gradient(135deg, transparent 43%, #d36060 45% 55%, transparent 57%);
}

.gallery-color-dot--red { background: #e85b59; }
.gallery-color-dot--yellow { background: #e6b94d; }
.gallery-color-dot--green { background: #55b978; }
.gallery-color-dot--blue { background: #579ae4; }
.gallery-color-dot--purple { background: #a773df; }

.gallery-browser__status {
  width: auto;
  min-width: 0;
  max-width: 42%;
  min-height: 23.5px;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
}

.gallery-browser__status [role='status'] {
  min-width: 0;
  overflow: hidden;
  color: var(--gallery-accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-browser__status > span:not([role='status']) {
  flex: 0 0 auto;
}

.gallery-local-storage-notice {
  display: flex;
  margin: 9px 0 2px;
  padding: 9px 11px;
  gap: 9px;
  align-items: center;
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--gallery-accent) 12%, var(--gallery-surface));
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 45%, transparent);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.gallery-local-storage-notice .gallery-icon {
  flex: 0 0 auto;
  color: var(--gallery-accent);
}

.gallery-local-storage-notice__usage {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  color: var(--button-text-color);
  background: color-mix(in srgb, var(--gallery-accent) 20%, var(--gallery-surface-raised));
  border-radius: 99px;
  font-size: 11px;
  white-space: nowrap;
}

.gallery-grid {
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 13px 11px;
}

.gallery-card {
  min-width: 0;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--button-text-color);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.gallery-card--prepared {
  border-color: color-mix(in srgb, var(--gallery-accent) 48%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gallery-accent) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--main-bg-color-deep) 38%, transparent);
}

body.dark-theme .gallery-card--prepared {
  border-color: color-mix(in srgb, var(--gallery-accent) 52%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gallery-accent) 12%, transparent), transparent 55%),
    rgb(0 0 0 / 38%);
}

.gallery-card:hover {
  border-color: var(--gallery-border);
  background: var(--gallery-surface-raised);
  transform: translateY(-1px);
}

.gallery-card--prepared:hover {
  border-color: color-mix(in srgb, var(--gallery-accent) 70%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gallery-accent) 14%, transparent), transparent 55%),
    color-mix(in srgb, var(--main-bg-color-deep) 30%, var(--gallery-surface-raised));
}

.gallery-card--prepared .gallery-card__preview {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 32%, transparent);
}

.gallery-card--selected {
  border-color: var(--gallery-accent);
  background: var(--gallery-accent-soft);
  box-shadow: 0 0 0 1px var(--gallery-accent);
}

.gallery-card--primary {
  box-shadow: 0 0 0 2px var(--gallery-accent);
}

.gallery-card:has(.gallery-card__color-menu[open]) {
  position: relative;
  z-index: 20;
}

.gallery-card__preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 5%), transparent),
    color-mix(in srgb, var(--main-bg-color-deep) 12%, var(--main-bg-color));
}

body.dark-theme .gallery-card__preview {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 5%), transparent),
    #303336;
}

.gallery-card__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.gallery-card--tag-red { border-left-color: #e85b59; }
.gallery-card--tag-yellow { border-left-color: #e6b94d; }
.gallery-card--tag-green { border-left-color: #55b978; }
.gallery-card--tag-blue { border-left-color: #579ae4; }
.gallery-card--tag-purple { border-left-color: #a773df; }

.gallery-card__review {
  position: relative;
  min-height: 24px;
  padding: 4px 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.gallery-card__stars {
  display: flex;
  align-items: center;
}

.gallery-card__stars button {
  width: 15px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--button-text-inactive-color) 55%, transparent);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 90ms ease, transform 90ms ease;
}

.gallery-card__stars button:hover,
.gallery-card__stars button:focus-visible,
.gallery-card__stars button.is-active {
  color: #efbd48;
  outline: 0;
}

.gallery-card__stars button:hover,
.gallery-card__stars button:focus-visible {
  transform: scale(1.15);
}

.gallery-card__color-menu {
  position: relative;
  height: 20px;
}

.gallery-card__color-menu > summary {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  list-style: none;
  border-radius: 5px;
  cursor: pointer;
}

.gallery-card__color-menu > summary::-webkit-details-marker {
  display: none;
}

.gallery-card__color-menu > summary:hover,
.gallery-card__color-menu[open] > summary {
  background: var(--hover-button-bg-color);
}

.gallery-card__color-menu > div {
  position: absolute;
  z-index: 12;
  top: calc(100% + 4px);
  right: -4px;
  width: 126px;
  padding: 4px;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 9px 24px rgb(0 0 0 / 40%);
}

.gallery-card__color-menu button {
  width: 100%;
  min-height: 26px;
  padding: 3px 6px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--button-text-color);
  font: inherit;
  font-size: 9px;
  text-align: left;
  cursor: pointer;
}

.gallery-card__color-menu button:hover,
.gallery-card__color-menu button:focus-visible {
  background: var(--hover-button-bg-color);
  outline: 0;
}

.gallery-card__color-menu button strong {
  color: var(--gallery-accent);
}

.gallery-card__edited {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--gallery-accent) 88%, #17202a);
  box-shadow: 0 1px 5px rgb(0 0 0 / 35%);
  color: #fff;
  pointer-events: none;
}

.gallery-card__edited-label {
  display: none;
}

body[data-editor-workflow='raw'] .gallery-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body[data-editor-workflow='raw'] .gallery-browser__header {
  flex-wrap: wrap;
}

body[data-editor-workflow='raw'] .gallery-card__preview {
  aspect-ratio: 4 / 3;
}

body[data-editor-workflow='raw'] .gallery-card__edited {
  width: auto;
  min-width: 22px;
  padding: 0 7px;
  gap: 4px;
  border-radius: 11px;
}

body[data-editor-workflow='raw'] .gallery-card__edited-label {
  display: inline;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .01em;
}

.gallery-card__edited--with-remove {
  right: 38px;
}

.gallery-card__editing-mark {
  position: absolute;
  z-index: 3;
  left: 6px;
  bottom: 6px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--gallery-accent) 90%, #17202a);
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgb(0 0 0 / 42%);
  pointer-events: none;
}

.gallery-card__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(22, 25, 31, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  place-items: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.gallery-card:hover .gallery-card__remove,
.gallery-card:focus-within .gallery-card__remove {
  opacity: 1;
}

.gallery-card__remove:hover {
  color: #fff;
  background: #a73939;
}

.gallery-card--drop-target {
  border-color: var(--gallery-accent);
  background: var(--gallery-accent-soft);
  box-shadow: inset 0 0 0 2px var(--gallery-accent);
  transform: translateY(-2px) scale(1.015);
}

.gallery-context-menu {
  position: fixed;
  z-index: 90000;
  width: 230px;
  padding: 5px;
  color: var(--button-text-color);
  background: var(--menu-bg-color);
  border: 1px solid var(--button-border-color);
  border-radius: 8px;
  box-shadow:
    0 1px 0 var(--colorplane-chrome-highlight) inset,
    0 12px 32px rgb(0 0 0 / 38%);
}

.gallery-context-menu button {
  display: flex;
  width: 100%;
  padding: 7px 9px;
  gap: 8px;
  align-items: center;
  color: var(--button-text-color);
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
}

.gallery-context-menu button:hover,
.gallery-context-menu button:focus-visible {
  background: var(--hover-button-bg-color);
}

.gallery-context-menu button:focus-visible {
  outline: 2px solid var(--colorplane-ui-accent);
  outline-offset: -2px;
}

.gallery-move-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 28px;
  color: inherit;
  border: 0;
  background: transparent;
  place-items: center;
}

.gallery-move-backdrop::backdrop {
  background: rgb(0 0 0 / 58%);
}

.gallery-move-dialog {
  display: flex;
  width: min(440px, calc(100vw - 56px));
  max-height: min(620px, calc(100vh - 56px));
  flex-direction: column;
  overflow: hidden;
  color: var(--button-text-color);
  background: var(--gallery-surface);
  border: 1px solid var(--gallery-border);
  border-radius: 12px;
  box-shadow: 0 22px 64px rgb(0 0 0 / 52%);
}

.gallery-move-dialog__header {
  display: flex;
  padding: 16px 18px 13px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--gallery-border);
}

.gallery-move-dialog__header h2,
.gallery-move-dialog__header p {
  margin: 0;
}

.gallery-move-dialog__header h2 {
  font-size: 16px;
}

.gallery-move-dialog__header p {
  margin-top: 4px;
  color: var(--button-text-inactive-color);
  font-size: 12px;
}

.gallery-move-dialog__header > button {
  padding: 0 4px;
  color: var(--button-text-inactive-color);
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

.gallery-move-tree {
  min-height: 180px;
  overflow: auto;
  padding: 10px;
}

.gallery-move-tree__item {
  display: flex;
  width: 100%;
  min-height: 34px;
  gap: 8px;
  align-items: center;
  color: var(--button-text-color);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.gallery-move-tree__item:hover:not(:disabled) {
  background: var(--gallery-surface-raised);
}

.gallery-move-tree__item[aria-selected='true'] {
  color: var(--button-text-hover-color);
  background: var(--gallery-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 55%, transparent);
}

.gallery-move-tree__item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gallery-move-dialog__loading,
.gallery-move-dialog__error {
  display: block;
  padding: 12px;
  color: var(--button-text-inactive-color);
}

.gallery-move-dialog__error {
  margin: 0 14px 10px;
  color: #ffb3b3;
  background: rgb(167 57 57 / 18%);
  border-radius: 6px;
}

.gallery-move-dialog__footer {
  display: flex;
  padding: 12px 14px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--gallery-border);
}

.gallery-move-dialog__footer > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--button-text-inactive-color);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-move-dialog__footer > button {
  display: inline-flex;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
}

.gallery-secondary-button {
  padding: 8px 12px;
  color: var(--button-text-color);
  background: var(--gallery-surface-raised);
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
  cursor: pointer;
}

.gallery-card__placeholder {
  color: var(--button-text-inactive-color);
  opacity: 0.7;
}

.gallery-card__placeholder--error {
  color: #d86666;
}

.gallery-card__name {
  padding: 7px 4px 3px;
  overflow: hidden;
  font-size: 11px;
  line-height: 15px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card__name--file {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.gallery-card__prepared-icon,
.gallery-card__preparing-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--gallery-accent) 86%, var(--button-text-color));
}

.gallery-card__prepared-icon svg,
.gallery-card__preparing-icon svg {
  width: 12px;
  height: 12px;
}

.gallery-card__preparing-icon {
  width: 16px;
  height: 16px;
  color: #fff;
  background: #32945b;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
}

.gallery-card__preparing-icon svg {
  width: 11px;
  height: 11px;
  animation: gallery-preparing-icon-spin 1.15s linear infinite;
}

@keyframes gallery-preparing-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

.gallery-card__basename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-card__extension {
  flex: 0 0 auto;
  color: var(--button-text-inactive-color);
}

.gallery-card__loading {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(5 9 14 / 60%);
  backdrop-filter: blur(2px);
}

.gallery-card__loading-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-card__loading-label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.gallery-card__loading-label small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

.gallery-card--folder .gallery-card__preview {
  background:
    radial-gradient(circle at 50% 42%, var(--gallery-accent-soft), transparent 58%),
    var(--gallery-surface-raised);
}

.gallery-folder-art {
  color: color-mix(in srgb, var(--gallery-accent) 80%, var(--button-text-color));
}

.gallery-folder-thumbnails {
  position: absolute;
  inset: 0;
  background: var(--gallery-surface-raised);
}

.gallery-folder-thumbnail {
  position: absolute;
  overflow: hidden;
  width: calc(50% + 1px);
  height: calc(50% + 1px);
}

.gallery-folder-thumbnail:nth-child(1) {
  top: 0;
  left: 0;
}

.gallery-folder-thumbnail:nth-child(2) {
  top: 0;
  right: 0;
}

.gallery-folder-thumbnail:nth-child(3) {
  bottom: 0;
  left: 0;
}

.gallery-folder-thumbnail:nth-child(4) {
  right: 0;
  bottom: 0;
}

.gallery-folder-thumbnails--1 .gallery-folder-thumbnail {
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-folder-thumbnails--2 .gallery-folder-thumbnail {
  top: 0;
  bottom: 0;
  height: 100%;
}

.gallery-folder-thumbnails--3 .gallery-folder-thumbnail:first-child {
  top: 0;
  right: 0;
  width: 100%;
}

.gallery-folder-thumbnails--3 .gallery-folder-thumbnail:nth-child(2) {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

.gallery-folder-thumbnails--3 .gallery-folder-thumbnail:nth-child(3) {
  right: 0;
  left: auto;
}

.gallery-folder-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}

.gallery-folder-preparing {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(8 12 17 / 76%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  color: #fff;
  font-size: 9px;
  line-height: 13px;
  white-space: nowrap;
  backdrop-filter: blur(5px);
  transform: translate(-50%, -50%);
}

.gallery-folder-preparing__spinner {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1.5px solid rgb(255 255 255 / 28%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gallery-directory-spin 700ms linear infinite;
}

.gallery-folder-count {
  position: absolute;
  z-index: 1;
  right: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(8 12 17 / 76%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.cache-panel {
  --cache-accent: #448ee4;
  --cache-accent-soft: rgb(68 142 228 / 16%);
  min-height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--main-bg-color);
  color: var(--button-text-color);
}

.cache-panel__cards {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cache-panel__card {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--button-border-color);
  border-radius: 12px;
  background: var(--button-bg-color);
  box-shadow: 0 12px 34px rgb(0 0 0 / 10%);
}

.cache-panel__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cache-panel__heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.cache-panel__heading p {
  margin: 4px 0 0;
  color: var(--button-text-inactive-color);
  font-size: 11px;
  line-height: 1.4;
}

.cache-panel__icon-wrap {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--cache-accent-soft);
  color: var(--cache-accent);
}

.cache-panel__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.cache-panel__usage {
  margin-top: 22px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background: var(--main-bg-color);
}

.cache-panel__usage strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cache-panel__usage span {
  margin-top: 4px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cache-panel__details {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cache-panel__details div {
  padding: 10px 12px;
  border: 1px solid var(--button-border-color);
  border-radius: 8px;
}

.cache-panel__details dt {
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.cache-panel__details dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.cache-panel__reset {
  width: 100%;
  min-height: 34px;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, #d86666 70%, var(--button-border-color));
  border-radius: 7px;
  background: transparent;
  color: #d86666;
  font: inherit;
  cursor: pointer;
}

.cache-panel__reset:hover:not(:disabled) {
  background: rgb(216 102 102 / 10%);
}

.cache-panel__reset:disabled {
  cursor: default;
  opacity: 0.45;
}

.cache-panel__error {
  width: min(440px, 100%);
  margin: 12px 0 0;
  color: #d86666;
  font-size: 11px;
  line-height: 1.4;
}

.gallery-state {
  max-width: 430px;
  min-height: 100%;
  margin: 0 auto;
  padding: 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--props-text-color);
  text-align: center;
}

.gallery-state--empty {
  min-height: min(480px, 100%);
}

.gallery-state--compact,
.gallery-state--error {
  min-height: 260px;
}

.gallery-state__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gallery-border);
  border-radius: 13px;
  background: var(--gallery-surface-raised);
  color: var(--gallery-accent);
  box-shadow: 0 10px 28px rgb(0 0 0 / 8%);
}

.gallery-state__icon--large {
  width: 62px;
  height: 62px;
  border-radius: 18px;
}

.gallery-state__eyebrow {
  margin-bottom: 7px;
  color: var(--gallery-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-state__title {
  color: var(--button-text-color);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
}

.gallery-state__copy {
  max-width: 350px;
  margin-top: 9px;
  line-height: 1.5;
}

.gallery-state__detail {
  margin-top: 12px;
  color: var(--button-text-inactive-color);
  font-size: 10px;
}

.gallery-photo-start__icon {
  position: relative;
  width: 82px;
  height: 82px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 58%, var(--gallery-border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 16%), transparent 40%),
    color-mix(in srgb, var(--gallery-accent) 18%, var(--gallery-surface-raised));
  color: var(--gallery-accent);
  box-shadow: 0 18px 42px rgb(0 0 0 / 18%);
}

.gallery-photo-start__icon i {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 3px solid var(--gallery-surface);
  border-radius: 50%;
  background: var(--gallery-accent);
  color: #fff;
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}

.gallery-photo-start__primary {
  min-width: 220px;
  min-height: 52px;
  border-radius: 13px;
  font-size: 14px;
}

.gallery-photo-start__secondary {
  min-height: 38px;
  margin-top: 8px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--button-text-inactive-color);
  font: inherit;
  cursor: pointer;
}

.gallery-photo-start__secondary:hover {
  color: var(--button-text-color);
}

.gallery-primary-button {
  min-height: 34px;
  margin-top: 20px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--gallery-accent) 74%, #000);
  border-radius: 7px;
  background: var(--gallery-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 5px 14px rgb(38 100 170 / 20%);
  cursor: pointer;
}

.gallery-primary-button:hover {
  filter: brightness(1.08);
}

.gallery-primary-button:disabled {
  cursor: progress;
  opacity: 0.65;
}

.gallery-directory-loading {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.gallery-browser > .gallery-directory-loading {
  position: absolute;
  inset: 45px 0 0;
  min-height: 0;
}

.gallery-directory-loading__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--gallery-accent) 22%, transparent);
  border-top-color: var(--gallery-accent);
  border-radius: 50%;
  animation: gallery-directory-spin 700ms linear infinite;
}

.gallery-directory-loading__elapsed {
  color: var(--button-text-inactive-color);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@keyframes gallery-directory-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-directory-loading__spinner,
  .gallery-folder-preparing__spinner {
    animation-duration: 1.4s;
  }
}

@media (max-width: 420px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  }

  .gallery-browser {
    padding-inline: 8px;
  }

  .gallery-state {
    padding-inline: 20px;
  }
}

body.phone-layout .gallery-toolbar {
  min-height: 56px;
  padding: 4px 8px;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

body.phone-layout .gallery-toolbar__location {
  width: auto;
  min-height: 48px;
  flex: 0 0 auto;
}

body.phone-layout .gallery-toolbar__location:empty {
  display: none;
}

body.phone-layout .gallery-folder-picker {
  max-width: none;
  height: 48px;
}

body.phone-layout .gallery-folder-picker__trigger {
  padding-inline: 13px;
  font-size: 14px;
}

body.phone-layout .gallery-toolbar__actions {
  width: 100%;
  min-height: 48px;
  flex-wrap: nowrap;
  gap: 6px;
}

body.phone-layout .gallery-folder-picker {
  min-width: 112px;
  flex: 1 1 auto;
}

body.phone-layout .gallery-add-menu {
  flex: 0 0 auto;
}

body.phone-layout .gallery-add-menu__trigger {
  min-width: 104px;
  height: 48px;
  border-radius: 12px;
  font-size: 12px;
}

body.phone-layout .gallery-utility-menu {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

body.phone-layout .gallery-utility-menu__trigger {
  display: inline-flex;
}

body.phone-layout .gallery-toolbar__utilities {
  position: fixed;
  z-index: 99970;
  display: none;
  width: min(292px, calc(100vw - 16px));
  max-height: min(62vh, 480px);
  overflow-y: auto;
  padding: 7px;
  align-items: stretch;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--button-border-color);
  border-radius: 14px;
  background: var(--menu-bg-color);
  box-shadow: 0 14px 40px rgb(0 0 0 / 42%);
  color: var(--button-text-color);
  overscroll-behavior: contain;
}

body.phone-layout .gallery-toolbar__utilities--open {
  display: flex;
}

body.phone-layout .gallery-toolbar__utilities :is(.gallery-icon-button, .gallery-prepare-button) {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  justify-content: flex-start;
  gap: 10px;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--button-text-color);
  font-size: 12px;
}

body.phone-layout .gallery-toolbar__utilities .gallery-icon-button[aria-label]::after {
  content: attr(aria-label);
}

body.phone-layout .gallery-toolbar__utilities :is(.gallery-icon-button, .gallery-prepare-button):hover,
body.phone-layout .gallery-toolbar__utilities :is(.gallery-icon-button, .gallery-prepare-button):focus-visible {
  background: var(--hover-button-bg-color);
}

body.phone-layout .gallery-toolbar__utilities > .preset-group-controls {
  display: contents;
}

body.phone-layout .gallery-icon-button,
body.phone-layout .gallery-prepare-button {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-color: var(--gallery-border);
  border-radius: 12px;
  background: var(--gallery-surface-raised);
}

body.phone-layout .gallery-prepare-button {
  width: auto;
  padding-inline: 13px;
}

body.phone-layout .gallery-add-menu__menu,
body.phone-layout .gallery-folder-picker__menu {
  width: min(calc(100vw - 16px), 360px);
  max-height: min(62vh, 520px);
  padding: 8px;
  border-radius: 14px;
}

body.phone-layout .gallery-add-menu__menu {
  left: -4px;
  transform: none;
}

body.phone-layout .gallery-add-menu__menu > button,
body.phone-layout .gallery-folder-picker__option {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 10px;
}

body.phone-layout .gallery-add-menu__menu strong,
body.phone-layout .gallery-folder-picker__option strong {
  font-size: 13px;
}

body.phone-layout .gallery-add-menu__menu small,
body.phone-layout .gallery-folder-picker__option small {
  font-size: 11px;
}

body.phone-layout .gallery-browser {
  padding-inline: 10px;
}

body.phone-layout .gallery-browser__header {
  min-height: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
}

body.phone-layout .gallery-browser__path-row {
  grid-column: 1 / -1;
}

body.phone-layout .gallery-breadcrumbs {
  min-height: 30px;
}

body.phone-layout .gallery-breadcrumbs button {
  min-height: 30px;
  padding: 3px 7px;
  font-size: 12px;
}

body.phone-layout .gallery-filename-filter {
  width: auto;
  flex: none;
}

body.phone-layout .gallery-filename-filter input,
body.phone-layout .gallery-filter-menu > summary {
  height: 40px;
  min-height: 40px;
  border-radius: 9px;
  font-size: 12px;
}

body.phone-layout .gallery-filter-menu > summary {
  padding-inline: 13px;
}

body.phone-layout .gallery-browser__status {
  display: none;
}

body.phone-layout .gallery-editing-mark-note {
  padding: 9px 11px;
  font-size: 11px;
}

body.phone-layout .gallery-editing-basket-actions button {
  min-height: 40px;
}

body.phone-layout .gallery-editing-mark-actions button {
  min-height: 40px;
}

body.phone-layout .gallery-local-storage-notice {
  min-height: 34px;
  margin-top: 4px;
  padding: 6px 9px;
  align-items: center;
  font-size: 10px;
}

body.phone-layout .gallery-local-storage-notice > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.phone-layout .gallery-local-storage-notice__usage {
  display: none;
}

body.phone-layout .gallery-photo-start {
  min-height: calc(100% - 110px);
  padding: 28px 18px 40px;
}

body.phone-layout .gallery-photo-start .gallery-state__title {
  font-size: 25px;
}

body.phone-layout .gallery-photo-start .gallery-state__copy {
  max-width: 310px;
  font-size: 14px;
}

body.phone-layout .gallery-photo-start__primary {
  width: min(100%, 310px);
  height: 58px;
  margin-top: 24px;
  border-radius: 15px;
  font-size: 16px;
}

body.phone-layout .gallery-photo-start__secondary {
  display: none;
}

body.phone-layout .gallery-panel:has(.gallery-browser--uploaded-empty) .gallery-toolbar {
  min-height: 64px;
  align-items: center;
  flex-direction: row;
}

body.phone-layout .gallery-panel:has(.gallery-browser--uploaded-empty) .gallery-toolbar__location {
  width: auto;
  flex: 0 0 auto;
}

body.phone-layout .gallery-panel:has(.gallery-browser--uploaded-empty) .gallery-toolbar__actions {
  width: 100%;
  min-height: 48px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

body.phone-layout .gallery-panel:has(.gallery-browser--uploaded-empty) .gallery-folder-picker {
  min-width: 112px;
  flex: 1 1 auto;
}

body.phone-layout .gallery-panel:has(.gallery-browser--uploaded-empty)
  .gallery-toolbar__utilities {
  display: none;
}

@container gallery-panel (max-width: 560px) {
  body:not(.phone-layout) .gallery-toolbar {
    min-height: 78px;
    padding: 7px 8px;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
  }

  body:not(.phone-layout) .gallery-toolbar__location:empty {
    display: none;
  }

  body:not(.phone-layout) .gallery-toolbar__actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 6px;
  }

  body:not(.phone-layout) .gallery-toolbar__status {
    grid-column: 1 / -1;
  }

  body:not(.phone-layout) .gallery-folder-picker {
    width: 100%;
    max-width: none;
    flex: none;
  }

  body:not(.phone-layout) .gallery-add-menu {
    justify-self: end;
  }

  body:not(.phone-layout) .gallery-add-menu__menu {
    right: 0;
    left: auto;
    transform: none;
  }

  body:not(.phone-layout) .gallery-toolbar__utilities {
    grid-column: 1 / -1;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

body.phone-layout .gallery-browser--uploaded-empty .gallery-browser__header,
body.phone-layout .gallery-browser--uploaded-empty .gallery-local-storage-notice {
  display: none;
}

body.phone-layout .gallery-browser--uploaded-empty .gallery-photo-start {
  min-height: 100%;
}

body.phone-layout .gallery-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.phone-layout .gallery-card {
  padding: 7px;
  border-radius: 15px;
  touch-action: manipulation;
}

body.phone-layout .gallery-card__review {
  min-height: 58px;
  padding-top: 5px;
  gap: 8px;
}

body.phone-layout .gallery-card__stars button {
  width: 48px;
  min-width: 48px;
  height: 52px;
  font-size: 25px;
}

body.phone-layout .gallery-card__color-menu {
  height: 52px;
}

body.phone-layout .gallery-card__color-menu > summary {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

body.phone-layout .gallery-card__color-menu-backdrop {
  position: fixed;
  z-index: 99980;
  inset: 0 0 var(--mobile-nav-height);
  display: flex;
  padding: 10px max(10px, env(safe-area-inset-right, 0px))
    10px max(10px, env(safe-area-inset-left, 0px));
  align-items: flex-end;
  background: rgb(4 8 13 / 54%);
  backdrop-filter: blur(4px);
}

body.phone-layout .gallery-card__color-menu-sheet {
  width: 100%;
  max-height: min(62vh, 520px);
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--gallery-border);
  border-radius: 15px;
  background: var(--gallery-surface-raised);
  box-shadow: 0 16px 50px rgb(0 0 0 / 58%);
  -webkit-overflow-scrolling: touch;
}

body.phone-layout .gallery-card__color-menu-sheet > strong {
  display: block;
  padding: 12px;
  color: var(--button-text-color);
  font-size: 16px;
}

body.phone-layout .gallery-card__color-menu-sheet button {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  color: var(--button-text-color);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
}

body.phone-layout .gallery-card__remove {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 12px;
  opacity: 1;
}

@media (orientation: landscape) and (max-height: 600px) {
  body.phone-layout .gallery-photo-start {
    padding: 7px 16px 10px;
    justify-content: flex-start;
  }

  body.phone-layout .gallery-photo-start__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    border-radius: 14px;
  }

  body.phone-layout .gallery-photo-start__icon .gallery-icon {
    width: 26px;
    height: 26px;
  }

  body.phone-layout .gallery-photo-start__icon i {
    right: -4px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-width: 2px;
    font-size: 15px;
  }

  body.phone-layout .gallery-photo-start .gallery-state__eyebrow,
  body.phone-layout .gallery-photo-start .gallery-state__detail {
    display: none;
  }

  body.phone-layout .gallery-photo-start .gallery-state__title {
    font-size: 20px;
  }

  body.phone-layout .gallery-photo-start .gallery-state__copy {
    max-width: 360px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
  }

  body.phone-layout .gallery-photo-start__primary {
    width: min(100%, 310px);
    height: 50px;
    margin-top: 8px;
    font-size: 14px;
  }
}

.export-panel {
  --gallery-accent: #448ee4;
  --gallery-accent-soft: rgb(68 142 228 / 16%);
  --gallery-border: color-mix(in srgb, var(--button-border-color) 68%, transparent);
  --gallery-surface: color-mix(in srgb, var(--main-bg-color) 88%, var(--button-bg-color));
  --gallery-surface-raised: color-mix(in srgb, var(--main-bg-color) 70%, var(--button-bg-color));

  position: absolute;
  inset: 0;
  container: export-panel / inline-size;
  overflow: auto;
  color: var(--button-text-color);
  background: var(--gallery-surface);
}

body.dark-theme .export-panel {
  --gallery-border: rgb(255 255 255 / 12%);
  --gallery-surface: #242628;
  --gallery-surface-raised: #303336;
}

.export-panel *,
.export-panel *::before,
.export-panel *::after {
  box-sizing: border-box;
}

.export-header {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 24px 18px;
  background: color-mix(in srgb, var(--gallery-surface) 88%, transparent);
  border-bottom: 1px solid var(--gallery-border);
}

.export-header h1,
.export-header p {
  margin: 0;
}

.export-header h1 {
  margin-top: 2px;
  font-size: 24px;
  line-height: 1.15;
}

.export-header p {
  margin-top: 6px;
  color: var(--props-text-color);
  font-size: 12px;
}

.export-eyebrow {
  color: var(--gallery-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.export-settings {
  display: grid;
  padding: 18px 24px 16px;
  gap: 14px;
  background: var(--gallery-surface-raised);
  border-bottom: 1px solid var(--gallery-border);
}

.export-queue-count {
  display: inline-flex;
  min-height: 30px;
  padding: 0 11px;
  align-items: center;
  flex: none;
  color: var(--props-text-color);
  font-size: 11px;
  background: var(--gallery-surface-raised);
  border: 1px solid var(--gallery-border);
  border-radius: 999px;
}

.export-settings__heading,
.export-action-bar__summary {
  display: flex;
  gap: 11px;
  align-items: center;
}

.export-header > div,
.export-settings__heading > div,
.export-action-bar__summary > span:last-child,
.export-download-note > span {
  min-width: 0;
}

.export-settings__heading h2,
.export-settings__heading p {
  margin: 0;
}

.export-settings__heading h2 {
  font-size: 14px;
}

.export-settings__heading p {
  margin-top: 2px;
  color: var(--props-text-color);
  font-size: 11px;
}

.export-step {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: var(--gallery-accent);
  border-radius: 50%;
}

.export-destination-options {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.export-destination-card {
  position: relative;
  display: flex;
  min-height: 76px;
  padding: 12px 34px 12px 12px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  background: var(--gallery-surface);
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.export-destination-card:hover:not(.export-destination-card--disabled) {
  border-color: color-mix(in srgb, var(--gallery-accent) 55%, var(--gallery-border));
}

.export-destination-card--selected {
  background: color-mix(in srgb, var(--gallery-accent) 9%, var(--gallery-surface));
  border-color: var(--gallery-accent);
  box-shadow: inset 0 0 0 1px var(--gallery-accent);
}

.export-destination-card--disabled {
  cursor: not-allowed;
  opacity: .48;
}

.export-destination-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  opacity: 0;
}

.export-destination-card:focus-within {
  outline: 2px solid color-mix(in srgb, var(--gallery-accent) 70%, transparent);
  outline-offset: 2px;
}

.export-destination-card__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: none;
  color: var(--gallery-accent);
  background: var(--gallery-accent-soft);
  border-radius: 9px;
}

.export-destination-card__icon svg,
.export-folder-button svg,
.export-download-note svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.export-destination-card__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.export-destination-card__copy strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.export-destination-card__copy small {
  color: var(--props-text-color);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.export-destination-card__check {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--gallery-border);
  border-radius: 50%;
}

.export-destination-card--selected .export-destination-card__check {
  color: #fff;
  background: var(--gallery-accent);
  border-color: var(--gallery-accent);
}

.export-field > span {
  color: var(--props-text-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.export-folder-button {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-field {
  display: grid;
  gap: 5px;
}

.export-field select,
.export-format-field select {
  min-height: 30px;
  padding: 4px 28px 4px 9px;
  color: var(--button-text-color);
  background: var(--gallery-surface);
  border: 1px solid var(--gallery-border);
  border-radius: 6px;
}

.export-field--quality {
  width: 180px;
  margin-left: auto;
}

.export-field--quality > span {
  display: flex;
  justify-content: space-between;
}

.export-field--exif {
  width: min(280px, 100%);
}

.export-field--exif > span:first-child {
  color: var(--button-text-color);
}

.export-field > .export-exif-toggle {
  display: flex;
  min-height: 30px;
  gap: 8px;
  align-items: center;
  color: var(--button-text-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.export-exif-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gallery-accent);
  cursor: pointer;
}

.export-field--exif small {
  color: var(--button-text-color);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  opacity: 0.92;
}

.export-options-row {
  display: flex;
  min-height: 44px;
  gap: 18px;
  align-items: end;
}

.export-folder-settings {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: end;
  flex: 1;
}

.export-download-note {
  display: flex;
  min-height: 36px;
  gap: 8px;
  align-items: center;
  flex: 1;
  color: var(--props-text-color);
  font-size: 11px;
}

.export-download-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gallery-accent);
}

.export-action-bar {
  display: flex;
  min-height: 70px;
  padding: 12px 24px;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--gallery-surface) 92%, transparent);
  border-bottom: 1px solid var(--gallery-border);
  box-shadow: 0 4px 12px rgb(0 0 0 / 4%);
}

.export-action-bar__summary > span:last-child {
  display: grid;
  gap: 3px;
}

.export-action-bar__summary strong {
  font-size: 12px;
}

.export-action-bar__summary small {
  max-width: 460px;
  color: var(--props-text-color);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.export-action-bar__buttons {
  display: flex;
  gap: 8px;
  flex: none;
}

.export-button {
  box-sizing: border-box;
  display: inline-flex;
  height: 36px;
  min-width: 112px;
  padding: 0 14px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: var(--button-text-color);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--gallery-border);
  border-radius: 7px;
}

.export-button svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.export-button--secondary {
  background: var(--gallery-surface-raised);
}

.export-button--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gallery-accent) 8%, var(--gallery-surface-raised));
  border-color: color-mix(in srgb, var(--gallery-accent) 50%, var(--gallery-border));
}

.export-button--primary {
  min-width: 150px;
  color: #fff;
  background: var(--gallery-accent);
  border-color: color-mix(in srgb, var(--gallery-accent) 72%, #000);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--gallery-accent) 32%, transparent);
}

.export-button--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gallery-accent) 88%, #fff);
}

.export-button:disabled {
  cursor: default;
  opacity: .48;
}

.export-summary {
  padding: 9px 24px;
  color: color-mix(in srgb, var(--gallery-accent) 70%, var(--button-text-color));
  background: var(--gallery-accent-soft);
  border-bottom: 1px solid var(--gallery-border);
}

.export-queue {
  display: grid;
  padding: 18px 24px 28px;
  gap: 10px;
}

.export-queue-item {
  overflow: hidden;
  background: var(--gallery-surface-raised);
  border: 1px solid var(--gallery-border);
  border-radius: 9px;
}

.export-queue-item--error {
  border-color: rgb(205 71 71 / 65%);
}

.export-queue-item__main {
  display: flex;
  min-height: 62px;
  padding: 10px 10px 9px 12px;
  gap: 11px;
  align-items: center;
}

.export-queue-item__icon,
.export-empty__icon {
  display: grid;
  place-items: center;
  color: var(--gallery-accent);
}

.export-queue-item__icon {
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--gallery-accent-soft);
  border-radius: 8px;
}

.export-queue-item__icon .preset-group-icon,
.export-empty__icon .preset-group-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.export-queue-item__identity {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.export-queue-item__identity strong,
.export-queue-item__identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-queue-item__identity strong {
  font-size: 13px;
}

.export-queue-item__identity span {
  color: var(--props-text-color);
  font-size: 11px;
}

.export-format-field {
  flex: none;
}

.export-icon-button {
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  color: var(--props-text-color);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.export-icon-button:hover:not(:disabled) {
  color: #ef7777;
  background: rgb(205 71 71 / 12%);
}

.export-progress {
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gallery-border) 55%, transparent);
}

.export-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--gallery-accent);
  transition: width 160ms ease;
}

.export-queue-item--done .export-progress span {
  background: #4cb27a;
}

.export-queue-item--error .export-progress span {
  background: #cd4747;
}

.export-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  color: var(--props-text-color);
  text-align: center;
}

.export-empty__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 9px;
  background: var(--gallery-accent-soft);
  border-radius: 14px;
}

.export-empty h2,
.export-empty p {
  margin: 0;
}

.export-empty h2 {
  color: var(--button-text-color);
  font-size: 16px;
}

.export-empty p {
  max-width: 320px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.export-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@container export-panel (max-width: 700px) {
  .export-header {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 16px;
  }

  .export-settings {
    padding-inline: 16px;
  }

  .export-destination-options {
    grid-template-columns: 1fr;
  }

  .export-options-row,
  .export-folder-settings,
  .export-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .export-field--quality {
    width: 100%;
    margin-left: 0;
  }

  .export-field--exif {
    width: 100%;
  }

  .export-action-bar {
    padding-inline: 16px;
  }

  .export-action-bar__buttons {
    width: 100%;
  }

  .export-action-bar__buttons .export-button {
    min-width: 0;
    flex: 1;
  }

  .export-queue {
    padding-inline: 16px;
  }

  .export-field,
  .export-field select,
  .export-folder-button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@container export-panel (max-width: 320px) {
  .export-destination-card {
    padding: 10px 30px 10px 10px;
    gap: 8px;
  }

  .export-destination-card__icon {
    width: 32px;
    height: 32px;
  }

  .export-destination-card__check {
    top: 8px;
    right: 8px;
  }

  .export-action-bar__summary {
    align-items: flex-start;
  }

  .export-action-bar__buttons {
    flex-direction: column;
  }

  .export-action-bar__buttons .export-button {
    width: 100%;
    height: auto;
    min-height: 36px;
    padding-block: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .export-queue-item__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 8px;
  }

  .export-queue-item__icon {
    display: none;
  }

  .export-queue-item__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .export-format-field {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .export-format-field select {
    width: 100%;
    min-width: 0;
  }

  .export-icon-button {
    grid-column: 2;
    grid-row: 1;
  }
}
/*
 * Colorplane professional chrome
 *
 * A restrained, photography-first finish inspired by the clarity of classic
 * Apple pro applications. Brand color identifies Colorplane experiences;
 * blue identifies selection and direct manipulation. The layer is loaded
 * after feature styles so panels keep one coherent material system.
 */

body {
  --colorplane-ui-accent: var(--colorplane-accent);
  --colorplane-ui-accent-rgb: var(--colorplane-accent-rgb);
  --colorplane-ui-accent-strong: var(--colorplane-accent-strong);
  --colorplane-hairline: rgb(255 255 255 / 11%);
  --colorplane-hairline-dark: rgb(0 0 0 / 42%);
  --colorplane-chrome-highlight: rgb(255 255 255 / 9%);
  --colorplane-chrome-shadow: rgb(0 0 0 / 32%);
  --colorplane-radius-control: 6px;
  --colorplane-radius-panel: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
}

body[data-accent-palette='standard'] {
  --colorplane-ui-accent: #4f8fce;
  --colorplane-ui-accent-rgb: 79 143 206;
  --colorplane-ui-accent-strong: #2e6fae;
}

body.dark-theme {
  --main-bg-color: #2d2f32;
  --main-bg-color-deep: #17181a;
  --main-bg-color-props: #26282b;
  --main-text-color-deep: #c9cdd2;
  --button-bg-color: #3a3d41;
  --active-button-bg-color: #4a4e53;
  --hover-button-bg-color: #44484d;
  --props-text-color: #c4c8cd;
  --props-header-text-color: #e2e5e8;
  --button-text-color: #e4e7ea;
  --button-text-inactive-color: #8f959c;
  --button-text-hover-color: #fff;
  --selected-control-text-color: #f7fbff;
  --button-border-color: #17191c;
  --checked-bg-color: #36393d;
  --button-menu-color-active: #202225;
  --tab-border-color: rgb(0 0 0 / 38%);
  --slider-side-color: #55585c;
  --slider-mid-color: #707378;
  --menu-bg-color: #25272a;
  --active-select-bg-color: #33363a;
  --colorplane-accordion-gutter: #1d1f22;
  --colorplane-accordion-section: #2a2d31;
  --colorplane-accordion-header: #393d42;
  --colorplane-accordion-header-collapsed: #303338;
  --colorplane-accordion-body: #272a2e;
  --colorplane-accordion-border: #717981;
  --colorplane-accordion-muted: #b5bac0;
  --colorplane-accordion-action: #e4e7ea;
}

body.light-theme {
  --main-bg-color: #d8dade;
  --main-bg-color-deep: #a9adb2;
  --main-bg-color-props: #eceef0;
  --main-text-color-deep: #30343a;
  --button-bg-color: #f2f3f4;
  --active-button-bg-color: #d7dbe0;
  --hover-button-bg-color: #fff;
  --props-text-color: #3f444a;
  --props-header-text-color: #25292e;
  --button-text-color: #23272c;
  --button-text-inactive-color: #737980;
  --button-text-hover-color: #152d45;
  --selected-control-text-color: #15314d;
  --button-border-color: #aeb3b9;
  --checked-bg-color: #e0e3e6;
  --button-menu-color-active: #f7f8f9;
  --tab-border-color: rgb(62 68 75 / 24%);
  --slider-side-color: #b7bbc0;
  --slider-mid-color: #d5d8dc;
  --menu-bg-color: #f0f1f2;
  --active-select-bg-color: #e2e5e8;
  --colorplane-hairline: rgb(255 255 255 / 72%);
  --colorplane-hairline-dark: rgb(58 64 70 / 28%);
  --colorplane-chrome-highlight: rgb(255 255 255 / 68%);
  --colorplane-chrome-shadow: rgb(51 58 66 / 20%);
  --colorplane-accordion-gutter: #c9cdd2;
  --colorplane-accordion-section: #e7eaed;
  --colorplane-accordion-header: #f4f6f8;
  --colorplane-accordion-header-collapsed: #e0e4e8;
  --colorplane-accordion-body: #eceff2;
  --colorplane-accordion-border: #646c75;
  --colorplane-accordion-muted: #565e67;
  --colorplane-accordion-action: #23272c;
}

/*
 * The Claire Noir option is a complete shared color language, not a pink
 * accent pasted onto Colorplane's cool gray chrome. Colorplane keeps its own
 * compact editor geometry while using Claire Noir's paper, ink, stone and
 * oxide-red materials. Technical image canvases remain neutral.
 */
body.dark-theme[data-accent-palette='claire-noir'] {
  --main-bg-color: #2c2b27;
  --main-bg-color-deep: var(--colorplane-ink);
  --main-bg-color-props: #22211d;
  --main-text-color-deep: #d7d2c6;
  --button-bg-color: #393832;
  --active-button-bg-color: #4a4841;
  --hover-button-bg-color: #424039;
  --props-text-color: #c5c0b5;
  --props-header-text-color: var(--colorplane-paper);
  --button-text-color: #e7e2d7;
  --button-text-inactive-color: #8e8a81;
  --button-text-hover-color: var(--colorplane-white);
  --selected-control-text-color: var(--colorplane-white);
  --button-border-color: #141411;
  --checked-bg-color: #34332e;
  --button-menu-color-active: #1b1b17;
  --tab-border-color: rgb(18 18 15 / 58%);
  --slider-side-color: #514f48;
  --slider-mid-color: #716e65;
  --menu-bg-color: #24231f;
  --active-select-bg-color: #34332e;
  --colorplane-hairline: rgb(243 240 231 / 11%);
  --colorplane-hairline-dark: rgb(18 18 15 / 62%);
  --colorplane-chrome-highlight: rgb(243 240 231 / 7%);
  --colorplane-accordion-gutter: #191916;
  --colorplane-accordion-section: #292824;
  --colorplane-accordion-header: #373630;
  --colorplane-accordion-header-collapsed: #302f2a;
  --colorplane-accordion-body: #24231f;
  --colorplane-accordion-border: #767269;
  --colorplane-accordion-muted: #b8b2a8;
  --colorplane-accordion-action: #e7e2d7;
}

body.light-theme[data-accent-palette='claire-noir'] {
  --main-bg-color: var(--colorplane-paper-deep);
  --main-bg-color-deep: #bdb8aa;
  --main-bg-color-props: var(--colorplane-paper);
  --main-text-color-deep: #383730;
  --button-bg-color: var(--colorplane-white);
  --active-button-bg-color: #d8d3c6;
  --hover-button-bg-color: #fffefa;
  --props-text-color: #4f4d47;
  --props-header-text-color: var(--colorplane-ink);
  --button-text-color: #24231f;
  --button-text-inactive-color: #817e75;
  --button-text-hover-color: var(--colorplane-ink);
  --selected-control-text-color: var(--colorplane-ink);
  --button-border-color: #b9b4a7;
  --checked-bg-color: #ded9cc;
  --button-menu-color-active: var(--colorplane-white);
  --tab-border-color: rgb(80 77 69 / 24%);
  --slider-side-color: #bdb8aa;
  --slider-mid-color: #d8d3c7;
  --menu-bg-color: var(--colorplane-paper);
  --active-select-bg-color: #e0dbcf;
  --colorplane-hairline: rgb(255 253 247 / 78%);
  --colorplane-hairline-dark: rgb(74 71 64 / 27%);
  --colorplane-chrome-highlight: rgb(255 253 247 / 66%);
  --colorplane-chrome-shadow: rgb(50 47 41 / 20%);
  --colorplane-accordion-gutter: #cbc6b8;
  --colorplane-accordion-section: #e8e4da;
  --colorplane-accordion-header: #fffdf7;
  --colorplane-accordion-header-collapsed: #e1ddd2;
  --colorplane-accordion-body: #f3f0e7;
  --colorplane-accordion-border: #69665f;
  --colorplane-accordion-muted: #5d5a53;
  --colorplane-accordion-action: #24231f;
}

::selection {
  color: #fff;
  background: rgb(var(--colorplane-ui-accent-rgb) / 82%);
}

#index_body {
  background:
    radial-gradient(circle at 50% -18%, rgb(255 255 255 / 8%), transparent 48%),
    var(--main-bg-color);
}

button,
select,
input,
textarea {
  font: inherit;
}

:is(button, select, input, textarea):focus-visible {
  outline: 2px solid rgb(var(--colorplane-ui-accent-rgb) / 84%);
  outline-offset: 1px;
}

#buttons_panel {
  min-height: 38px;
  padding: 5px 8px 4px;
  border-bottom: 1px solid var(--colorplane-hairline-dark);
  background: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%));
  box-shadow: inset 0 1px var(--colorplane-hairline);
}

.grid-toolbar-dock {
  gap: 5px;
  border-radius: var(--colorplane-radius-control);
}

:is(.topcoat-button, .topcoat-icon-button, .topcoat-select) {
  border-color: var(--colorplane-hairline-dark);
  border-radius: var(--colorplane-radius-control);
  background: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%)), var(--button-bg-color);
  box-shadow: inset 0 1px var(--colorplane-hairline), 0 1px 1px var(--colorplane-chrome-shadow);
  text-shadow: none;
}

:is(.topcoat-button, .topcoat-icon-button):active,
:is(.topcoat-button, .topcoat-icon-button)[aria-pressed='true'] {
  background: var(--active-button-bg-color);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 24%);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container,
#main_tabs_react .main-tabs-floating-window {
  border-color: var(--colorplane-hairline-dark);
  border-radius: var(--colorplane-radius-panel);
  background: var(--main-bg-color-props);
  box-shadow: inset 0 1px var(--colorplane-hairline);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-container--detached,
#main_tabs_react .main-tabs-floating-window {
  box-shadow:
    0 22px 52px rgb(0 0 0 / 44%),
    0 3px 10px rgb(0 0 0 / 25%),
    inset 0 1px var(--colorplane-hairline);
}

:is(#props_container, #scopes, #floating_panels) .preset-group-header,
#main_tabs_react .main-tabs-accordion-header {
  min-height: 42px;
  border-bottom-color: var(--colorplane-hairline-dark);
  background: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%));
}

:is(#props_container, #scopes, #floating_panels) .preset-group-title,
#main_tabs_react .main-tabs-accordion-header .preset-group-title {
  font-weight: 600;
  letter-spacing: -0.012em;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-description {
  letter-spacing: 0;
  opacity: .82;
}

:is(#props_container, #scopes, #floating_panels) .preset-group-icon,
#main_tabs_react .preset-group-icon {
  color: rgb(var(--colorplane-ui-accent-rgb) / 88%);
  stroke-width: 1.25;
}

.floating-panel-tabs,
#main_tabs_react .main-tabs-floating-tabs {
  min-height: 37px;
  padding-top: 4px;
  border-bottom-color: var(--colorplane-hairline-dark);
  background: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%));
}

.floating-panel-tab,
#main_tabs_react .tab-header {
  height: 32px;
  border-radius: 6px 6px 0 0;
  letter-spacing: -0.01em;
}

.floating-panel-tab:hover,
#main_tabs_react .tab-header:hover {
  background: rgb(255 255 255 / 7%);
}

.floating-panel-tab--active,
#main_tabs_react .tab-header.tab-selected,
.floating-panel-accordion-nav-item--active {
  color: var(--selected-control-text-color);
  border-color: rgb(var(--colorplane-ui-accent-rgb) / 44%);
  background: linear-gradient(180deg, rgb(var(--colorplane-ui-accent-rgb) / 24%), rgb(var(--colorplane-ui-accent-rgb) / 12%));
  box-shadow: inset 0 -2px var(--colorplane-ui-accent);
  font-weight: 600;
}

body.dark-theme :is(
  .floating-panel-tab--active,
  #main_tabs_react .tab-header.tab-selected,
  .floating-panel-accordion-nav-item--active
) {
  color: #f4f8fc;
}

.floating-panel-accordion,
#main_tabs_react .main-tabs-accordion-body {
  background: var(--colorplane-accordion-gutter);
}

.floating-panel-accordion-section {
  border-color: var(--colorplane-accordion-border);
  border-radius: 7px;
  background: var(--colorplane-accordion-section);
  box-shadow:
    0 1px 2px var(--colorplane-chrome-shadow),
    inset 0 1px var(--colorplane-hairline);
}

.floating-panel-accordion-section + .floating-panel-accordion-section {
  margin-top: 9px;
}

:is(#props_container, #scopes, #floating_panels)
  .floating-panel-accordion-section > .preset-group-header {
  color: var(--button-text-color);
  border-bottom-color: var(--colorplane-accordion-border);
  background: var(--colorplane-accordion-header-collapsed);
}

:is(#props_container, #scopes, #floating_panels)
  .floating-panel-accordion-section > .preset-group-header[aria-expanded='true'] {
  color: var(--props-header-text-color);
  background: var(--colorplane-accordion-header);
  box-shadow: inset 3px 0 rgb(var(--colorplane-ui-accent-rgb) / 88%);
}

:is(#props_container, #scopes, #floating_panels)
  .floating-panel-accordion-section > .preset-group-header:hover {
  color: var(--button-text-hover-color);
  background: color-mix(
    in srgb,
    var(--colorplane-accordion-header) 88%,
    rgb(var(--colorplane-ui-accent-rgb)) 12%
  );
}

:is(#props_container, #scopes, #floating_panels)
  .floating-panel-accordion-section .preset-group-description {
  color: var(--colorplane-accordion-muted);
  opacity: 1;
}

.floating-panel-accordion-section > .preset-group-body {
  border-top: 1px solid var(--colorplane-accordion-border);
  background: var(--colorplane-accordion-body);
}

.floating-panel-accordion-section > .preset-group-body-hidden {
  border-top-color: transparent;
}

.floating-panel-accordion-section .settings-panel-header-action {
  color: var(--colorplane-accordion-action);
}

.floating-panel-accordion-section .settings-panel-header-action:hover {
  color: var(--button-text-hover-color);
  background: color-mix(
    in srgb,
    var(--colorplane-accordion-action) 14%,
    transparent
  );
}

.floating-panel-accordion-section .settings-panel-header-action[aria-pressed='false'] {
  color: var(--button-text-inactive-color);
}

.floating-panel-accordion-section .settings-panel-header-action.panel-defaults-button:disabled,
.floating-panel-accordion-section .settings-panel-header-action.panel-defaults-button:disabled:hover {
  color: var(--button-text-inactive-color);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.collapsed-dock-launcher,
.bottom-dock-launcher {
  width: 44px;
  height: 44px;
  color: #d7e8f8;
  border-color: rgb(0 0 0 / 52%);
  border-radius: 11px;
  background: linear-gradient(180deg, #45494e, #292c30);
  box-shadow: 0 7px 18px rgb(0 0 0 / 38%), inset 0 1px rgb(255 255 255 / 15%);
  backdrop-filter: none;
}

.collapsed-dock-launcher:hover,
.bottom-dock-launcher:hover {
  border-color: rgb(var(--colorplane-ui-accent-rgb) / 72%);
  background: linear-gradient(180deg, #51565c, #30343a);
  box-shadow: 0 8px 20px rgb(0 0 0 / 42%), inset 0 1px rgb(255 255 255 / 18%);
}

.collapsed-dock-launcher--open,
.bottom-dock-launcher--open,
.collapsed-dock-launcher--open:hover,
.bottom-dock-launcher--open:hover {
  color: #eff8ff;
  border-color: rgb(var(--colorplane-ui-accent-rgb) / 92%);
  background:
    radial-gradient(circle at 50% 18%, rgb(var(--colorplane-ui-accent-rgb) / 23%), transparent 66%),
    linear-gradient(180deg, #4e5963, #303942);
  box-shadow:
    0 8px 22px rgb(0 0 0 / 44%),
    0 0 0 3px rgb(var(--colorplane-ui-accent-rgb) / 15%),
    0 0 15px rgb(var(--colorplane-ui-accent-rgb) / 18%),
    inset 0 1px rgb(255 255 255 / 22%);
}

.collapsed-dock-launcher:hover .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon),
.bottom-dock-launcher:hover .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon) {
  color: #dff1ff !important;
  filter: drop-shadow(0 0 5px rgb(var(--colorplane-ui-accent-rgb) / 58%));
}

.collapsed-dock-launcher--open .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon),
.bottom-dock-launcher--open .panel-launcher-icons > :is(.preset-group-icon, .scope-panel-icon) {
  color: #fff !important;
  filter: drop-shadow(0 0 7px rgb(var(--colorplane-ui-accent-rgb) / 84%));
}

/* Guided mode reveals complexity when a lesson needs it, not before. */
body[data-interface-mode='beginner'] :is(
  .grid-controls-launcher,
  .creative-adjustments-launcher,
  .raw-settings-launcher,
  .scopes-dock-launcher-cluster,
  .scopes-visibility-trigger,
  .collapsed-dock-launcher
) {
  display: none;
}

.colorplane-mode-toggle-container {
  gap: 5px;
  padding: 4px;
  border-color: rgb(0 0 0 / 54%);
  border-radius: 10px;
  background: linear-gradient(180deg, rgb(62 66 72 / 96%), rgb(37 40 44 / 96%));
  box-shadow: 0 7px 18px rgb(0 0 0 / 38%), inset 0 1px rgb(255 255 255 / 15%);
  backdrop-filter: blur(12px) saturate(110%);
}

.colorplane-mode-drag-handle {
  width: 30px;
  min-width: 30px;
  border-radius: 6px;
}

.colorplane-mode-toggle-pill {
  padding: 2px;
  border: 1px solid rgb(0 0 0 / 36%);
  border-radius: 7px;
  background: rgb(0 0 0 / 22%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
}

:is(.colorplane-mode-btn, .colorplane-intro-btn, .colorplane-language-btn, .colorplane-account-btn) {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 550;
}

.colorplane-mode-btn.active {
  color: #fff;
  background: linear-gradient(180deg, #659fd5, #3477b8);
  box-shadow: inset 0 1px rgb(255 255 255 / 24%), 0 1px 2px rgb(0 0 0 / 35%);
  font-weight: 600;
}

.colorplane-intro-btn {
  color: var(--colorplane-accent-soft);
  border-color: rgb(var(--colorplane-accent-rgb) / 34%);
  background: rgb(var(--colorplane-accent-rgb) / 9%);
}

.colorplane-language-btn,
.colorplane-account-btn {
  color: #c1c6cc;
  border-color: rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 4%);
}

body.light-theme .colorplane-mode-toggle-container {
  border-color: rgb(67 73 80 / 42%);
  background: linear-gradient(180deg, rgb(252 253 254 / 96%), rgb(210 213 217 / 96%));
  box-shadow: 0 6px 18px rgb(46 53 61 / 28%), inset 0 1px #fff;
}

body.light-theme .colorplane-mode-toggle-pill {
  background: rgb(77 84 92 / 10%);
}

body.light-theme :is(.colorplane-language-btn, .colorplane-account-btn) {
  color: #4e555d;
  border-color: rgb(68 75 83 / 20%);
  background: rgb(255 255 255 / 42%);
}

:is(.shared-account-panel, .language-panel, .colorplane-intro-modal, .panel-library-dialog) {
  border-color: rgb(0 0 0 / 54%);
  border-radius: 12px;
  box-shadow: 0 26px 70px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 12%);
}

.shared-account-panel__header,
.language-panel > header,
.colorplane-intro-header {
  border-bottom-color: rgb(0 0 0 / 34%);
  background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%));
  box-shadow: inset 0 1px rgb(255 255 255 / 9%);
}

.colorplane-btn-primary {
  background: linear-gradient(180deg, var(--colorplane-accent), var(--colorplane-accent-strong));
  box-shadow: inset 0 1px rgb(255 255 255 / 24%), 0 1px 2px rgb(0 0 0 / 30%);
}

.colorplane-step-card:hover {
  transform: none;
  border-color: rgb(var(--colorplane-ui-accent-rgb) / 42%);
}

.colorplane-intro-title,
.shared-account-panel__body h2,
.language-panel__body h2 {
  letter-spacing: -0.026em;
}

.panel-library-settings-menu,
.panel-library-theme-menu,
.gallery-add-menu__menu,
.gallery-folder-picker__menu {
  border-color: var(--colorplane-hairline-dark);
  border-radius: 8px;
  background: var(--menu-bg-color);
  box-shadow: 0 16px 38px rgb(0 0 0 / 42%), inset 0 1px var(--colorplane-hairline);
}

.panel-library-settings-menu,
.panel-library-theme-menu {
  width: min(272px, calc(100vw - 16px));
  color: var(--button-text-color);
}

.panel-library-settings-menu header,
.panel-library-settings-menu button small {
  color: color-mix(
    in srgb,
    var(--button-text-color) 72%,
    var(--menu-bg-color) 28%
  );
}

.panel-library-settings-menu button:hover,
.panel-library-settings-menu button:focus-visible {
  color: var(--button-text-hover-color);
}

.panel-library-settings-menu .panel-library-settings-choice {
  position: relative;
  padding-right: 38px;
}

.panel-library-settings-choice[aria-checked='true'] {
  color: var(--selected-control-text-color);
  background: rgb(var(--colorplane-ui-accent-rgb) / 12%);
}

.panel-library-settings-choice i {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--colorplane-ui-accent);
  font-size: 13px;
  font-style: normal;
  transform: translateY(-50%);
}

.gallery-panel {
  --gallery-accent: var(--colorplane-ui-accent);
  --gallery-accent-soft: rgb(var(--colorplane-ui-accent-rgb) / 15%);
  --gallery-border: var(--colorplane-hairline-dark);
  --gallery-surface: var(--main-bg-color-props);
  --gallery-surface-raised: var(--button-bg-color);
  --gallery-toolbar: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%));
}

.gallery-toolbar {
  min-height: 42px;
  border-bottom-color: var(--colorplane-hairline-dark);
  box-shadow: inset 0 1px var(--colorplane-hairline);
}

.gallery-folder-picker__trigger {
  border-radius: var(--colorplane-radius-control);
  background: linear-gradient(180deg, var(--colorplane-chrome-highlight), rgb(255 255 255 / 1%)), var(--gallery-surface-raised);
  box-shadow: inset 0 1px var(--colorplane-hairline), 0 1px 1px var(--colorplane-chrome-shadow);
}

.gallery-icon-button {
  border-radius: var(--colorplane-radius-control);
}

body[data-accent-palette='claire-noir'] .colorplane-mode-toggle-container {
  border-color: rgb(243 240 231 / 14%);
  background: rgb(18 18 15 / 91%);
}

body.light-theme[data-accent-palette='claire-noir'] .colorplane-mode-toggle-container {
  border-color: rgb(74 71 64 / 24%);
  background: rgb(243 240 231 / 94%);
  box-shadow: 0 6px 18px rgb(50 47 41 / 23%), inset 0 1px var(--colorplane-white);
}

body.light-theme[data-accent-palette='claire-noir'] .colorplane-mode-toggle-pill {
  background: rgb(18 18 15 / 9%);
}

body.light-theme[data-accent-palette='claire-noir'] :is(.colorplane-language-btn, .colorplane-account-btn) {
  color: #56544e;
  border-color: rgb(74 71 64 / 22%);
  background: rgb(255 253 247 / 48%);
}

body.dark-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-panel,
  .language-panel,
  .colorplane-intro-modal
) {
  color: #dfd9cd;
  border-color: rgb(165 56 39 / 42%);
  background:
    radial-gradient(circle at 12% 0%, rgb(165 56 39 / 15%), transparent 39%),
    linear-gradient(155deg, rgb(42 41 36 / 98%), rgb(18 18 15 / 99%));
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-panel,
  .language-panel,
  .colorplane-intro-modal,
  .panel-library-dialog
) {
  color: var(--colorplane-ink);
  border-color: rgb(74 71 64 / 28%);
  background:
    radial-gradient(circle at 12% 0%, rgb(165 56 39 / 8%), transparent 39%),
    var(--colorplane-paper);
  box-shadow: 0 26px 70px rgb(50 47 41 / 30%), inset 0 1px var(--colorplane-white);
}

body[data-accent-palette='claire-noir'] :is(
  .shared-account-panel__header,
  .language-panel > header,
  .colorplane-intro-header
) {
  border-bottom-color: rgb(18 18 15 / 25%);
  background: linear-gradient(180deg, rgb(255 253 247 / 8%), rgb(255 253 247 / 1%));
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-panel__header,
  .language-panel > header,
  .colorplane-intro-header,
  .colorplane-intro-footer
) {
  border-color: rgb(74 71 64 / 20%);
  background: rgb(229 224 211 / 62%);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .colorplane-intro-title,
  .colorplane-step-card h3,
  .colorplane-mode-choice h3,
  .colorplane-palette-choice button strong,
  .colorplane-readiness-quiz legend,
  .colorplane-editor-familiarity button strong,
  .colorplane-familiar-workflow strong,
  .shared-account-panel__body h2,
  .language-panel__body h2
) {
  color: var(--colorplane-ink);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .colorplane-intro-subtitle,
  .colorplane-step-card p,
  .colorplane-mode-choice p,
  .colorplane-mode-choice li,
  .colorplane-palette-choice button,
  .colorplane-readiness-quiz label,
  .colorplane-editor-familiarity button,
  .colorplane-familiar-workflow p,
  .colorplane-mode-switch-note
) {
  color: var(--colorplane-muted);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .colorplane-mode-choice,
  .colorplane-readiness-quiz fieldset,
  .colorplane-palette-choice button,
  .colorplane-editor-familiarity button,
  .colorplane-step-card
) {
  border-color: rgb(74 71 64 / 19%);
  background: rgb(255 253 247 / 37%);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .colorplane-mode-choice--guided,
  .colorplane-palette-choice button.is-selected,
  .colorplane-editor-familiarity button.is-selected,
  .colorplane-familiar-workflow
) {
  border-color: rgb(var(--colorplane-accent-rgb) / 43%);
  background: rgb(var(--colorplane-accent-rgb) / 7%);
}

body.light-theme[data-accent-palette='claire-noir'] .colorplane-btn-secondary {
  color: #4f4d47;
  border-color: rgb(74 71 64 / 24%);
  background: rgb(255 253 247 / 48%);
}

body.light-theme[data-accent-palette='claire-noir'] .colorplane-btn-navy {
  border-color: #2b5f96;
  background: linear-gradient(180deg, #1d4e83, #123761);
  color: #fff;
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-panel__header strong,
  .shared-account-products b,
  .shared-account-provider,
  .shared-account-without-primary,
  .shared-account-connect,
  .shared-account-profile
) {
  color: var(--colorplane-ink);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-panel__header small,
  .shared-account-panel__body > p:first-of-type,
  .shared-account-products small,
  .shared-account-provider small,
  .shared-account-notice,
  .shared-account-privacy
) {
  color: var(--colorplane-muted);
}

body.light-theme[data-accent-palette='claire-noir'] :is(
  .shared-account-products > span,
  .shared-account-provider,
  .shared-account-notice,
  .shared-account-panel__actions button
) {
  border-color: rgb(74 71 64 / 20%);
  background: rgb(255 253 247 / 42%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: 'luttello';
  src: url('../font/luttello.eot?5626445');
  src: url('../font/luttello.eot?5626445#iefix') format('embedded-opentype'),
       url('../font/luttello.woff2?5626445') format('woff2'),
       url('../font/luttello.woff?5626445') format('woff'),
       url('../font/luttello.ttf?5626445') format('truetype'),
       url('../font/luttello.svg?5626445#luttello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'luttello';
    src: url('../font/luttello.svg?5626445#luttello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "luttello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-eye-off:before { content: '\e800'; } /* '' */
.icon-left-open:before { content: '\e801'; } /* '' */
.icon-four-points:before { content: '\e802'; } /* '' */
.icon-cross:before { content: '\e803'; } /* '' */
.icon-edge:before { content: '\e804'; } /* '' */
.icon-line:before { content: '\e805'; } /* '' */
.icon-plus-circled:before { content: '\e806'; } /* '' */
.icon-cancel:before { content: '\e807'; } /* '' */
.icon-eye:before { content: '\e808'; } /* '' */
.icon-attach-off:before { content: '\e809'; } /* '' */
.icon-attach:before { content: '\e80a'; } /* '' */
.icon-background-on:before { content: '\e80b'; } /* '' */
.icon-background-off:before { content: '\e80c'; } /* '' */
.icon-curve:before { content: '\e80d'; } /* '' */
.icon-square:before { content: '\e80e'; } /* '' */
.icon-swatches-circled:before { content: '\e80f'; } /* '' */
.icon-arrows-ccw:before { content: '\e810'; } /* '' */
.icon-pull:before { content: '\e811'; } /* '' */
.icon-move-two:before { content: '\e812'; } /* '' */
.icon-move-two-vertical:before { content: '\e813'; } /* '' */
.icon-block:before { content: '\e814'; } /* '' */
.icon-levels:before { content: '\e815'; } /* '' */
.icon-aperture:before { content: '\e816'; } /* '' */
.icon-plus:before { content: '\e817'; } /* '' */
.icon-reset:before { content: '\e818'; } /* '' */
.icon-mono:before { content: '\e819'; } /* '' */
.icon-web:before { content: '\e81a'; } /* '' */
.icon-grid:before { content: '\e81b'; } /* '' */
.icon-layer-mask:before { content: '\e81c'; } /* '' */
.icon-invert:before { content: '\e81d'; } /* '' */
.icon-apply:before { content: '\e81e'; } /* '' */
.icon-settings:before { content: '\e81f'; } /* '' */
.icon-one-point:before { content: '\e820'; } /* '' */
.icon-target:before { content: '\e821'; } /* '' */
.icon-cursor:before { content: '\e822'; } /* '' */
.icon-push:before { content: '\e823'; } /* '' */
.icon-loop:before { content: '\e824'; } /* '' */
.icon-loop-top:before { content: '\e825'; } /* '' */
.icon-loop-bottom:before { content: '\e826'; } /* '' */
.icon-lock:before { content: '\e827'; } /* '' */
.icon-selectall:before { content: '\e828'; } /* '' */
.icon-region-circle:before { content: '\e829'; } /* '' */
.icon-samples:before { content: '\e82a'; } /* '' */
.icon-selection-freeze:before { content: '\e82b'; } /* '' */
.icon-ring:before { content: '\e82c'; } /* '' */
.icon-deselect:before { content: '\e82d'; } /* '' */
.icon-polar-move:before { content: '\e82e'; } /* '' */
.icon-selection:before { content: '\e82f'; } /* '' */
.icon-lasso:before { content: '\e830'; } /* '' */
.icon-floppy:before { content: '\e831'; } /* '' */
.icon-up-dir:before { content: '\e832'; } /* '' */
.icon-down-dir:before { content: '\e833'; } /* '' */
.icon-pin:before { content: '\e834'; } /* '' */
.icon-web-line:before { content: '\e835'; } /* '' */
.icon-web-half-line:before { content: '\e836'; } /* '' */
.icon-web-ring:before { content: '\e837'; } /* '' */
.icon-line-rotate2:before { content: '\e838'; } /* '' */
.icon-line-rotate:before { content: '\e839'; } /* '' */
.icon-gauge:before { content: '\e83a'; } /* '' */
.icon-spin5:before { content: '\e83b'; } /* '' */
.icon-selection-plus:before { content: '\e83c'; } /* '' */
.icon-selection-half-minus:before { content: '\e83d'; } /* '' */
.icon-selection-minus:before { content: '\e83e'; } /* '' */
.icon-saturation-up:before { content: '\e83f'; } /* '' */
.icon-saturation-down:before { content: '\e840'; } /* '' */
.icon-upload:before { content: '\e841'; } /* '' */
.icon-dice:before { content: '\e842'; } /* '' */
.icon-marquee:before { content: '\e847'; } /* '' */
.icon-move:before { content: '\f047'; } /* '' */
.icon-move-four:before { content: '\f0b2'; } /* '' */
.icon-selection-new:before { content: '\f0c8'; } /* '' */
.icon-selection-add:before { content: '\f0fe'; } /* '' */
.icon-circle:before { content: '\f10c'; } /* '' */
.icon-puzzle:before { content: '\f12e'; } /* '' */
.icon-unlock:before { content: '\f13e'; } /* '' */
.icon-selection-subtract:before { content: '\f146'; } /* '' */
.icon-brush:before { content: '\f1fc'; } /* '' */
.icon-hand:before { content: '\f256'; } /* '' */
.icon-zoom:before { content: '\f50d'; } /* '' */