@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "adobe-clean";
  src: local("Adobe Clean"), local("AdobeClean");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "adobe-clean";
  src:
    url("https://use.typekit.net/af/dc1cb5/00000000000000007735dadb/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff2"),
    url("https://use.typekit.net/af/dc1cb5/00000000000000007735dadb/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff"),
    url("https://use.typekit.net/af/dc1cb5/00000000000000007735dadb/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {
  font-family: "adobe-clean";
  src:
    url("https://use.typekit.net/af/5c07ba/00000000000000007735dad8/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"),
    url("https://use.typekit.net/af/5c07ba/00000000000000007735dad8/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"),
    url("https://use.typekit.net/af/5c07ba/00000000000000007735dad8/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "adobe-clean";
  src:
    url("https://use.typekit.net/af/82b12f/00000000000000007735dad4/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n8&v=3") format("woff2"),
    url("https://use.typekit.net/af/82b12f/00000000000000007735dad4/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n8&v=3") format("woff"),
    url("https://use.typekit.net/af/82b12f/00000000000000007735dad4/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n8&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: "adobe-clean";
  src:
    url("https://use.typekit.net/af/bc79c1/00000000000000007735dad9/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"),
    url("https://use.typekit.net/af/bc79c1/00000000000000007735dad9/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"),
    url("https://use.typekit.net/af/bc79c1/00000000000000007735dad9/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

:root {
  --ink-900: #1f2433;
  --ink-700: #4e566d;
  --ink-500: #667189;
  --line-soft: rgba(255, 255, 255, 0.68);
  --line-strong: rgba(43, 53, 77, 0.12);
  --surface-main: rgba(236, 242, 250, 0.78);
  --surface-soft: rgba(247, 250, 255, 0.86);
  --surface-shelf: rgba(232, 238, 246, 0.82);
  --blue-600: #1a73e8;
  --blue-200: #dfeafc;
  --shadow-xl: 0 28px 64px rgba(22, 31, 48, 0.22);
  --shadow-lg: 0 16px 36px rgba(22, 31, 48, 0.16);
  --radius-xl: 26px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --anim-fast: 160ms ease;
  --anim-slow: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --login-bg: url("/assets/icons/login/wallpaper_light.webp") center/cover no-repeat;
  --desktop-bg: #0c64d1;
  --wallpaper-image: url("/assets/wallpaper.webp");
  --wallpaper-filter: none;
  --window-bg:
    linear-gradient(180deg, rgba(241, 248, 255, 0.72), rgba(214, 229, 248, 0.46)),
    linear-gradient(140deg, rgba(88, 187, 255, 0.18), rgba(77, 111, 255, 0.12));
  --window-border: rgba(255, 255, 255, 0.52);
  --window-shadow:
    0 32px 72px rgba(17, 27, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --window-focus-shadow:
    0 36px 88px rgba(17, 27, 46, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --window-chrome-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12));
  --window-chrome-border: rgba(255, 255, 255, 0.28);
  --window-control-bg: rgba(255, 255, 255, 0.34);
  --window-control-hover-bg: rgba(255, 255, 255, 0.52);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(233, 243, 255, 0.24));
  --card-hero-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(129, 211, 255, 0.18));
  --card-border: rgba(255, 255, 255, 0.22);
  --panel-bg:
    linear-gradient(180deg, rgba(244, 249, 255, 0.66), rgba(221, 234, 250, 0.42)),
    linear-gradient(135deg, rgba(125, 221, 255, 0.12), rgba(95, 104, 255, 0.08));
  --panel-border: rgba(255, 255, 255, 0.46);
  --panel-shadow:
    0 28px 64px rgba(20, 32, 56, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  --panel-divider: rgba(43, 53, 77, 0.12);
  --launcher-hover-bg: rgba(255, 255, 255, 0.28);
  --quick-toggle-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(230, 240, 255, 0.22));
  --quick-toggle-active-bg: linear-gradient(180deg, rgba(209, 232, 255, 0.58), rgba(182, 214, 255, 0.34));
  --ui-icon-power: url("/assets/icons/ui/light/power.webp");
  --ui-icon-lock: url("/assets/icons/ui/light/lock.webp");
  --ui-icon-settings: url("/assets/icons/ui/light/settings.webp");
  --ui-icon-theme: url("/assets/icons/ui/light/theme.webp");
  --ui-icon-chevron: url("/assets/icons/ui/light/top_chev.webp");
  --ui-icon-wifi: url("/assets/icons/ui/light/wifi.webp");
  --ui-icon-bluetooth: url("/assets/icons/ui/light/bluetooth.webp");
  --ui-icon-dnd: url("/assets/icons/ui/light/do_not_disturb.webp");
  --ui-icon-capture: url("/assets/icons/ui/light/screen_cap.webp");
  --ui-icon-nearby: url("/assets/icons/ui/light/near-by.webp");
  --ui-icon-night-light: url("/assets/icons/ui/light/night_light.webp");
  --ui-icon-keyboard: url("/assets/icons/ui/light/keyboard.webp");
  --ui-icon-battery: url("/assets/icons/ui/light/battery.webp");
  --ui-icon-volume: url("/assets/icons/ui/light/volume.webp");
  --ui-icon-volume-chevron: url("/assets/icons/ui/light/vol_chev.webp");
  --ui-icon-brightness: url("/assets/icons/ui/light/bright.webp");
  --ui-icon-wifi-active: url("/assets/icons/ui/dark/wifi.webp");
  --ui-icon-bluetooth-active: url("/assets/icons/ui/dark/bluetooth.webp");
  --ui-icon-dnd-active: url("/assets/icons/ui/dark/do_not_disturb.webp");
  --ui-icon-capture-active: url("/assets/icons/ui/dark/screen_cap.webp");
  --ui-icon-nearby-active: url("/assets/icons/ui/dark/near-by.webp");
  --ui-icon-night-light-active: url("/assets/icons/ui/dark/night_light.webp");
  --ui-icon-keyboard-active: url("/assets/icons/ui/dark/keyboard.webp");
  --ui-icon-theme-active: url("/assets/icons/ui/dark/theme.webp");
  --ui-icon-volume-active: url("/assets/icons/ui/dark/volume.webp");
  --shelf-bg: var(--window-bg);
  --shelf-border: var(--window-border);
  --shelf-shadow: 0 -8px 24px rgba(22, 31, 48, 0.12);
  --shelf-chip-bg: var(--window-control-bg);
  --shelf-chip-hover-bg: var(--window-control-hover-bg);
  --shelf-status-bg: var(--window-control-bg);
  --status-ink: #3c465d;
  --launcher-orb: url("/assets/blinkOS_Start_Orb/Dark/blinkOS (Dark).png");
  --launcher-frame-size: 54px;
  --shell-bg: #ffffff;
  --cursor-sheet: url("/assets/cursors/ChromeOS%20Cursors_light/cursors.webp");
  --cursor-sheet-width: 350px;
  --cursor-sheet-height: 312px;
  --cursor-cell-width: 87.5px;
  --cursor-cell-height: 52px;
}

:root[data-theme="dark"] {
  --ink-900: #e8f0ff;
  --ink-700: #c6d4ef;
  --ink-500: #93a5c7;
  --line-soft: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(3, 8, 19, 0.42);
  --surface-main: rgba(19, 28, 44, 0.86);
  --surface-soft: rgba(25, 37, 57, 0.9);
  --surface-shelf: rgba(17, 26, 40, 0.88);
  --login-bg: url("/assets/icons/login/wallpaper_dark.webp") center/cover no-repeat;
  --desktop-bg: #081321;
  --wallpaper-image: url("/assets/wallpaper_dark.webP");
  --wallpaper-filter: saturate(0.9) brightness(0.72);
  --window-bg:
    linear-gradient(180deg, rgba(21, 31, 47, 0.82), rgba(12, 18, 31, 0.7)),
    linear-gradient(145deg, rgba(64, 147, 255, 0.14), rgba(86, 92, 255, 0.08));
  --window-border: rgba(255, 255, 255, 0.14);
  --window-shadow:
    0 34px 82px rgba(3, 8, 18, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --window-focus-shadow:
    0 40px 94px rgba(3, 8, 18, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --window-chrome-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  --window-chrome-border: rgba(255, 255, 255, 0.08);
  --window-control-bg: rgba(255, 255, 255, 0.08);
  --window-control-hover-bg: rgba(255, 255, 255, 0.14);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --card-hero-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(79, 139, 255, 0.16));
  --card-border: rgba(255, 255, 255, 0.1);
  --panel-bg:
    linear-gradient(180deg, rgba(19, 28, 44, 0.86), rgba(12, 18, 31, 0.8)),
    linear-gradient(135deg, rgba(64, 147, 255, 0.12), rgba(95, 104, 255, 0.08));
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-shadow:
    0 34px 82px rgba(3, 8, 18, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --panel-divider: rgba(255, 255, 255, 0.1);
  --launcher-hover-bg: rgba(255, 255, 255, 0.08);
  --quick-toggle-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --quick-toggle-active-bg: linear-gradient(180deg, rgba(69, 129, 255, 0.38), rgba(33, 86, 184, 0.26));
  --ui-icon-power: url("/assets/icons/ui/dark/power.webp");
  --ui-icon-lock: url("/assets/icons/ui/dark/lock.webp");
  --ui-icon-settings: url("/assets/icons/ui/dark/settings.webp");
  --ui-icon-theme: url("/assets/icons/ui/dark/theme.webp");
  --ui-icon-chevron: url("/assets/icons/ui/dark/top_chev.webp");
  --ui-icon-wifi: url("/assets/icons/ui/dark/wifi.webp");
  --ui-icon-bluetooth: url("/assets/icons/ui/dark/bluetooth.webp");
  --ui-icon-dnd: url("/assets/icons/ui/dark/do_not_disturb.webp");
  --ui-icon-capture: url("/assets/icons/ui/dark/screen_cap.webp");
  --ui-icon-nearby: url("/assets/icons/ui/dark/near-by.webp");
  --ui-icon-night-light: url("/assets/icons/ui/dark/night_light.webp");
  --ui-icon-keyboard: url("/assets/icons/ui/dark/keyboard.webp");
  --ui-icon-battery: url("/assets/icons/ui/dark/battery.webp");
  --ui-icon-volume: url("/assets/icons/ui/dark/volume.webp");
  --ui-icon-volume-chevron: url("/assets/icons/ui/dark/vol_chev.webp");
  --ui-icon-brightness: url("/assets/icons/ui/dark/bright.webp");
  --ui-icon-wifi-active: url("/assets/icons/ui/dark/wifi.webp");
  --ui-icon-bluetooth-active: url("/assets/icons/ui/dark/bluetooth.webp");
  --ui-icon-dnd-active: url("/assets/icons/ui/dark/do_not_disturb.webp");
  --ui-icon-capture-active: url("/assets/icons/ui/dark/screen_cap.webp");
  --ui-icon-nearby-active: url("/assets/icons/ui/dark/near-by.webp");
  --ui-icon-night-light-active: url("/assets/icons/ui/dark/night_light.webp");
  --ui-icon-keyboard-active: url("/assets/icons/ui/dark/keyboard.webp");
  --ui-icon-theme-active: url("/assets/icons/ui/dark/theme.webp");
  --ui-icon-volume-active: url("/assets/icons/ui/dark/volume.webp");
  --shelf-bg: var(--window-bg);
  --shelf-border: var(--window-border);
  --shelf-shadow: 0 -10px 28px rgba(3, 8, 18, 0.36);
  --shelf-chip-bg: var(--window-control-bg);
  --shelf-chip-hover-bg: var(--window-control-hover-bg);
  --shelf-status-bg: var(--window-control-bg);
  --status-ink: #dce7fb;
  --launcher-orb: url("/assets/blinkOS_Start_Orb/Light/blinkOS (Light).png");
  --shell-bg: #000000;
  --cursor-sheet: url("/assets/cursors/ChromeOS%20Cursors_dark/cursors.webp");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  cursor: none !important;
}

html,
body,
body *,
body *::before,
body *::after {
  margin: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: "Google Sans", "Product Sans", Roboto, Arial, sans-serif;
  color: var(--ink-900);
  overflow: hidden;
  background: var(--shell-bg);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  background: none;
}

input {
  border: 0;
  outline: 0;
}

.app-shell,
.screen {
  position: absolute;
  inset: 0;
}

.app-shell {
  background: var(--shell-bg);
}

.screen[hidden] {
  display: none;
}

[hidden] {
  display: none !important;
}

.display-effects {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646;
}

.display-effects__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}

.display-effects__layer--brightness {
  background: #000000;
}

.display-effects__layer--night-light {
  background: rgba(255, 147, 46, 0.18);
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--cursor-cell-width);
  height: var(--cursor-cell-height);
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  background-image: var(--cursor-sheet);
  background-repeat: no-repeat;
  background-size: var(--cursor-sheet-width) var(--cursor-sheet-height);
  transform: translate3d(-200px, -200px, 0);
  transition: none;
  will-change: transform, background-position;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor--default {
  background-position: calc(var(--cursor-cell-width) * -2) calc(var(--cursor-cell-height) * -1);
}

.custom-cursor--text {
  background-position: 0 0;
}

.custom-cursor--move {
  background-position: calc(var(--cursor-cell-width) * -3) 0;
}

.custom-cursor--grab {
  background-position: 0 calc(var(--cursor-cell-height) * -5);
}

.custom-cursor--grabbing {
  background-position: calc(var(--cursor-cell-width) * -1) calc(var(--cursor-cell-height) * -5);
}

.custom-cursor--crosshair {
  background-position: calc(var(--cursor-cell-width) * -1) calc(var(--cursor-cell-height) * -1);
}

.custom-cursor--zoom-in {
  background-position: calc(var(--cursor-cell-width) * -1) calc(var(--cursor-cell-height) * -4);
}

.custom-cursor--zoom-out {
  background-position: calc(var(--cursor-cell-width) * -1) calc(var(--cursor-cell-height) * -3);
}

.login-screen,
.desktop-screen {
  background: #08111d;
}

.preloader-screen {
  display: grid;
  place-items: center;
  background: var(--shell-bg);
  overflow: hidden;
}

.preloader-video {
  width: min(720px, 78vw);
  max-width: 100%;
  max-height: 78vh;
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 0;
}

.preloader-image {
  width: min(720px, 78vw);
  max-width: 100%;
  max-height: 78vh;
  height: auto;
  display: block;
  background: transparent;
  opacity: 0;
  transform: scale(0.992);
  transition:
    opacity 3200ms ease,
    transform 4200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.preloader-image.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.preloader-fallback {
  position: absolute;
  inset: 0;
  background: transparent;
}

.login-screen {
  background: var(--login-bg);
}

.login-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: block;
  background: url("/assets/icons/login/pfp.webp") center/cover no-repeat;
  box-shadow: 0 10px 28px rgba(6, 16, 38, 0.22);
}

.login-auth {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(100%, 440px);
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.96);
}

.login-user {
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.login-secret {
  width: min(100%, 340px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.login-secret input {
  min-width: 0;
  height: 42px;
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
}

.login-secret input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.login-submit {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.8rem;
  line-height: 1;
  transition: background var(--anim-fast), color var(--anim-fast), transform var(--anim-fast);
}

.login-submit:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateX(1px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-footer {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.login-footer__actions,
.login-footer__status {
  display: flex;
  align-items: center;
  gap: 18px;
}

.login-footer__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 500;
}

.login-footer__action::before {
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
}

.login-footer__action[data-login-utility="shutdown"]::before {
  background-image: url("/assets/icons/login/power.webp");
}

#guestButton.login-footer__action::before {
  background-image: url("/assets/icons/login/guest.webp");
}

.login-footer__action[data-login-utility="add-person"]::before {
  background-image: url("/assets/icons/login/add_person.webp");
}

.login-footer__status {
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.05rem;
  font-weight: 500;
}

.login-footer__locale {
  margin-left: 2px;
}

.login-footer__status .status-glyph--wifi {
  background-image: url("/assets/icons/ui/dark/wifi.webp");
}

.login-footer__status .status-glyph--battery {
  background-image: url("/assets/icons/ui/dark/battery.webp");
}

.desktop-screen {
  background: var(--desktop-bg);
}

.desktop-wallpaper {
  position: absolute;
  inset: 0;
  background: var(--wallpaper-image) center/cover no-repeat;
  filter: var(--wallpaper-filter);
}

.window-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.window {
  position: absolute;
  min-width: 340px;
  min-height: 240px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--window-bg);
  backdrop-filter: blur(26px) saturate(140%);
  box-shadow: var(--window-shadow);
  border: 1px solid var(--window-border);
  pointer-events: auto;
}

.window.is-focused {
  box-shadow: var(--window-focus-shadow);
}

.window[data-hidden="true"] {
  display: none;
}

.launcher-panel::before,
.launcher-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
}

.launcher-panel::before {
  width: 230px;
  height: 230px;
  top: -116px;
  left: -44px;
  background: radial-gradient(circle, rgba(125, 221, 255, 0.48) 0%, rgba(125, 221, 255, 0.22) 38%, rgba(125, 221, 255, 0) 72%);
}

.launcher-panel::after {
  width: 280px;
  height: 280px;
  right: -124px;
  bottom: -152px;
  background: radial-gradient(circle, rgba(84, 118, 255, 0.32) 0%, rgba(84, 118, 255, 0.12) 44%, rgba(84, 118, 255, 0) 74%);
}

.launcher-panel > * {
  position: relative;
  z-index: 1;
}

.window__chrome {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--window-chrome-bg);
  border-bottom: 1px solid var(--window-chrome-border);
  user-select: none;
}

.window__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.window__controls {
  display: flex;
  gap: 8px;
}

.window__control {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--window-control-bg);
  color: var(--ink-700);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(28, 44, 82, 0.12);
}

.window__control:hover {
  background: var(--window-control-hover-bg);
}

.window__body {
  position: relative;
  z-index: 1;
  padding: 18px;
  height: calc(100% - 58px);
  overflow: auto;
}

.window--terminal {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border: 0;
  border-radius: 0 0 18px 18px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 72px);
}

.window--terminal .window__body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.window__hero {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--card-hero-bg);
  box-shadow: inset 0 0 0 1px var(--card-border);
}

.window__hero h3,
.mini-card strong,
.browser-card h4,
.shortcut-card strong,
.launcher-item__label {
  margin: 0;
}

.window__hero h3 {
  margin-bottom: 8px;
}

.window__hero p,
.mini-card span,
.browser-card p,
.list-row small,
.list-row span,
.shortcut-card span {
  margin: 0;
  color: var(--ink-500);
  line-height: 1.5;
}

.window__grid,
.browser-grid,
.shortcut-grid {
  display: grid;
  gap: 14px;
}

.window__grid,
.browser-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.shortcut-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.mini-card,
.browser-card,
.shortcut-card,
.list-row {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow:
    inset 0 0 0 1px var(--card-border),
    0 8px 20px rgba(28, 44, 82, 0.08);
}

.list-stack {
  display: grid;
  gap: 12px;
}

.list-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.browser-shell {
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow:
    inset 0 0 0 1px var(--card-border),
    0 10px 28px rgba(28, 44, 82, 0.1);
}

.browser-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--card-border);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4dae5;
}

.browser-url {
  flex: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--window-control-bg);
  color: var(--ink-500);
  box-shadow: inset 0 0 0 1px var(--card-border);
}

.browser-content {
  padding: 18px;
}

.browser-search {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--window-control-bg);
  color: var(--ink-500);
  box-shadow: inset 0 0 0 1px var(--card-border);
}

.window--photoshop {
  --psw-is-light-theme: initial;
  --psw-is-dark-theme: ;
  --psw-is-direction-ltr: initial;
  --psw-is-direction-rtl: ;
  --psw-is-scale-medium: initial;
  --psw-is-scale-large: ;
  --ps-tool-sprite: url("/assets/photoshop/icons/sprite.webp");
  --ps-right-tool-sprite: url("/assets/photoshop/icons/right_sprite.webp");
  --ps-right-tool-sprite-active: url("/assets/photoshop/icons/right_sprite_active.webp");
  --ps-tool-hover-bg: #e0e0e0;
  --ps-tool-active-hover-bg: #274dea;
  --ps-utility-button-hover-bg: #e1e1e1;
  --ps-utility-button-active-bg: #292929;
  --ps-utility-button-active-hover-bg: #131313;
  --ps-utility-icon-filter: brightness(0) saturate(100%) opacity(0.86);
  --ps-panel-field-bg: #f6f6f6;
  --ps-panel-field-border: rgba(0, 0, 0, 0.14);
  --ps-panel-divider: rgba(0, 0, 0, 0.12);
  --ps-panel-highlight-bg: #dfe9fb;
  --ps-on-accent-color: #ffffff;
  --ps-selection-ring-color: rgba(255, 255, 255, 0.9);
  --ps-checker-light: #f2f2f2;
  --ps-checker-dark: #cbcbcb;
  --editor-background-color: var(--ps-stage-background);
  color-scheme: light;
  --spectrum-font-style: normal;
  --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
  --spectrum-font-family: var(--spectrum-global-font-family-base);
  --spectrum-global-dimension-size-0: 0px;
  --spectrum-global-dimension-size-10: 1px;
  --spectrum-global-dimension-size-25: 2px;
  --spectrum-global-dimension-size-40: 3px;
  --spectrum-global-dimension-size-50: 4px;
  --spectrum-global-dimension-size-65: 5px;
  --spectrum-global-dimension-size-75: 6px;
  --spectrum-global-dimension-size-85: 7px;
  --spectrum-global-dimension-size-100: 8px;
  --spectrum-global-dimension-size-115: 9px;
  --spectrum-global-dimension-size-125: 10px;
  --spectrum-global-dimension-size-130: 11px;
  --spectrum-global-dimension-size-150: 12px;
  --spectrum-global-dimension-size-160: 13px;
  --spectrum-global-dimension-size-175: 14px;
  --spectrum-global-dimension-size-185: 15px;
  --spectrum-global-dimension-size-200: 16px;
  --spectrum-global-dimension-size-225: 18px;
  --spectrum-global-dimension-size-250: 20px;
  --spectrum-global-dimension-size-275: 22px;
  --spectrum-global-dimension-size-300: 24px;
  --spectrum-global-dimension-size-325: 26px;
  --spectrum-global-dimension-size-400: 32px;
  --spectrum-global-dimension-size-450: 36px;
  --spectrum-global-dimension-size-500: 40px;
  --spectrum-global-dimension-size-600: 48px;
  --spectrum-global-dimension-size-700: 56px;
  --spectrum-global-dimension-font-size-75: 12px;
  --spectrum-global-dimension-font-size-100: 14px;
  --spectrum-global-dimension-font-size-200: 16px;
  --spectrum-global-dimension-font-size-300: 18px;
  --spectrum-font-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-border-width-100: var(--spectrum-global-dimension-size-10);
  --spectrum-border-width-200: var(--spectrum-global-dimension-size-25);
  --spectrum-gray-25-rgb: 255, 255, 255;
  --spectrum-gray-50-rgb: 248, 248, 248;
  --spectrum-gray-75-rgb: 243, 243, 243;
  --spectrum-gray-100-rgb: 233, 233, 233;
  --spectrum-gray-200-rgb: 225, 225, 225;
  --spectrum-gray-300-rgb: 218, 218, 218;
  --spectrum-gray-400-rgb: 198, 198, 198;
  --spectrum-gray-500-rgb: 143, 143, 143;
  --spectrum-gray-600-rgb: 113, 113, 113;
  --spectrum-gray-700-rgb: 80, 80, 80;
  --spectrum-gray-800-rgb: 41, 41, 41;
  --spectrum-gray-900-rgb: 19, 19, 19;
  --spectrum-gray-1000-rgb: 0, 0, 0;
  --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb));
  --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
  --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
  --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
  --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
  --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
  --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
  --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
  --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
  --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
  --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
  --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
  --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb));
  --spectrum-blue-200-rgb: 229, 240, 254;
  --spectrum-blue-800-rgb: 75, 117, 255;
  --spectrum-blue-900-rgb: 59, 99, 251;
  --spectrum-blue-1000-rgb: 39, 77, 234;
  --spectrum-blue-1100-rgb: 29, 62, 207;
  --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
  --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
  --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
  --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
  --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
  --spectrum-background-layer-2-color: var(--spectrum-gray-25);
  --spectrum-background-pasteboard-color: var(--spectrum-gray-100);
  --spectrum-accent-color-900: var(--spectrum-blue-900);
  --spectrum-accent-color-1000: var(--spectrum-blue-1000);
  --spectrum-accent-color-1100: var(--spectrum-blue-1100);
  --spectrum-neutral-content-color-default: var(--spectrum-gray-800);
  --spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
  --spectrum-neutral-content-color-down: var(--spectrum-gray-900);
  --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
  --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
  --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
  --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
  --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800);
  --spectrum-disabled-content-color: var(--spectrum-gray-500);
  --spectrum-disabled-border-color: var(--spectrum-gray-300);
  --spectrum-focus-indicator-color: var(--spectrum-blue-800);
  --spectrum-drop-shadow-color-100-rgb: 0, 0, 0;
  --spectrum-drop-shadow-color-100-opacity: 0.12;
  --spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
  --spectrum-drop-shadow-color-200-rgb: 0, 0, 0;
  --spectrum-drop-shadow-color-200-opacity: 0.16;
  --spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
  --ps-stage-background: #e9e9ea;
  --ps-panel-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  backdrop-filter: none;
  background: var(--spectrum-background-layer-2-color);
  border-color: var(--spectrum-gray-200);
  box-shadow:
    0 1px 4px var(--spectrum-drop-shadow-color-100),
    0 18px 40px var(--spectrum-drop-shadow-color-200);
  border-radius: 12px;
}
:root[data-theme="dark"] .window--photoshop .ps-web__utility-button--active::before {
  filter: brightness(0) invert(0.107);
}
.ps-selection-box {
  border: 1px dashed #fff;
  outline: 1px dashed #000;
  animation: marchingAnts 0.6s linear infinite;
  box-shadow: none;
}

@keyframes marchingAnts {
  from { stroke-dashoffset: 0; }
  to { background-position: 100% 100%; }
}
:root[data-theme="dark"] .window--photoshop {
  --psw-is-light-theme: ;
  --psw-is-dark-theme: initial;
  --ps-tool-hover-bg: #4a4a4a;
  --ps-tool-active-hover-bg: #5f8cff;
  --ps-utility-button-hover-bg: #4b4b4b;
  --ps-utility-button-active-bg: #DBDBDB;
  --ps-utility-button-active-hover-bg: #3c3c3c;
  --ps-utility-icon-filter: brightness(0) saturate(100%) invert(1) opacity(0.88);
  --ps-panel-field-bg: #1b1b1b;
  --ps-panel-field-border: rgba(255, 255, 255, 0.14);
  --ps-panel-divider: rgba(255, 255, 255, 0.1);
  --ps-panel-highlight-bg: #30405a;
  --ps-selection-ring-color: rgba(255, 255, 255, 0.88);
  --ps-checker-light: #303030;
  --ps-checker-dark: #242424;
  color-scheme: dark;
  --spectrum-gray-25-rgb: 46, 46, 46;
  --spectrum-gray-50-rgb: 52, 52, 52;
  --spectrum-gray-75-rgb: 59, 59, 59;
  --spectrum-gray-100-rgb: 66, 66, 66;
  --spectrum-gray-200-rgb: 79, 79, 79;
  --spectrum-gray-300-rgb: 96, 96, 96;
  --spectrum-gray-400-rgb: 122, 122, 122;
  --spectrum-gray-500-rgb: 151, 151, 151;
  --spectrum-gray-600-rgb: 184, 184, 184;
  --spectrum-gray-700-rgb: 214, 214, 214;
  --spectrum-gray-800-rgb: 235, 235, 235;
  --spectrum-gray-900-rgb: 248, 248, 248;
  --spectrum-gray-1000-rgb: 255, 255, 255;
  --spectrum-blue-200-rgb: 39, 56, 96;
  --spectrum-blue-800-rgb: 99, 145, 255;
  --spectrum-blue-900-rgb: 84, 129, 255;
  --spectrum-blue-1000-rgb: 67, 113, 244;
  --spectrum-blue-1100-rgb: 49, 91, 221;
  --ps-stage-background: #1f1f1f;
  --ps-panel-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 16px 36px rgba(0, 0, 0, 0.34);
  --spectrum-drop-shadow-color-100-opacity: 0.32;
  --spectrum-drop-shadow-color-200-opacity: 0.48;
}

.window--photoshop .window__chrome {
  border-radius: 12px 12px 0 0;
}

.window--photoshop .window__body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.window--photoshop .ps-web__tool {
  border-radius: 10px;
}

.window--photoshop .ps-web__tool--active {
  border-radius: 10px;
}

.window--photoshop .ps-web__utility-rail {
  border-radius: 10px;
}

.window--photoshop .ps-web__utility-button {
  border-radius: 8px;
}

.window--photoshop .ps-web__panel {
  border-radius: 10px;
}

.window--photoshop .ps-web__panel::before {
  border-radius: 3px;
}

.ps-web {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--spectrum-font-family);
  font-size: var(--spectrum-font-size);
  font-style: var(--spectrum-font-style);
  line-height: 1.5;
  background: var(--spectrum-background-layer-2-color);
  color: var(--spectrum-neutral-content-color-default);
}

.ps-web button,
.ps-web input,
.ps-web select,
.ps-web textarea {
  font: inherit;
}

.ps-web__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spectrum-global-dimension-size-100);
  min-height: 52px;
  padding: 0 var(--spectrum-global-dimension-size-200);
  background: var(--spectrum-gray-25);
  border-bottom: var(--spectrum-border-width-100) solid var(--spectrum-gray-200);
  user-select: none;
}

.ps-web__topbar-start,
.ps-web__topbar-end,
.ps-web__brand,
.ps-web__blend-row,
.ps-web__panel-toolbar {
  display: flex;
  align-items: center;
}

.ps-web__topbar-start,
.ps-web__topbar-end,
.ps-web__brand {
  gap: var(--spectrum-global-dimension-size-100);
}

.ps-web__topbar-end {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ps-web__menu,
.ps-web__ghost,
.ps-web__zoom-chip,
.ps-web__secondary,
.ps-web__primary,
.ps-web__panel-more,
.ps-web__tiny-button,
.ps-web__utility-button,
.ps-web__tray-action,
.ps-web__select,
.ps-layer-visibility,
.ps-layer-main,
.ps-history__item,
.ps-web__property-row {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.ps-web__menu,
.ps-web__ghost,
.ps-web__utility-button {
  width: var(--spectrum-global-dimension-size-400);
  height: var(--spectrum-global-dimension-size-400);
  display: grid;
  place-items: center;
  border-radius: var(--spectrum-global-dimension-size-50);
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: var(--spectrum-global-dimension-font-size-100);
}

.ps-web__secondary {
  min-height: var(--spectrum-global-dimension-size-400);
  padding: 0 var(--spectrum-global-dimension-size-150);
  border-radius: 999px;
  background: var(--spectrum-gray-100);
  color: var(--spectrum-neutral-content-color-default);
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: 700;
}

.ps-web__menu:hover,
.ps-web__ghost:hover,
.ps-web__secondary:hover,
.ps-web__utility-button:hover,
.ps-web__panel-more:hover,
.ps-web__tiny-button:hover,
.ps-web__tray-action:hover,
.ps-web__select:hover,
.ps-layer-visibility:hover,
.ps-history__item:hover,
.ps-web__property-row:hover {
  background: var(--spectrum-gray-200);
}

.ps-layer-main:hover {
  background: var(--spectrum-gray-100);
}

.ps-web__brand-icon {
  width: var(--spectrum-global-dimension-size-400);
  height: var(--spectrum-global-dimension-size-400);
  display: grid;
  place-items: center;
  border-radius: var(--spectrum-global-dimension-size-50);
  background: #001e36;
  color: #31a8ff;
  font-weight: 800;
  font-size: var(--spectrum-global-dimension-font-size-100);
  letter-spacing: -0.04em;
}

.ps-web__brand-title {
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: 500;
  color: var(--spectrum-neutral-content-color-default);
}

.ps-web__zoom-chip,
.ps-web__secondary,
.ps-web__primary {
  min-height: var(--spectrum-global-dimension-size-400);
  padding: 0 var(--spectrum-global-dimension-size-150);
  border-radius: var(--spectrum-global-dimension-size-50);
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: 700;
}

.ps-web__zoom-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spectrum-global-dimension-size-100);
  background: var(--spectrum-gray-25);
  color: var(--spectrum-neutral-content-color-default);
  box-shadow: inset 0 0 0 var(--spectrum-border-width-100) var(--spectrum-gray-300);
}

.ps-web__zoom-chip:hover {
  background: var(--spectrum-gray-50);
}

.ps-web__primary {
  background: var(--spectrum-accent-color-900);
  color: var(--ps-on-accent-color);
}

.ps-web__primary:hover {
  background: var(--spectrum-accent-color-1000);
}

.ps-web__primary:active {
  background: var(--spectrum-accent-color-1100);
}

.ps-web__color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.ps-web__main {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  overflow: hidden;
}

.ps-web__sidebar {
  --ps-sidebar-collapsed-width: 48px;
  --ps-sidebar-expanded-width: 161px;
  --ps-tool-strip-width: 46px;
  --ps-tool-strip-height: 609px;
  --ps-tool-strip-top: 3px;
  --ps-tool-row-size: 33px;
  --ps-tool-icon-size: 18px;
  --ps-tool-row-gap: 5px;
  --ps-divider-width-collapsed: 24px;
  --ps-divider-width-expanded: 133px;
  --ps-icon-column-left: calc((var(--ps-sidebar-collapsed-width) - var(--ps-tool-row-size)) / 2);
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
  width: var(--ps-sidebar-collapsed-width);
  height: calc(var(--ps-tool-strip-height) + (var(--ps-tool-strip-top) * 2));
  min-height: calc(var(--ps-tool-strip-height) + (var(--ps-tool-strip-top) * 2));
  margin: 10px 0 0 0;
  padding: 12px 0 31px var(--ps-icon-column-left);
  box-sizing: border-box;
  background: var(--spectrum-gray-25);
  border: var(--spectrum-border-width-100) solid rgba(var(--spectrum-gray-1000-rgb), 0.08);
  border-radius: 16px;
  box-shadow: var(--ps-panel-shadow);
  overflow: hidden;
  transition:
    width 180ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) {
  width: var(--ps-sidebar-expanded-width);
}

.ps-web__sidebar::before {
  display: none;
}

.ps-web__sidebar:is(:hover, :focus-within)::before {
  display: none;
}

.ps-web__sidebar::after {
  display: none;
}

.ps-web__sidebar:is(:hover, :focus-within)::after {
  display: none;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="size-position"]) {
  --ps-hit-top: 9px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="generative"]) {
  --ps-hit-top: 47px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="adjust"]) {
  --ps-hit-top: 85px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="select"]) {
  --ps-hit-top: 123px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="retouch"]) {
  --ps-hit-top: 161px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="quick-actions"]) {
  --ps-hit-top: 199px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="effects"]) {
  --ps-hit-top: 237px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="paint"]) {
  --ps-hit-top: 275px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="shapes"]) {
  --ps-hit-top: 313px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="type"]) {
  --ps-hit-top: 351px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="add-image"]) {
  --ps-hit-top: 389px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="eyedropper"]) {
  --ps-hit-top: 434px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="foreground"]) {
  --ps-hit-top: 472px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="switch"]) {
  --ps-hit-top: 510px;
}

.ps-web__tool:has(.ps-web__tool-icon[data-ps-sprite="background"]) {
  --ps-hit-top: 548px;
}

.ps-web__tool-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ps-tool-row-gap);
  width: 143px;
}

.ps-web__tool-group--utility {
  margin-top: 0;
}

.ps-web__tool-group--utility::before {
  display: none;
}

.ps-web__tool-divider {
  width: var(--ps-tool-row-size);
  height: 12px;
  flex: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ps-web__tool-divider-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--spectrum-gray-200);
}

.ps-web__tool {
  position: relative;
  top: auto;
  left: auto;
  width: var(--ps-tool-row-size);
  height: var(--ps-tool-row-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  transform: none;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: var(--spectrum-global-dimension-font-size-100);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
  transition:
    width 180ms cubic-bezier(0.2, 0, 0, 1),
    padding 180ms cubic-bezier(0.2, 0, 0, 1),
    gap 180ms cubic-bezier(0.2, 0, 0, 1),
    background-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.ps-web__tool:hover {
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
}

.ps-web__tool--active {
  background: var(--spectrum-blue-800);
  color: var(--ps-on-accent-color);
}

.ps-web__tool--active:hover {
  background: var(--ps-tool-active-hover-bg);
  color: var(--ps-on-accent-color);
}

.ps-web__tool--active .ps-web__tool-icon[data-ps-sprite] {
  filter: none;
}

.ps-web__tool--utility {
  height: var(--ps-tool-row-size);
}

.ps-web__tool--color {
  color: var(--spectrum-neutral-content-color-default);
}

.ps-web__tool--color:focus-visible {
  outline: none;
}

.ps-web__tool--color .ps-web__tool-icon-box {
  overflow: visible;
  width: 100%;
  height: 100%;
}

.ps-web__tool-icon {
  width: var(--ps-tool-row-size);
  height: var(--ps-tool-row-size);
  flex: 0 0 var(--ps-tool-row-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: inherit;
}

.ps-web__tool-icon-box {
  width: var(--ps-tool-row-size);
  height: var(--ps-tool-row-size);
  flex: 0 0 var(--ps-tool-row-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ps-web__tool-icon[data-ps-sprite] {
  --ps-tool-icon-inactive: none;
  --ps-tool-icon-active: none;
  width: var(--ps-tool-row-size);
  height: var(--ps-tool-row-size);
  flex: 0 0 var(--ps-tool-row-size);
  position: relative;
  overflow: hidden;
  color: transparent;
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
  background-size: auto;
  background-repeat: no-repeat;
  opacity: 1;
  color: transparent;
}

.ps-web__tool-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

.ps-web__color-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.ps-web__color-trigger__swatch {
  position: relative;
  inset: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--spectrum-gray-800);
  background: var(--ps-trigger-color, #111111);
  box-shadow: none;
  box-sizing: border-box;
}

.ps-web__tool--color:hover .ps-web__color-trigger__swatch {
  border-color: var(--spectrum-gray-700);
}

.ps-web__tool--color:focus-visible .ps-web__color-trigger__swatch {
  outline: var(--spectrum-global-dimension-size-40) solid var(--spectrum-blue-800);
  outline-offset: 2px;
}

.ps-web__tool--color.ps-web__tool--color-open .ps-web__color-trigger__swatch {
  border-color: #8eb9fc;
  box-shadow: 0 0 0 1px rgba(21, 34, 60, 0.18);
}

.ps-web__color-trigger--background .ps-web__color-trigger__swatch {
  background: var(--ps-trigger-color, #ffffff);
}

.ps-web__color-input-native {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ps-color-panel {
  position: absolute;
  width: 280px;
  min-height: 500px;
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid #d5d8df;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(24, 29, 39, 0.18);
  color: #16181d;
  z-index: 12;
}

.ps-color-panel__header,
.ps-color-panel__mode-row,
.ps-color-panel__swatches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-color-panel__title,
.ps-color-panel__swatches-head strong {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: #15171c;
}

.ps-color-panel__header-button,
.ps-color-panel__more-button,
.ps-color-panel__trash-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #464b57;
}

.ps-color-panel__header-button:hover,
.ps-color-panel__more-button:hover,
.ps-color-panel__trash-button:hover,
.ps-color-panel__add-swatch:hover {
  background: #eef1f6;
}

.ps-color-panel__header-button svg,
.ps-color-panel__more-button svg,
.ps-color-panel__trash-button svg,
.ps-color-panel__add-swatch svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.ps-color-panel__wheel-area {
  position: relative;
  margin: 6px 8px 16px;
  min-height: 196px;
}

.ps-color-panel__default-button {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #d0d4db;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.ps-color-panel__default-button:hover,
.ps-color-panel__preview-button:hover {
  border-color: #bfc4ce;
}

.ps-color-panel__default-button--white {
  top: 4px;
}

.ps-color-panel__default-button--black {
  bottom: 6px;
  background: #000000;
  border-color: #23262d;
}

.ps-color-panel__wheel-shell {
  position: relative;
  width: 196px;
  height: 196px;
  margin: 0 auto;
}

.ps-color-panel__wheel {
  position: relative;
  width: 196px;
  height: 196px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    #ff004d 0deg,
    #ff00d8 48deg,
    #5233ff 92deg,
    #006dff 132deg,
    #00e5ff 176deg,
    #00d46f 220deg,
    #56e000 260deg,
    #ffe600 302deg,
    #ff8a00 334deg,
    #ff004d 360deg
  );
}

.ps-color-panel__wheel-core {
  position: absolute;
  inset: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
}

.ps-color-panel__sv {
  position: relative;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: hsl(var(--ps-color-panel-hue, 0deg) 100% 50%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: none;
}

.ps-color-panel__sv-white,
.ps-color-panel__sv-black {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ps-color-panel__sv-white {
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.ps-color-panel__sv-black {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.ps-color-panel__sv-handle,
.ps-color-panel__hue-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 2px rgba(22, 24, 29, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ps-color-panel__sv-handle {
  transform: translate(-50%, -50%);
}

.ps-color-panel__hue-handle {
  transform: translate(-50%, -50%);
}

.ps-color-panel__eyedropper {
  position: absolute;
  top: 4px;
  right: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #303641;
}

.ps-color-panel__eyedropper:hover {
  background: #eef1f6;
}

.ps-color-panel__eyedropper-icon,
.ps-color-panel__eyedropper-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.ps-color-panel__hex-row {
  display: grid;
  grid-template-columns: 96px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 8px 12px;
}

.ps-color-panel__preview-pair {
  display: flex;
  align-items: stretch;
}

.ps-color-panel__preview-button {
  width: 48px;
  height: 32px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 2px solid #d5d8df;
  background: #ffffff;
}

.ps-color-panel__preview-button--new {
  border-radius: 9px 0 0 9px;
  border-right-width: 1px;
}

.ps-color-panel__preview-button--current {
  border-radius: 0 9px 9px 0;
  border-left-width: 1px;
}

.ps-color-panel__preview-fill {
  display: block;
  width: 100%;
  height: 100%;
}

.ps-color-panel__field-label {
  font-size: 0.77rem;
  font-weight: 700;
  color: #3f4550;
}

.ps-color-panel__text-input,
.ps-color-panel__number-field input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 2px solid #d5d8df;
  border-radius: 9px;
  background: #ffffff;
  color: #191c23;
  font: inherit;
}

.ps-color-panel__divider {
  height: 1px;
  margin: 0 -14px;
  background: #e3e6ec;
}

.ps-color-panel__mode-row {
  margin-top: 12px;
  padding: 0 6px;
}

.ps-color-panel__mode-button {
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #22262e;
  font-size: 0.94rem;
  font-weight: 600;
}

.ps-color-panel__mode-icon {
  width: 14px;
  height: 14px;
  display: block;
  color: #3f4550;
}

.ps-color-panel__rgb-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ps-color-panel__number-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  font-size: 0.84rem;
  color: #3e4450;
}

.ps-color-panel__number-field span {
  min-width: 10px;
}

.ps-color-panel__number-field input {
  padding: 0 8px;
}

.ps-color-panel__swatches-section {
  margin-top: 18px;
  padding: 0 6px;
}

.ps-color-panel__swatches-grid {
  min-height: 38px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-color-panel__swatch,
.ps-color-panel__add-swatch {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.ps-color-panel__swatch {
  border: 2px solid rgba(24, 28, 36, 0.14);
}

.ps-color-panel__swatch.is-selected {
  border-color: #3b63fb;
  box-shadow: 0 0 0 2px rgba(59, 99, 251, 0.18);
}

.ps-color-panel__add-swatch {
  margin-top: 10px;
  border: 2px solid #d5d8df;
  color: #434955;
  background: #f8f9fb;
}

.ps-web__tool-icon,
.ps-web__tool-icon-box,
.ps-web__tool-icon svg,
.ps-web__color-trigger,
.ps-web__color-trigger__swatch {
  pointer-events: none;
}

.ps-web__tool-icon[data-ps-sprite]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ps-tool-icon-inactive);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: none;
  transform-origin: center;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition:
    opacity 120ms ease,
    filter 120ms ease,
    transform 120ms ease;
}

.ps-web__tool-icon[data-ps-sprite="size-position"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/move_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/move_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="generative"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/gen_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/gen_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="adjust"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/adjust_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/adjust_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="select"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/select_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/select_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="retouch"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/retouch_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/retouch_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="quick-actions"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/qyick_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/qyick_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="effects"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/effects_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/effects_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="paint"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/paint_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/paint_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="shapes"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/shapes_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/shapes_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="type"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/type_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/type_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="add-image"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/add_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/add_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="eyedropper"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/eye_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/eye_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="foreground"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/forg_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/forg_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="switch"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/switch_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/switch_active.webp");
}

.ps-web__tool-icon[data-ps-sprite="background"] {
  --ps-tool-icon-inactive: url("/assets/photoshop/debug-crops/backg_inactive.webp");
  --ps-tool-icon-active: url("/assets/photoshop/debug-crops/backg_active.webp");
}

.ps-web__tool-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  height: var(--ps-tool-row-size);
  align-self: stretch;
  min-height: var(--ps-tool-row-size);
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: var(--spectrum-gray-800);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    opacity 120ms ease,
    color 120ms ease;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool {
  width: 143px;
  height: var(--ps-tool-row-size);
  padding: 0;
  justify-content: flex-start;
  gap: 6px;
  color: var(--spectrum-gray-900);
  border-radius: 10px;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool-divider {
  width: var(--ps-tool-row-size);
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool-divider-line {
  width: 24px;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool:hover {
  background: var(--ps-tool-hover-bg);
  color: var(--spectrum-gray-900);
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool--active {
  background: var(--spectrum-blue-800);
  color: var(--ps-on-accent-color);
  box-shadow: none;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool--active:hover {
  background: var(--ps-tool-active-hover-bg);
  color: var(--ps-on-accent-color);
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool-icon[data-ps-sprite] {
  opacity: 1;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool--active .ps-web__tool-icon[data-ps-sprite] {
  filter: none;
}

.ps-web__tool--active .ps-web__tool-icon[data-ps-sprite]::before {
  background-image: var(--ps-tool-icon-active);
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool-label {
  opacity: 1;
}

.ps-web__sidebar:is(:hover, :focus-within, .is-locked-open) .ps-web__tool--active .ps-web__tool-label {
  color: var(--ps-on-accent-color);
}

.ps-web__tool,
.ps-web__tool-icon,
.ps-web__tool-icon-box {
  transform: translateZ(0);
}

.ps-web__workspace {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  background: var(--ps-stage-background);
}

.ps-web__stage {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-500);
  background: var(--ps-stage-background);
}

.ps-web__stage--drop-target {
  background:
    linear-gradient(rgba(var(--spectrum-blue-900-rgb), 0.06), rgba(var(--spectrum-blue-900-rgb), 0.06)),
    var(--ps-stage-background);
}

.ps-web__canvas-area {
  min-width: max-content;
  min-height: max-content;
  display: grid;
  place-items: center;
}

.ps-artboard {
  position: relative;
  width: 1600px;
  height: 1000px;
  overflow: hidden;
  margin: auto;
  background: transparent;
  box-shadow:
    0 0 0 var(--spectrum-border-width-100) rgba(var(--spectrum-gray-1000-rgb), 0.08),
    0 18px 40px var(--spectrum-drop-shadow-color-100);
  transform: scale(var(--ps-zoom, 1));
  transform-origin: top left;
}

.ps-checkerboard,
.ps-document-surface,
.ps-layer-surface,
.ps-canvas {
  position: absolute;
  inset: 0;
}

.ps-document-surface {
  background: #ffffff;
}

.ps-layer-surface {
  overflow: hidden;
}

.ps-checkerboard {
  display: none;
  background-image:
    linear-gradient(45deg, var(--ps-checker-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ps-checker-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ps-checker-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ps-checker-dark) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  background-color: var(--ps-checker-light);
}

.ps-artboard--checker-hidden .ps-checkerboard {
  display: block;
}

.ps-artboard--checker-hidden .ps-document-surface {
  display: none;
}

.ps-render-layer,
.ps-selection-box {
  position: absolute;
}

.ps-render-layer {
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  pointer-events: auto;
}

.ps-render-layer--image,
.ps-render-layer--shape {
  border-radius: 12px;
}

.ps-render-layer--text {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
}

.ps-render-layer--shape.ps-render-layer--shadow,
.ps-render-layer--image.ps-render-layer--shadow {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ps-render-layer--text.ps-render-layer--shadow {
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.ps-canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.ps-selection-box {
  border: var(--spectrum-border-width-100) solid var(--spectrum-blue-900);
  box-shadow: 0 0 0 var(--spectrum-border-width-100) var(--ps-selection-ring-color);
  cursor: move;
}

.ps-web__floating-tray {
  position: absolute;
  left: 50%;
  bottom: var(--spectrum-global-dimension-size-200);
  transform: translateX(-50%);
  display: flex;
  gap: var(--spectrum-global-dimension-size-100);
  padding: var(--spectrum-global-dimension-size-100) var(--spectrum-global-dimension-size-125);
  border-radius: 14px;
  background: var(--spectrum-gray-25);
  border: var(--spectrum-border-width-100) solid var(--spectrum-gray-200);
  box-shadow:
    0 1px 4px var(--spectrum-drop-shadow-color-100),
    0 12px 24px var(--spectrum-drop-shadow-color-200);
}

.ps-web__tray-action {
  min-height: var(--spectrum-global-dimension-size-400);
  padding: 0 var(--spectrum-global-dimension-size-150);
  border-radius: 10px;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: 500;
}

.ps-web__tray-action:hover {
  background: var(--spectrum-gray-100);
}

/* Photoshop Right Rail: Layout Shell */
.ps-web__sidebar-right {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  padding: 10px 58px 10px 12px;
  background: var(--ps-stage-background);
  border-left: var(--spectrum-border-width-100) solid rgba(var(--spectrum-gray-1000-rgb), 0.06);
  overflow: hidden;
}

.ps-web__panels {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 0;
}

/* Photoshop Right Rail: Utility Rail */
.ps-web__utility-rail {
  --ps-right-strip-scale: 0.50980392;
  --ps-right-strip-source-width: 100px;
  --ps-right-strip-source-height: 418px;
  --ps-right-strip-width: calc(var(--ps-right-strip-source-width) * var(--ps-right-strip-scale));
  --ps-right-strip-height: calc(var(--ps-right-strip-source-height) * var(--ps-right-strip-scale));
  position: absolute;
  top: 10px;
  right: 8px;
  width: 50px;
  height: 208px;
  padding: 0;
  border-radius: 16px;
  background: var(--spectrum-gray-25);
  border: var(--spectrum-border-width-100) solid rgba(var(--spectrum-gray-1000-rgb), 0.06);
  box-shadow: var(--ps-panel-shadow);
}

.ps-web__utility-button {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 34px;
  display: block;
  padding: 0;
  transform: translateX(-50%);
  background-color: transparent;
  color: transparent;
  font-size: 0;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.ps-web__utility-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.25);
  transform-origin: center;
  filter: var(--ps-utility-icon-filter);
}

.ps-web__utility-button:hover {
  background-color: var(--ps-utility-button-hover-bg);
}

.ps-web__utility-button--active {
  background-color: var(--ps-utility-button-active-bg);
}

.ps-web__utility-button--active::before {
  filter: none;
}

.ps-web__utility-button--active:hover {
  background-color: var(--ps-utility-button-active-hover-bg);
}

.ps-web__utility-button[data-ps-right-icon="panels"] {
  top: 9px;
}

.ps-web__utility-button[data-ps-right-icon="panels"]::before {
  background-image: url("/assets/photoshop/icons/right_menu/layer_inactive.webp");
}

.ps-web__utility-button[data-ps-right-icon="panels"].ps-web__utility-button--active::before {
  background-image: url("/assets/photoshop/icons/right_menu/layer_active.webp");
}

.ps-web__utility-button[data-ps-right-icon="properties"] {
  top: 48px;
}

.ps-web__utility-button[data-ps-right-icon="properties"]::before {
  background-image: url("/assets/photoshop/icons/right_menu/layer_prop_inactive.webp");
}

.ps-web__utility-button[data-ps-right-icon="properties"].ps-web__utility-button--active::before {
  background-image: url("/assets/photoshop/icons/right_menu/layer_prop_active.webp");
}

.ps-web__utility-button[data-ps-right-icon="history"] {
  top: 87px;
}

.ps-web__utility-button[data-ps-right-icon="history"]::before {
  background-image: url("/assets/photoshop/icons/right_menu/history_inactive.webp");
}

.ps-web__utility-button[data-ps-right-icon="history"].ps-web__utility-button--active::before {
  background-image: url("/assets/photoshop/icons/right_menu/history_active.webp");
}

.ps-web__utility-button[data-ps-right-icon="quick-actions"] {
  top: 126px;
}

.ps-web__utility-button[data-ps-right-icon="quick-actions"]::before {
  background-image: url("/assets/photoshop/icons/right_menu/ai_inactive.webp");
}

.ps-web__utility-button[data-ps-right-icon="quick-actions"].ps-web__utility-button--active::before {
  background-image: url("/assets/photoshop/icons/right_menu/ai_active.webp");
}

.ps-web__utility-button[data-ps-right-icon="comments"] {
  top: 165px;
}

.ps-web__utility-button[data-ps-right-icon="comments"]::before {
  background-image: url("/assets/photoshop/icons/right_menu/chat_inactive.webp");
}

.ps-web__utility-button[data-ps-right-icon="comments"].ps-web__utility-button--active::before {
  background-image: url("/assets/photoshop/icons/right_menu/chat_active.webp");
}

/* Photoshop Right Rail: Panel Shell */
.ps-web__panel {
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--spectrum-gray-25);
  border: var(--spectrum-border-width-100) solid rgba(var(--spectrum-gray-1000-rgb), 0.1);
  border-radius: var(--spectrum-global-dimension-size-150);
  overflow: hidden;
  box-shadow: var(--ps-panel-shadow);
}

.ps-web__panel[hidden] {
  display: none;
}

.ps-web__panel::before {
  content: "";
  width: var(--spectrum-global-dimension-size-550);
  height: var(--spectrum-global-dimension-size-50);
  margin: calc(var(--spectrum-global-dimension-size-50) + 1px) auto var(--spectrum-global-dimension-size-75);
  border-radius: var(--spectrum-alias-border-radius-regular);
  background: var(--spectrum-global-color-gray-400);
  cursor: grab;
  flex: 0 0 auto;
}

.ps-web__panel::before:active {
  cursor: grabbing;
}

.ps-web__panel--properties {
  align-self: stretch;
  min-height: 168px;
}

.ps-web__panel--properties .ps-web__panel-head {
  border-bottom: 0;
}

.ps-web__panel--properties .ps-web__property-block {
  display: grid;
}

.ps-web__panel--history {
  min-height: 172px;
}

.ps-web__panel--quick-actions,
.ps-web__panel--comments {
  min-height: 220px;
}

.ps-web__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spectrum-global-dimension-size-100);
  margin: 0 var(--spectrum-global-dimension-size-65) var(--spectrum-global-dimension-size-25) var(--spectrum-global-dimension-size-200);
  padding: 0;
}

.ps-web__panel-head strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--spectrum-neutral-content-color-default);
}

.ps-web__panel-title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-web__panel-head-button,
.ps-web__panel-icon-button,
.ps-web__tiny-button {
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--spectrum-neutral-subdued-content-color-default);
  flex: 0 0 auto;
}

.ps-web__panel-head-button:hover,
.ps-web__panel-icon-button:hover,
.ps-web__tiny-button:hover {
  background: rgba(var(--spectrum-gray-1000-rgb), 0.06);
}

.ps-web__panel-head-button.is-disabled,
.ps-web__panel-icon-button.is-disabled {
  opacity: 0.34;
  pointer-events: none;
}

.ps-panel-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.ps-web__panel-icon-button--ghost {
  margin-left: auto;
}

.ps-web__panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
  background: transparent;
}

.ps-web__section-divider {
  height: 1px;
  margin: 0 16px;
  background: var(--ps-panel-divider);
}

/* Photoshop Right Rail: Shared Top Controls */
.ps-web__blend-row {
  gap: 16px;
  padding: 0 16px 12px;
}

.ps-web__blend-row--layers {
  padding-top: 0;
}

.ps-web__blend-field {
  flex: 1;
  display: grid;
  gap: 5px;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: 11px;
  line-height: 1.2;
}

.ps-web__blend-field--opacity {
  max-width: 108px;
}

.ps-web__select {
  width: 100%;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--ps-panel-field-bg);
  color: var(--spectrum-neutral-content-color-default);
  text-align: left;
  box-shadow: inset 0 0 0 var(--spectrum-border-width-100) var(--ps-panel-field-border);
}

.ps-web__select--panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
}

.ps-web__select-icon,
.ps-web__combo-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.ps-web__combo-field {
  position: relative;
  display: flex;
  align-items: center;
}

.ps-web__combo-field__icon {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  color: var(--spectrum-neutral-subdued-content-color-default);
  pointer-events: none;
}

/* Photoshop Right Rail: Shared Scroll Areas */
.ps-layer-list,
.ps-history,
.ps-web__property-block,
.ps-web__quick-actions,
.ps-web__comments {
  display: grid;
  gap: var(--spectrum-global-dimension-size-100);
  padding: 0 0 14px;
}

.ps-layer-list,
.ps-history,
.ps-web__property-block,
.ps-web__quick-actions,
.ps-web__comments {
  min-height: 0;
  overflow: auto;
  align-content: start;
}

/* Photoshop Right Rail: Layers Panel */
.ps-layer-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  margin: 0;
  padding: 0 16px;
}

.ps-layer-row[aria-selected="true"] {
  background: var(--ps-panel-highlight-bg);
}

.ps-layer-visibility {
  width: 28px;
  min-height: 28px;
  background: transparent;
  box-shadow: none;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: var(--spectrum-global-dimension-font-size-75);
  position: relative;
}

.ps-layer-visibility--off {
  color: var(--spectrum-disabled-content-color);
}

.ps-layer-visibility__glyph,
.ps-layer-visibility__glyph::before,
.ps-layer-visibility__glyph::after {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  content: "";
}

.ps-layer-visibility__glyph {
  width: 15px;
  height: 9px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(var(--spectrum-gray-1000-rgb), 0.52);
  border-radius: 100% / 85%;
}

.ps-layer-visibility__glyph::before {
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(var(--spectrum-gray-1000-rgb), 0.52);
}

.ps-layer-visibility--off .ps-layer-visibility__glyph {
  opacity: 0.34;
}

.ps-layer-visibility--off .ps-layer-visibility__glyph::after {
  width: 16px;
  height: 1.5px;
  transform: translate(-50%, -50%) rotate(-28deg);
  background: rgba(var(--spectrum-gray-1000-rgb), 0.42);
  border-radius: 999px;
}

.ps-layer-main {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.ps-layer-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 28% 28%, rgba(82, 198, 255, 0.9), transparent 26%),
    radial-gradient(circle at 72% 26%, rgba(244, 84, 255, 0.82), transparent 24%),
    linear-gradient(135deg, #2a2b6f, #121326);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(var(--spectrum-gray-1000-rgb), 0.08);
}

.ps-layer-thumb--empty {
  background-image: none !important;
}

.ps-layer-main strong {
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-layer-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}

.ps-layer-main--hidden .ps-layer-thumb,
.ps-layer-main--hidden .ps-layer-copy {
  opacity: 0.48;
}

.ps-layer-main--active {
  background: transparent;
  box-shadow: none;
}

.ps-layer-row[aria-selected="true"] .ps-layer-thumb {
  box-shadow:
    0 0 0 2px var(--spectrum-blue-900),
    inset 0 0 0 1px rgba(var(--spectrum-gray-1000-rgb), 0.14);
}

.ps-layer-settings {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--spectrum-neutral-content-color-default);
}

.ps-layer-settings.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Photoshop Right Rail: Properties Panel */
.ps-web__number-input--compact {
  width: 100%;
  min-height: 30px;
  padding: 0 28px 0 10px;
  border-radius: 9px;
  border: 0;
  background: var(--ps-panel-field-bg);
  box-shadow: inset 0 0 0 var(--spectrum-border-width-100) var(--ps-panel-field-border);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  text-align: right;
}

.ps-web__property-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
  overflow: visible;
}

.ps-properties__active-layer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px;
}

.ps-properties__thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(var(--spectrum-gray-1000-rgb), 0.1);
}

.ps-properties__active-layer strong {
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ps-properties__section,
.ps-history__section {
  display: grid;
  gap: 8px;
}

.ps-properties__section-toggle,
.ps-history__section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.ps-properties__section-icon,
.ps-history__section-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.ps-properties__section-content,
.ps-history__section-content {
  display: grid;
  gap: 8px;
  padding-left: 0;
}

.ps-properties__field,
.ps-properties__mini-field {
  display: grid;
  gap: 4px;
  color: var(--spectrum-neutral-subdued-content-color-default);
}

.ps-properties__field {
  font-size: 11px;
}

.ps-properties__field-label {
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: 11px;
}

.ps-properties__info-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(var(--spectrum-gray-100-rgb), 1);
  box-shadow: inset 0 0 0 var(--spectrum-border-width-100) rgba(var(--spectrum-gray-1000-rgb), 0.1);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 11px;
}

.ps-properties__color-input {
  width: 100%;
  height: 28px;
  padding: 3px;
  border-radius: 8px;
  background: var(--ps-panel-field-bg);
  box-shadow: inset 0 0 0 var(--spectrum-border-width-100) var(--ps-panel-field-border);
}

.ps-properties__dimensions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}

.ps-properties__lock-rail {
  justify-self: center;
  transform: scale(0.84);
  transform-origin: center;
}

.ps-properties__mini-field {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.ps-properties__mini-input {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ps-panel-field-bg);
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 500;
}

.ps-properties__mini-input:disabled {
  opacity: 0.5;
}

/* Photoshop Right Rail: History Panel */
.ps-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
}

.ps-history__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 2px;
}

.ps-history__section {
  padding: 0 16px;
}

.ps-history__section-label {
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: 10px;
  font-weight: 500;
}

.ps-history__snapshot {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--spectrum-neutral-content-color-default);
  text-align: left;
}

.ps-history__snapshot-thumb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(var(--spectrum-gray-1000-rgb), 0.12);
}

.ps-history__snapshot-label {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-history__section--edits {
  gap: 10px;
}

.ps-history__entry {
  min-height: 32px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 12px;
  color: var(--spectrum-neutral-content-color-default);
  text-align: left;
}

.ps-history__entry--active {
  background: var(--ps-panel-highlight-bg);
}

.ps-history__entry-icon,
.ps-history__entry-trailing {
  display: grid;
  place-items: center;
  color: var(--spectrum-neutral-content-color-default);
}

.ps-history__entry-label {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-web__status {
  display: none;
}

.terminal-shell {
  height: 100%;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background: #292a2d;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  color: #f1f3f4;
}

.terminal-toolbar {
  min-height: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 0 8px;
  background: #424347;
}

.terminal-tabbar,
.terminal-toolbar__actions {
  display: flex;
  align-items: center;
}

.terminal-tabbar {
  gap: 4px;
}

.terminal-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 10px 10px 0 0;
  color: #dfe1e5;
  background: transparent;
}

.terminal-tab--active {
  background: #2f3135;
  color: #ffffff;
}

.terminal-tab--new {
  width: 36px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
}

.terminal-tab__close {
  font-size: 1rem;
  opacity: 0.92;
}

.terminal-toolbar__actions {
  gap: 2px;
  color: #f1f3f4;
}

.terminal-toolbar__button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.96rem;
  color: inherit;
}

.terminal-toolbar__button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.terminal-screen {
  height: calc(100% - 40px);
  padding: 14px 16px 18px;
  background: #202124;
  overflow: auto;
}

.terminal-output {
  font-family: "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.28;
  color: #f1f3f4;
  white-space: pre-wrap;
}

.terminal-output p {
  margin: 0;
}

.terminal-output__right {
  text-align: right;
}

.terminal-prompt {
  color: #7ef0b5;
  font-weight: 700;
}

.terminal-prompt--root {
  color: #f1f3f4;
}

.terminal-caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 3px;
  transform: translateY(2px);
  background: #5f87ff;
}

.launcher-panel,
.quick-settings-panel,
.calendar-panel {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity var(--anim-slow), transform var(--anim-slow);
}

.launcher-panel.is-open,
.quick-settings-panel.is-open,
.calendar-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.launcher-panel {
  left: 8px;
  bottom: 66px;
  width: min(560px, calc(100vw - 16px));
  padding: 12px 0 16px;
  border-radius: 20px;
  isolation: isolate;
  background: var(--panel-bg);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
}

.launcher-searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin: 0 8px;
  padding: 0 12px;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--panel-divider);
}

.launcher-searchbar__brand,
.launcher-searchbar__camera,
.launcher-searchbar__spark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.launcher-searchbar__brand {
  width: 22px;
  height: 22px;
  background: url("/assets/icons/desktop/j.webp") center/contain no-repeat;
}

.launcher-searchbar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--ink-700);
  font-size: 0.98rem;
}

.launcher-searchbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.launcher-searchbar__camera {
  width: 22px;
  height: 22px;
  background: url("/assets/icons/desktop/camera.webp") center/contain no-repeat;
}

.launcher-searchbar__spark {
  width: 18px;
  height: 18px;
  background: url("/assets/icons/desktop/gemini.webp") center/contain no-repeat;
}

.continue-row {
  width: calc(100% - 16px);
  margin: 6px 8px 0;
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-500);
  font-size: 0.92rem;
}

.launcher-divider {
  height: 1px;
  margin: 2px 24px 14px;
  background: var(--panel-divider);
}

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 8px 18px 0;
}

.launcher-item {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 6px;
  text-align: center;
}

.launcher-item:hover {
  border-radius: 16px;
  background: var(--launcher-hover-bg);
}

.launcher-item__label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-700);
}

.icon-circle,
.window-icon,
.shelf-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.shelf-icon {
  filter: drop-shadow(0 2px 2px rgba(21, 38, 73, 0.16));
}

.window-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.icon-circle svg,
.window-icon svg,
.shelf-icon svg {
  width: 26px;
  height: 26px;
}

.icon-art {
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
}

.icon--blink,
.icon--files,
.icon--linux,
.icon--ai {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.icon--blink::before,
.icon--blink::after,
.icon--files::before,
.icon--files::after,
.icon--linux::before,
.icon--linux::after,
.icon--ai::before,
.icon--ai::after {
  content: none !important;
}

.icon--blink .icon-art,
.icon--files .icon-art,
.icon--linux .icon-art,
.icon--ai .icon-art {
  max-width: 100%;
  max-height: 100%;
}

.icon--chrome {
  background: conic-gradient(#ea4335 0 33%, #fbbc04 33% 66%, #34a853 66% 100%);
}

.icon--chrome::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #4285f4;
  box-shadow: 0 0 0 5px #ffffff;
}

.icon--camera {
  background: #e8f0fe;
}

.icon--camera::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  background: #1a73e8;
}

.icon--camera::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #9ec0ff;
}

.icon--files {
  background: #dbe9ff;
}

.icon--files::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 13px;
  bottom: 10px;
  border-radius: 8px;
  background: #4285f4;
}

.icon--files::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 16px;
  height: 8px;
  border-radius: 5px 5px 0 0;
  background: #8eb6ff;
}

.icon--docs,
.icon--calendar,
.icon--mail,
.icon--maps,
.icon--messages,
.icon--gallery,
.icon--drive,
.icon--keep,
.icon--meet,
.icon--ai,
.icon--calc,
.icon--chat,
.icon--linux,
.icon--shortcut,
.icon--photoshop,
.icon--express,
.icon--m365,
.icon--mclip,
.icon--mdesigner,
.icon--blink,
.icon--explore {
  background: #ffffff;
}

.icon-glyph {
  font-size: 14px;
  font-weight: 700;
  color: #1a73e8;
  position: relative;
  z-index: 1;
}

.icon--docs .icon-glyph { color: #4285f4; }
.icon--calendar .icon-glyph { color: #3367d6; }
.icon--mail .icon-glyph { color: #ea4335; }
.icon--maps .icon-glyph { color: #34a853; }
.icon--messages .icon-glyph { color: #4285f4; }
.icon--gallery .icon-glyph { color: #b620e0; }
.icon--drive .icon-glyph { color: #34a853; }
.icon--keep .icon-glyph { color: #fbbc04; }
.icon--meet .icon-glyph { color: #34a853; }
.icon--ai .icon-glyph { color: #7b61ff; }
.icon--calc .icon-glyph { color: #0f9d58; }
.icon--chat .icon-glyph { color: #34a853; }
.icon--linux .icon-glyph { color: #5f6368; }
.icon--shortcut .icon-glyph { color: #5f6368; }
.icon--photoshop { background: #001e36; }
.icon--photoshop .icon-glyph { color: #31a8ff; }
.icon--express { background: #0f172a; }
.icon--express .icon-glyph { color: #f0a3ff; }
.icon--m365 .icon-glyph { color: #6d43ff; }
.icon--mclip .icon-glyph { color: #7f3cff; }
.icon--mdesigner .icon-glyph { color: #ff7a59; }
.icon--explore .icon-glyph { color: #4285f4; }

.icon--blink,
.icon--files,
.icon--linux,
.icon--ai {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.icon--blink::before,
.icon--blink::after,
.icon--files::before,
.icon--files::after,
.icon--linux::before,
.icon--linux::after,
.icon--ai::before,
.icon--ai::after {
  content: none !important;
}

.icon--blink .icon-art,
.icon--files .icon-art,
.icon--linux .icon-art,
.icon--ai .icon-art {
  max-width: 100%;
  max-height: 100%;
}

.quick-settings-panel {
  right: 8px;
  bottom: 66px;
  width: min(384px, calc(100vw - 16px));
  padding: 14px 14px 16px;
  border-radius: 24px;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(212, 231, 251, 0.94), rgba(202, 223, 247, 0.92));
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 20px 44px rgba(48, 85, 142, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .quick-settings-panel {
  background: linear-gradient(180deg, rgba(35, 42, 67, 0.94), rgba(28, 34, 58, 0.92));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
}

.calendar-panel {
  right: 8px;
  bottom: 66px;
  width: min(356px, calc(100vw - 16px));
  padding: 14px 14px 12px;
  border-radius: 24px;
  isolation: isolate;
  background: var(--panel-bg);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
}

.calendar-panel__header,
.calendar-panel__month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-panel__header h2,
.calendar-panel__month-row h3,
.calendar-panel__footer-label {
  margin: 0;
}

.calendar-panel__header h2 {
  font-size: 1.28rem;
  font-weight: 600;
}

.calendar-panel__header-actions,
.calendar-panel__month-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-panel__chip,
.calendar-panel__icon-button,
.calendar-panel__month-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--window-control-bg);
  color: var(--ink-700);
  box-shadow: inset 0 0 0 1px var(--card-border);
  transition: background var(--anim-fast), transform var(--anim-fast);
}

.calendar-panel__chip:hover,
.calendar-panel__icon-button:hover,
.calendar-panel__month-button:hover {
  background: var(--window-control-hover-bg);
}

.calendar-panel__chip {
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
}

.calendar-panel__icon-button,
.calendar-panel__month-button {
  width: 34px;
  border-radius: 50%;
}

.calendar-panel__gear {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
}

.calendar-panel__gear::before,
.calendar-panel__gear::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.calendar-panel__gear::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.calendar-panel__month-row {
  margin-top: 14px;
}

.calendar-panel__month-row h3 {
  font-size: 1.6rem;
  font-weight: 500;
}

.calendar-panel__month-button {
  font-size: 1.2rem;
  line-height: 1;
}

.calendar-panel__weekdays,
.calendar-panel__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-panel__weekdays {
  margin-top: 14px;
  padding: 0 2px;
}

.calendar-panel__weekdays span {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-500);
}

.calendar-panel__grid {
  gap: 4px;
  margin-top: 8px;
}

.calendar-panel__day {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 0.96rem;
  font-weight: 500;
  transition: background var(--anim-fast), color var(--anim-fast), transform var(--anim-fast);
}

.calendar-panel__day:hover {
  background: var(--window-control-bg);
}

.calendar-panel__day.is-outside {
  color: var(--ink-500);
  opacity: 0.48;
}

.calendar-panel__day.is-today {
  background: linear-gradient(180deg, #1a73e8, #0d5fc9);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(26, 115, 232, 0.28);
}

.calendar-panel__footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-divider);
}

.calendar-panel__footer-handle {
  width: 32px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--panel-divider);
}

.calendar-panel__footer-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-500);
}

.calendar-panel__event-card {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow:
    inset 0 0 0 1px var(--card-border),
    0 8px 20px rgba(28, 44, 82, 0.08);
  display: grid;
  gap: 4px;
}

.calendar-panel__event-card strong,
.calendar-panel__event-card span {
  margin: 0;
}

.calendar-panel__event-card strong {
  font-size: 1rem;
  font-weight: 600;
}

.calendar-panel__event-card span {
  color: var(--ink-500);
  line-height: 1.45;
}

.quick-settings-topbar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) repeat(4, 42px);
  align-items: center;
  gap: 8px;
}

.quick-settings-account,
.quick-settings-utility {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.quick-settings-signout:hover,
.quick-settings-account:hover,
.quick-settings-utility:hover,
.slider-field__action:hover {
  background: rgba(255, 255, 255, 0.26);
}

.quick-settings-utility.quick-toggle--active {
  background: var(--quick-toggle-active-bg);
}

.quick-settings-account__avatar {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 50%;
  background: url("/assets/icons/login/pfp.webp") center/cover no-repeat;
}

.quick-settings-signout {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: var(--ink-900);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
}

.quick-settings-utility__glyph {
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.quick-settings-utility__glyph--power { background-image: var(--ui-icon-power); }
.quick-settings-utility__glyph--lock { background-image: var(--ui-icon-lock); }
.quick-settings-utility__glyph--settings { background-image: var(--ui-icon-settings); }
.quick-settings-utility__glyph--theme { background-image: var(--ui-icon-theme); }
.quick-settings-utility__glyph--chevron { background-image: var(--ui-icon-chevron); }

.quick-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 18px;
}

.quick-toggle {
  min-height: 112px;
  padding: 8px 6px 0;
  border-radius: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.quick-toggle__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: background-color var(--anim-fast);
}

.quick-toggle:not(.quick-toggle--active):hover .quick-toggle__icon {
  background-color: rgba(27, 115, 232, 0.12);
}

.quick-toggle--active .quick-toggle__icon {
  background-color: #1b73e8;
}

.quick-toggle__icon--wifi { background-image: var(--ui-icon-wifi); }
.quick-toggle__icon--bluetooth { background-image: var(--ui-icon-bluetooth); }
.quick-toggle__icon--notifications { background-image: var(--ui-icon-dnd); }
.quick-toggle__icon--capture { background-image: var(--ui-icon-capture); }
.quick-toggle__icon--nearby { background-image: var(--ui-icon-nearby); }
.quick-toggle__icon--night-light { background-image: var(--ui-icon-night-light); }
.quick-toggle__icon--keyboard { background-image: var(--ui-icon-keyboard); }
.quick-toggle__icon--theme { background-image: var(--ui-icon-theme); }

.quick-toggle--active .quick-toggle__icon--wifi { background-image: var(--ui-icon-wifi-active); }
.quick-toggle--active .quick-toggle__icon--bluetooth { background-image: var(--ui-icon-bluetooth-active); }
.quick-toggle--active .quick-toggle__icon--notifications { background-image: var(--ui-icon-dnd-active); }
.quick-toggle--active .quick-toggle__icon--capture { background-image: var(--ui-icon-capture-active); }
.quick-toggle--active .quick-toggle__icon--nearby { background-image: var(--ui-icon-nearby-active); }
.quick-toggle--active .quick-toggle__icon--night-light { background-image: var(--ui-icon-night-light-active); }
.quick-toggle--active .quick-toggle__icon--keyboard { background-image: var(--ui-icon-keyboard-active); }
.quick-toggle--active .quick-toggle__icon--theme { background-image: var(--ui-icon-theme-active); }

.quick-toggle strong,
.quick-toggle small {
  display: block;
  margin: 0;
  line-height: 1.18;
}

.quick-toggle strong {
  color: var(--ink-900);
  font-size: 0.84rem;
  font-weight: 500;
}

.quick-toggle small {
  color: var(--ink-500);
  font-size: 0.76rem;
}

.quick-toggle__caret {
  font-size: 0.52rem;
  vertical-align: middle;
  margin-left: 2px;
}

.quick-settings-dots {
  margin: 10px 0 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.quick-settings-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.quick-settings-dots span.is-active {
  background: rgba(255, 255, 255, 0.92);
}

.slider-field {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin-top: 16px;
}

.slider-field input[type="range"] {
  width: 100%;
}

.slider-field--brightness {
  grid-template-columns: 32px minmax(0, 1fr);
}

.slider-field__icon,
.slider-field__action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.slider-field--volume .slider-field__icon {
  background-color: #1b73e8;
}

.slider-field__icon--volume { background-image: var(--ui-icon-volume); }
.slider-field__icon--brightness { background-image: var(--ui-icon-brightness); }
.slider-field__action { background-image: var(--ui-icon-volume-chevron); }

.slider-field--volume .slider-field__icon--volume {
  background-image: var(--ui-icon-volume-active);
}

.slider-field input[type="range"] {
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(27, 115, 232, 0.28);
}

.slider-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #1b73e8;
  box-shadow: 0 0 0 2px rgba(196, 221, 255, 0.8);
}

.slider-field input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #1b73e8;
  box-shadow: 0 0 0 2px rgba(196, 221, 255, 0.8);
}

.slider-field input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(27, 115, 232, 0.28);
}

.quick-settings-summary {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-500);
  font-size: 0.84rem;
}

.quick-settings-summary__separator {
  width: 1px;
  height: 20px;
  background: rgba(80, 102, 145, 0.34);
}

.shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  min-height: var(--launcher-frame-size);
  padding: 0 10px 0 2px;
  display: grid;
  grid-template-columns: minmax(var(--launcher-frame-size), 1fr) auto minmax(112px, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 18px 18px 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--shelf-bg);
  backdrop-filter: blur(26px) saturate(140%);
  box-shadow: var(--shelf-shadow);
  border: 1px solid var(--shelf-border);
  border-bottom: 0;
}

.shelf-launcher,
.shelf-app,
.shelf-status {
  min-height: 42px;
  border-radius: 12px;
}

.shelf-launcher {
  width: var(--launcher-frame-size);
  height: var(--launcher-frame-size);
  justify-self: start;
  display: block;
  background-color: transparent;
  background-image: var(--launcher-orb);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: var(--launcher-frame-size) calc(var(--launcher-frame-size) * 3);
  border-radius: 0;
}

.shelf-apps {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
}

.shelf-app {
  position: relative;
  width: var(--launcher-frame-size);
  height: var(--launcher-frame-size);
  flex: 0 0 var(--launcher-frame-size);
  display: grid;
  place-items: center;
  background: transparent;
}

.shelf-app:hover {
  background: transparent;
}

.shelf-launcher:hover {
  background-image: var(--launcher-orb);
  background-repeat: no-repeat;
  background-position: center calc(var(--launcher-frame-size) * -1);
  background-size: var(--launcher-frame-size) calc(var(--launcher-frame-size) * 3);
}

.shelf-launcher:active,
.shelf-launcher[aria-expanded="true"] {
  background-image: var(--launcher-orb);
  background-repeat: no-repeat;
  background-position: center calc(var(--launcher-frame-size) * -2);
  background-size: var(--launcher-frame-size) calc(var(--launcher-frame-size) * 3);
}

.shelf-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
}

.shelf-status__pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shelf-status-bg);
  padding: 0 10px;
  transition: background var(--anim-fast);
}

.shelf-status__pill--date {
  border-radius: 12px 2px 2px 12px;
}

.shelf-status__pill--system {
  gap: 8px;
  border-radius: 2px 12px 12px 2px;
}

.shelf-status__pill:hover,
.shelf-status__pill[aria-expanded="true"] {
  background: var(--shelf-chip-hover-bg);
}

.shelf-status__date,
.shelf-status__time {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-700);
}

.shelf-status__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-glyph {
  width: 14px;
  height: 14px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.status-glyph--wifi {
  background-image: var(--ui-icon-wifi);
}

.status-glyph--battery {
  width: 18px;
  height: 14px;
  background-image: var(--ui-icon-battery);
}

@media (max-width: 920px) {
  body {
    overflow: auto;
  }

  .login-auth {
    left: 24px;
    right: 24px;
    top: 42%;
    width: auto;
    transform: translateY(-50%);
    text-align: center;
  }

  .login-secret {
    width: 100%;
  }

  .login-footer {
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .login-footer__actions {
    flex-wrap: wrap;
    gap: 14px;
  }

  .login-footer__status {
    align-self: flex-end;
  }

  .launcher-panel,
  .quick-settings-panel,
  .calendar-panel {
    width: calc(100vw - 16px);
  }

  .launcher-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .window {
    left: 12px !important;
    top: 12px !important;
    width: calc(100vw - 24px) !important;
  }

  .shelf {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    overflow-x: auto;
  }
}

/* Tool Options Panel */
.ps-tool-options {
  position: fixed;
  top: 56px;
  left: 92px;
  width: 268px;
  max-height: calc(100% - 76px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 10;
  margin: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.ps-tool-options[hidden] {
  display: none !important;
}

.ps-tool-options__header {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.ps-tool-options__title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.ps-tool-options__close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #999;
  padding: 0 2px;
  line-height: 1;
  transition: color 80ms;
}

.ps-tool-options__close:hover {
  color: #333;
}

.ps-tool-options__content {
  padding: 12px;
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  min-height: 0;
}

.ps-tool-option-section {
  margin-bottom: 12px;
}

.ps-tool-option-section:first-child {
  margin-top: 0;
}

.ps-tool-option-group {
  margin-bottom: 12px;
  padding: 12px;
  background: #F8F8F8;
  border-radius: 8px;
}

.ps-tool-option-group--move {
  margin-top: -12px;
  margin-bottom: 4px;
}

.ps-tool-option-group .ps-tool-option-section:last-child,
.ps-tool-option-group .ps-collapsible:last-child {
  margin-bottom: 0;
}

.ps-tool-option-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  display: block;
}

/* Collapsible sections */
.ps-collapsible {
  margin-bottom: 0;
}

.ps-collapsible__header {
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 80ms;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.ps-collapsible__header:hover {
  color: #000;
}

.ps-collapsible__arrow {
  display: inline-block;
  transition: transform 180ms ease;
  font-size: 10px;
  width: 14px;
  text-align: center;
}

.ps-collapsible[data-ps-collapsible][data-expanded="true"] .ps-collapsible__arrow {
  transform: rotate(90deg);
}

.ps-collapsible__content {
  display: none;
  margin-bottom: 4px;
}

.ps-collapsible[data-ps-collapsible][data-expanded="false"] .ps-collapsible__content {
  display: none !important;
}

.ps-collapsible[data-ps-collapsible][data-expanded="true"] .ps-collapsible__content {
  display: block;
}

.ps-tool-option-button {
  width: 100%;
  padding: 10px 12px;
  background: #3B63FB;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 80ms;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ps-tool-option-button:hover {
  background: #274dea;
}

.ps-tool-option-button--icon-only,
.ps-tool-option-button--with-icon {
  position: relative;
}

/* Icon rendering (single image system) */
.ps-tool-option-button--icon-only::before,
.ps-tool-option-button--with-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center;
  pointer-events: none;
}

.ps-tool-option-button--icon-only::before {
  left: 50%;
  transform: translate(-50%, -50%) scale(1.25);
}

.ps-tool-option-button--with-icon::before {
  left: 16px;
  transform: translateY(-50%) scale(1.25);
}

.ps-tool-option-button.ps-tool-option-button--with-icon {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 52px;
  justify-content: flex-start;
  text-align: left;
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="move"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/move_inactive.webp");
}

.ps-tool-option-button.ps-tool-option-button--with-icon[data-ps-select-sub-tool="move"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/move_active.webp");
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="brush"]::before,
.ps-tool-option-button--with-icon[data-ps-select-sub-tool="eraser"]::before {
  background-image: url("/assets/photoshop/debug-crops/paint_active.webp");
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="shape"]::before {
  background-image: url("/assets/photoshop/debug-crops/shapes_active.webp");
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="type"]::before {
  background-image: url("/assets/photoshop/debug-crops/type_active.webp");
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="eyedropper"]::before {
  background-image: url("/assets/photoshop/debug-crops/eye_active.webp");
}

.ps-tool-option-button--with-icon[data-ps-select-sub-tool="select"]::before {
  background-image: url("/assets/photoshop/debug-crops/select_active.webp");
}

.ps-tool-option-button--secondary {
  background: #f0f0f0;
  color: #333;
}

.ps-tool-option-button--secondary:hover {
  background: #e8e8e8;
}

.ps-tool-option-button--secondary.ps-tool-option-button--with-icon {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 0 12px 0 52px;
  color: #333;
  border: none;
  background-color: transparent;
  font-size: 13px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  transition: background 80ms;
}

.ps-tool-option-button--secondary.ps-tool-option-button--with-icon:hover {
  background-color: #f5f5f5;
}

.ps-tool-option-button--with-icon[data-ps-action="transform"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform.webp");
}

.ps-tool-option-button--with-icon[data-ps-action="crop"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/crop.webp");
}

.ps-tool-option-button.ps-tool-option-button--with-icon[data-ps-action="transform"]::before,
.ps-tool-option-button.ps-tool-option-button--with-icon[data-ps-action="crop"]::before {
  filter: brightness(0) invert(1);
}

.ps-tool-option-section--move-footer {
  margin-bottom: 0;
}

.ps-tool-option-section--move-footer .ps-tool-option-button--secondary.ps-tool-option-button--with-icon:last-child {
  margin-bottom: 0;
}

.ps-select-tool-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.ps-select-tool-row {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  font-family: var(--spectrum-font-family);
}

.ps-select-tool-row:hover {
  background: var(--spectrum-gray-100);
}

.ps-select-tool-row.is-active {
  background: var(--spectrum-blue-800);
  color: var(--ps-on-accent-color);
}

.ps-select-tool-row__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
}

.ps-select-tool-row__icon svg {
  width: 20px;
  height: 20px;
}

.ps-select-divider {
  height: 1px;
  background: var(--ps-panel-divider);
  margin: 6px 0;
}

.ps-select-sub-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-select-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ps-select-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--spectrum-gray-100);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 400;
  font-family: var(--spectrum-font-family);
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
}

.ps-select-action-btn svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.ps-select-action-btn:hover {
  background: var(--spectrum-gray-200);
}

.ps-select-action-btn--full {
  width: 100%;
}

.ps-select-action-btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.ps-select-create-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--spectrum-gray-800);
  color: var(--spectrum-gray-25);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--spectrum-font-family);
}

.ps-select-create-btn svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.ps-select-create-btn:hover {
  background: var(--spectrum-gray-900);
}

.ps-select-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.ps-select-field-label {
  font-size: 11px;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-weight: 500;
  font-family: var(--spectrum-font-family);
  white-space: nowrap;
}

.ps-select-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--ps-panel-field-bg);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-weight: 400;
  font-family: var(--spectrum-font-family);
  flex: 1;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
}

.ps-select-dropdown-btn--sm {
  flex: 0 0 auto;
  min-width: 72px;
}

.ps-select-dropdown-btn:hover {
  background: var(--spectrum-gray-100);
}

.ps-select-collapsible__header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 2px 0;
  background: transparent;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--spectrum-font-family);
  text-align: left;
  border-top: 1px solid var(--ps-panel-field-border);
  margin-top: 2px;
}

.ps-select-collapsible__header:hover {
  color: var(--spectrum-neutral-content-color-default);
}

.ps-select-collapsible__content {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.ps-select-collapsible[data-expanded="true"] .ps-select-collapsible__content {
  display: flex;
}

.ps-select-toggle {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--spectrum-gray-300);
  position: relative;
  flex: 0 0 28px;
  cursor: pointer;
}

.ps-select-toggle::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 150ms;
}

.ps-select-toggle.is-active {
  background: var(--spectrum-blue-800);
}

.ps-select-toggle.is-active::after {
  left: 14px;
}

/* ── Select panel: sub-tool panels ────────────────────────────────── */
.ps-subtool-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ps-subtool-basic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 6px;
}

/* ── Spectrum-style full-width slider ─────────────────────────────── */
.ps-sld-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ps-sld-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-sld-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-family: var(--spectrum-font-family);
  flex: 1;
}

.ps-sld-input-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ps-sld-input {
  width: 40px;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ps-panel-field-bg);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 11px;
  font-family: var(--spectrum-font-family);
  text-align: right;
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
  -moz-appearance: textfield;
}

.ps-sld-input::-webkit-inner-spin-button,
.ps-sld-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.ps-sld-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--spectrum-blue-800);
}

.ps-sld-unit {
  font-size: 11px;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-family: var(--spectrum-font-family);
  min-width: 14px;
}

.ps-sld-track-wrap {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
}

.ps-sld-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: var(--spectrum-blue-800);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.ps-sld-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 2;
  -webkit-appearance: none;
}

.ps-sld-track-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: var(--spectrum-gray-300);
  border-radius: 2px;
}

/* ── Toggle switch row ────────────────────────────────────────────── */
.ps-sw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  gap: 8px;
}

.ps-sw-row--detect {
  padding: 6px 10px;
  cursor: pointer;
}

.ps-sw-row__label {
  font-size: 11px;
  color: var(--spectrum-neutral-content-color-default);
  font-family: var(--spectrum-font-family);
  flex: 1;
}

.ps-sw-row__switch {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 16px;
  cursor: pointer;
}

.ps-sw-row__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ps-sw-row__track {
  display: block;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--spectrum-gray-300);
  position: relative;
  transition: background 150ms;
}

.ps-sw-row__track::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 150ms;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.ps-sw-row__input:checked + .ps-sw-row__track {
  background: var(--spectrum-blue-800);
}

.ps-sw-row__input:checked + .ps-sw-row__track::after {
  left: 14px;
}

/* ── Selection mode button group ──────────────────────────────────── */
.ps-selmode-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px 2px;
}

.ps-selmode-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  flex: 0 0 28px;
  transition: background 100ms;
}

.ps-selmode-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ps-selmode-btn:hover {
  background: var(--spectrum-gray-100);
}

.ps-selmode-btn.is-active {
  background: var(--spectrum-blue-800);
  color: var(--ps-on-accent-color, #fff);
}

/* ── Advanced settings accordion ──────────────────────────────────── */
.ps-adv-divider {
  height: 1px;
  background: var(--ps-panel-divider, var(--spectrum-gray-200));
  margin: 2px 0;
}

.ps-adv__header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: 13px;
  font-weight: 400;
  font-family: var(--spectrum-font-family);
  text-align: left;
  border-top: 1px solid var(--ps-panel-divider, var(--spectrum-gray-200));
  border-bottom: none;
  outline: none;
}

.ps-adv__header:hover {
  color: var(--spectrum-neutral-content-color-default);
}

.ps-adv__header:focus {
  outline: none;
  box-shadow: none;
}

.ps-adv[data-expanded="true"] .ps-adv__header {
  border-bottom: 1px solid var(--ps-panel-divider, var(--spectrum-gray-200));
}

.ps-adv__chevron {
  flex: 0 0 10px;
  transition: transform 180ms;
}

.ps-adv[data-expanded="true"] .ps-adv__chevron {
  transform: rotate(90deg);
}

.ps-adv__content {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px 10px 8px;
}

.ps-adv[data-expanded="true"] .ps-adv__content {
  display: flex;
}

/* ── Advanced action button ───────────────────────────────────────── */
.ps-adv-action-btn {
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--spectrum-gray-100);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 11px;
  font-weight: 400;
  font-family: var(--spectrum-font-family);
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
  margin-top: 4px;
}

.ps-adv-action-btn:hover {
  background: var(--spectrum-gray-200);
}

.ps-adv-action-btn--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ── New selection button ─────────────────────────────────────────── */
.ps-new-sel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--spectrum-gray-800);
  color: var(--spectrum-gray-25, #fff);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--spectrum-font-family);
}

.ps-new-sel-btn:hover {
  background: var(--spectrum-gray-900);
}

.ps-new-sel-btn svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

/* ── Select more / Select less ghost buttons ─────────────────────── */
.ps-sel-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ps-sel-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--spectrum-gray-100);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 13px;
  font-weight: 400;
  font-family: var(--spectrum-font-family);
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
  white-space: nowrap;
}

.ps-sel-ghost-btn svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.ps-sel-ghost-btn:hover {
  background: var(--spectrum-gray-200);
}

.ps-sel-ghost-btn--full {
  width: 100%;
  border-radius: 8px;
  justify-content: flex-start;
}

/* ── Field rows (label + dropdown) ────────────────────────────────── */
.ps-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.ps-field-label {
  font-size: 11px;
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-weight: 500;
  font-family: var(--spectrum-font-family);
  white-space: nowrap;
}

.ps-field-select-wrap {
  position: relative;
  flex: 1;
}

.ps-field-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--ps-panel-field-bg);
  color: var(--spectrum-neutral-content-color-default);
  font-size: 11px;
  font-family: var(--spectrum-font-family);
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
}

.ps-field-select-btn--sm {
  flex: 0 0 auto;
  width: auto;
}

.ps-field-select-btn:hover {
  background: var(--spectrum-gray-100);
}

.ps-field-select-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--ps-panel-bg, #fff);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14), inset 0 0 0 1px var(--ps-panel-field-border);
  z-index: 100;
  overflow: hidden;
}

.ps-field-select-menu[hidden] {
  display: none;
}

.ps-field-select-option {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--spectrum-font-family);
  color: var(--spectrum-neutral-content-color-default);
  text-align: left;
  background: transparent;
}

.ps-field-select-option:hover {
  background: var(--spectrum-gray-100);
}

.ps-field-select-option.is-selected {
  color: var(--spectrum-blue-800);
  font-weight: 600;
}

.ps-select-field-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ps-select-dropdown-wrap {
  position: relative;
  width: 100%;
}

.ps-select-dropdown-btn__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.ps-select-dropdown-btn__icon svg {
  width: 16px;
  height: 16px;
}

.ps-select-chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  transition: transform 150ms ease;
}

.ps-select-chevron--down {
  transform: rotate(90deg);
}

.ps-select-dropdown-wrap[data-open="true"] .ps-select-chevron--down {
  transform: rotate(270deg);
}

.ps-select-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--spectrum-gray-25);
  border: 1px solid var(--spectrum-gray-200);
  border-radius: 8px;
  box-shadow: var(--ps-panel-shadow);
  z-index: 20;
  overflow: hidden;
}

.ps-select-dropdown-option {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--spectrum-neutral-content-color-default);
  font-size: 12px;
  font-family: var(--spectrum-font-family);
  text-align: left;
}

.ps-select-dropdown-option svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.ps-select-dropdown-option:hover {
  background: var(--spectrum-gray-100);
}

.ps-select-dropdown-option.is-selected {
  background: var(--ps-panel-highlight-bg);
}

.ps-tool-option-button--icon-only {
  background: transparent;
  color: transparent;
  padding: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  flex-shrink: 0;
  display: block;
  justify-self: start;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.ps-tool-option-button--icon-only[data-align="left"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/left.webp");
}

.ps-tool-option-button--icon-only[data-align="center"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/hor_cen.webp");
}

.ps-tool-option-button--icon-only[data-align="right"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/right.webp");
}

.ps-tool-option-button--icon-only[data-align="top"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/top.webp");
}

.ps-tool-option-button--icon-only[data-align="centerv"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/vert_cent.webp");
}

.ps-tool-option-button--icon-only[data-align="bottom"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/align/bottom.webp");
}

.ps-tool-option-button--icon-only[data-distribute="left"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_1.webp");
}

.ps-tool-option-button--icon-only[data-distribute="center"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_2.webp");
}

.ps-tool-option-button--icon-only[data-distribute="right"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_3.webp");
}

.ps-tool-option-button--icon-only[data-distribute="top"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_4.webp");
}

.ps-tool-option-button--icon-only[data-distribute="centerv"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_5.webp");
}

.ps-tool-option-button--icon-only[data-distribute="bottom"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/distribute/dist_6.webp");
}

.ps-tool-option-button--icon-only[data-spacing="horizontal"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/space/dist_space_1.webp");
}

.ps-tool-option-button--icon-only[data-spacing="vertical"]::before {
  background-image: url("/assets/photoshop/icons/ps-tool-options/space/dist_space_2.webp");
}

.ps-tool-option-button--icon-only:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}

.ps-tool-options-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 0 -6px;
  padding: 0 6px;
}

.ps-tool-options-grid--narrow {
  grid-template-columns: auto auto;
  gap: 0;
  justify-content: flex-start;
}

select.ps-tool-options-dropdown,
input.ps-tool-options-dropdown {
  width: 100%;
  padding: 10px 12px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

select.ps-tool-options-dropdown:hover,
input.ps-tool-options-dropdown:hover {
  background-color: #e8e8e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.ps-tool-options-dropdown--custom {
  position: relative;
  width: 225px;
  max-width: 100%;
}

.ps-tool-options-dropdown__trigger {
  position: relative;
  width: 225px;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 32px 0 12px;
  display: flex;
  align-items: center;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  color: #333;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ps-tool-options-dropdown__trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

.ps-tool-options-dropdown__trigger:hover {
  background: #e8e8e8;
}

.ps-tool-options-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  bottom: auto;
  width: 225px;
  max-width: 100%;
  padding: 4px 0;
  background: #FFFFFF;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  z-index: 8;
}

.ps-tool-options-dropdown__option {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: none;
  color: #333;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ps-tool-options-dropdown__option:hover,
.ps-tool-options-dropdown__option.is-selected {
  background: #F8F8F8;
}

.ps-tool-options__divider {
  height: 1px;
  background: #e8e8e8;
  margin: 12px 0;
}

.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="transform"] .ps-tool-options__header,
.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="crop"] .ps-tool-options__header {
  padding: 10px 4px 2px 8px;
  border-bottom: 0;
}

.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="transform"] .ps-tool-options__title,
.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="crop"] .ps-tool-options__title {
  padding: 8px 0;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #20242a;
}

.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="transform"] .ps-tool-options__close,
.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="crop"] .ps-tool-options__close {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #30343b;
  font-size: 28px;
  line-height: 1;
}

.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="transform"] .ps-tool-options__close:hover,
.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="crop"] .ps-tool-options__close:hover {
  background: none;
  color: #20242a;
}

.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="transform"] .ps-tool-options__content,
.ps-tool-options[data-ps-tool-options-tool="move"][data-ps-tool-options-view="crop"] .ps-tool-options__content {
  padding: 0 8px 8px;
}

.ps-transform-panel {
  display: grid;
  gap: 8px;
}

.ps-transform-panel__nav,
.ps-transform-panel__footer {
  display: grid;
  gap: 4px;
}

.ps-transform-nav__button {
  margin-bottom: 0;
  border-radius: 16px;
}

.ps-transform-card {
  padding: 12px 14px 14px;
  background: #f7f7f8;
  border-radius: 18px;
  box-shadow: none;
}

.ps-transform-card--placeholder {
  min-height: 228px;
}

.ps-transform-card__modes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ps-transform-mode {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #343840;
  box-shadow: none;
  cursor: pointer;
}

.ps-transform-mode:hover {
  background: #ececec;
}

.ps-transform-mode--active {
  background: #2d2f34;
}

.ps-transform-mode__icon {
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ps-transform-mode__icon[data-ps-transform-mode="free"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/free.webp");
}

.ps-transform-mode__icon[data-ps-transform-mode="skew"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/skew.webp");
}

.ps-transform-mode__icon[data-ps-transform-mode="perspective"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/perspective.webp");
}

.ps-transform-mode__icon[data-ps-transform-mode="distort"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/distort.webp");
}

.ps-transform-mode--active .ps-transform-mode__icon[data-ps-transform-mode="free"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/free_active.webp");
}

.ps-transform-mode--active .ps-transform-mode__icon[data-ps-transform-mode="skew"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/skew_active.webp");
}

.ps-transform-mode--active .ps-transform-mode__icon[data-ps-transform-mode="perspective"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/perspective_active.webp");
}

.ps-transform-mode--active .ps-transform-mode__icon[data-ps-transform-mode="distort"] {
  background-image: url("/assets/photoshop/icons/ps-tool-options/transform/distort_active.webp");
}

.ps-transform-card__fields {
  display: grid;
  gap: 10px;
}

.ps-transform-size-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
}

.ps-transform-size-group__fields {
  display: grid;
  gap: 10px;
}

.ps-transform-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ps-transform-field__label {
  color: #4c5159;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.ps-transform-field__control {
  min-width: 0;
  width: 100%;
  max-width: 160px;
}

.ps-transform-field__input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid #d3d4d8;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(211, 212, 216, 0.9);
  color: #282c33;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ps-transform-field__input:focus {
  outline: none;
  border-color: #9bacff;
  box-shadow:
    inset 0 0 0 1px rgba(155, 172, 255, 0.9),
    0 0 0 3px rgba(75, 103, 245, 0.14);
}

.ps-transform-field__input[disabled] {
  background: #f5f6f8;
  color: #969ba5;
  box-shadow: inset 0 0 0 1px rgba(214, 216, 222, 0.62);
}

.ps-transform-field__input::-webkit-outer-spin-button,
.ps-transform-field__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.ps-transform-field__input[type="number"] {
  appearance: textfield;
}

.ps-transform-aspect {
  position: relative;
  width: 24px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-transform-aspect__bracket {
  position: absolute;
  right: 0;
  width: 19px;
  height: 4.5px;
  display: block;
  overflow: visible;
}

.ps-transform-aspect__bracket--top {
  top: 10px;
}

.ps-transform-aspect__bracket--bottom {
  bottom: 10px;
  transform: scaleY(-1);
  transform-origin: center;
}

.ps-transform-aspect__lock-button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #343840;
}

.ps-transform-aspect__lock-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

.ps-transform-card__empty {
  min-height: 196px;
  display: grid;
  align-content: center;
  gap: 8px;
  color: #5f646d;
}

.ps-transform-card__empty strong {
  font-size: 1rem;
  font-weight: 700;
  color: #232831;
}

.ps-tool-slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e8e8e8;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 6px 0;
}

.ps-tool-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4873ff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ps-tool-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4873ff;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ps-tool-options input[type="number"]:not(.ps-transform-field__input) {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

.ps-tool-options input[type="number"]:not(.ps-transform-field__input):focus {
  outline: none;
  border-color: #4873ff;
  box-shadow: 0 0 0 2px rgba(72, 115, 255, 0.1);
}

/* Toggle Switch Slider */
.ps-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #333;
  margin: 8px 0;
  cursor: pointer;
}

.ps-toggle-input {
  display: none;
}

.ps-toggle-slider {
  display: inline-block;
  width: 28px;
  height: 16px;
  background: #e1e1e1;
  border-radius: 8px;
  position: relative;
  transition: background 200ms ease;
  flex-shrink: 0;
}

.ps-toggle-slider::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: #f8f8f8;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 200ms ease;
  border: 1.5px solid #505050;
}

.ps-toggle-input:checked + .ps-toggle-slider {
  background: #292929;
}

.ps-toggle-input:checked + .ps-toggle-slider::after {
  left: 14px;
}

/* ============================================================
   COMBO SLIDER (.ps-cs-*) — Photoshop-style number+popover (light theme)
   ============================================================ */
.ps-cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  gap: 8px;
}

.ps-cs-label {
  font-size: 11px;
  color: var(--spectrum-neutral-subdued-content-color-default);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--spectrum-font-family);
}

.ps-cs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 24px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--ps-panel-field-border);
  background: var(--ps-panel-field-bg);
  overflow: visible;
}

.ps-cs-input {
  width: 40px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px 0 0 4px;
  color: var(--spectrum-neutral-content-color-default);
  font-size: 11px;
  font-family: var(--spectrum-font-family);
  text-align: right;
  padding: 0 4px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ps-cs-input::-webkit-inner-spin-button,
.ps-cs-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ps-cs-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--spectrum-blue-800);
  border-radius: 4px 0 0 4px;
  position: relative;
  z-index: 1;
}

.ps-cs-unit {
  background: transparent;
  border: none;
  border-left: 1px solid var(--ps-panel-field-border);
  color: var(--spectrum-neutral-subdued-content-color-default);
  font-size: 10px;
  font-family: var(--spectrum-font-family);
  padding: 0 3px;
  height: 100%;
  display: flex;
  align-items: center;
  line-height: 1;
}

.ps-cs-btn {
  width: 18px;
  height: 100%;
  background: transparent;
  border: none;
  border-left: 1px solid var(--ps-panel-field-border);
  border-radius: 0 4px 4px 0;
  color: var(--spectrum-neutral-subdued-content-color-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.ps-cs-btn:hover {
  background: var(--spectrum-gray-100);
  color: var(--spectrum-neutral-content-color-default);
}
.ps-cs-btn svg { display: block; }

.ps-cs-popover {
  position: fixed; /* overridden to fixed by JS on open */
  z-index: 9999;
  background: white;
  border: 1px solid var(--ps-panel-field-border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  width: 240px;
}
.ps-cs-popover[hidden] { display: none; }

.ps-cs-slider {
  width: 100%;
  accent-color: var(--spectrum-blue-800);
  cursor: pointer;
  display: block;
  height: 16px;
}

/* ============================================================
   TOGGLE SWITCH ROW (.ps-tr / .ps-sw) — Photoshop option rows (light theme)
   ============================================================ */
.ps-tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  gap: 8px;
}

.ps-tr__label {
  font-size: 11px;
  color: var(--spectrum-neutral-content-color-default);
  font-family: var(--spectrum-font-family);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.ps-sw {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ps-sw__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ps-sw__track {
  display: block;
  width: 28px;
  height: 16px;
  background: var(--spectrum-gray-300);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.ps-sw__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left 0.15s;
}
.ps-sw__input:checked + .ps-sw__track {
  background: var(--spectrum-blue-800);
}
.ps-sw__input:checked + .ps-sw__track::after {
  left: 14px;
}

/* Collapsible chevron in select panel */
.ps-select-collapsible__chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.ps-select-collapsible[data-expanded="true"] .ps-select-collapsible__chevron {
  transform: rotate(90deg);
}