/* Barlow Condensed, self-hosted beside the runtime rather than linked: the app
   shell reads these files off disk with no network, and the site's policy is
   `default-src 'self'`. The site adopted this face for its headings; the Studio
   kept the system font, so the two halves of one product did not look related.
   Licence in assets/fonts/OFL.txt. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/barlow-condensed-800.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --picker-bg: #060606;
  --picker-surface: #101010;
  --editor-bg: #070707;
  --editor-panel: #050505;
  --editor-panel-soft: #111111;
  --control-bg: #0b0b0b;
  --line: rgba(244, 242, 235, 0.1);
  --line-dark: rgba(244, 242, 235, 0.1);
  --line-strong: rgba(244, 242, 235, 0.24);
  --text: #f4f2eb;
  --text-dark: #f4f2eb;
  --muted: rgba(244, 242, 235, 0.58);
  --muted-dark: rgba(244, 242, 235, 0.58);
  --accent: #f4f2eb;
  --accent-strong: #fbfaf4;
  --accent-ink: #070707;
  --danger: #ffb5a4;
  --danger-line: rgba(255, 181, 164, 0.44);
  --warning-line: rgba(234, 205, 145, 0.38);
  --dock-height: 48px;
  --sheet-peek: 0px;
  --sheet-expanded-max: min(42dvh, 360px);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  --radius-shell: 0px;
  --radius-ui: 0px;
  --radius-touch: 0px;
  --font-ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI",
    sans-serif;
  --font-display: "Barlow Condensed", "Helvetica Neue Condensed", "Helvetica Neue", "SF Pro Display",
    -apple-system, "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

html,
body {
  height: 100%;
}

html.is-editor-active,
html.is-editor-active body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--editor-panel);
}

body {
  margin: 0;
  background: var(--picker-bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea {
  touch-action: manipulation;
}

/* A button's default cursor is an arrow, so every clickable thing here had to
   remember to say otherwise — and the tool covers, which are the largest click
   targets in the picker, did not. Said once, so the next one is born right.
   The :disabled rules below are later and more specific, and still win. */
button,
summary,
[role="button"] {
  cursor: pointer;
}

button {
  letter-spacing: 0;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

img,
svg,
canvas,
.tool-card-preview,
.tool-card-face,
.tool-card-preview img {
  -webkit-user-drag: none;
  user-drag: none;
}

.is-hidden {
  display: none !important;
}

.studio-boot-screen {
  display: none;
}

html.is-web-free.is-studio-booting,
html.is-web-free.is-studio-booting body {
  background: var(--editor-bg);
}

html.is-web-free.is-studio-booting .app-shell {
  visibility: hidden;
}

html.is-web-free.is-studio-booting .studio-boot-screen {
  position: fixed;
  z-index: 2000;
  inset: 0;
  padding: clamp(18px, 3.2vw, 46px);
  background: var(--editor-bg);
  color: var(--text-dark);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.studio-boot-screen .brand-icon {
  width: 44px;
  height: 44px;
}

.studio-boot-screen span {
  color: rgba(244, 242, 235, 0.48);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.app-shell {
  min-height: 100%;
}

body.is-editor-active .app-shell {
  height: 100dvh;
  overflow: hidden;
  background: var(--editor-panel);
}

.button,
.dock-button,
.panel-tab,
.icon-button,
.editor-capability-button,
.live-preview-toggle,
.media-action-button {
  border: 0;
  cursor: pointer;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.button:active,
.dock-button:active,
.panel-tab:active,
.icon-button:active,
.editor-capability-button:active,
.live-preview-toggle:active,
.media-action-button:active {
  transform: translateY(1px);
}

.button:disabled,
.dock-button:disabled,
.panel-tab:disabled,
.icon-button:disabled,
.editor-capability-button:disabled,
.live-preview-toggle:disabled,
.media-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.button:focus-visible,
.dock-button:focus-visible,
.panel-tab:focus-visible,
.icon-button:focus-visible,
.editor-capability-button:focus-visible,
.live-preview-toggle:focus-visible,
.media-action-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(244, 242, 235, 0.72);
  outline-offset: 2px;
}

a:focus-visible,
summary:focus-visible,
.header-menu-studio-action:focus-visible,
.segmented-control button:focus-visible,
.editor-save-recovery button:focus-visible {
  outline: 2px solid rgba(244, 242, 235, 0.82);
  outline-offset: 3px;
}

.button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: var(--picker-surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.button.primary {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: var(--accent-ink);
}

.button.ghost {
  background: rgba(244, 242, 235, 0.07);
  color: var(--text);
}

.text-button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.tool-picker-view {
  min-height: 100dvh;
  padding: 0 14px env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -14px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 56px 8px 14px;
  background: var(--picker-bg);
}

.picker-topbar,
.section-heading,
.editor-topbar,
.sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.picker-topbar {
  display: none;
}

.web-picker-exit,
.web-editor-brand-lockup,
.web-editor-site-link,
.studio-site-exit {
  display: none;
}

html.is-web-free .picker-topbar {
  display: grid;
  min-height: 68px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.12);
}

html.is-web-free .home-header {
  padding: 0 0 8px;
}

html.is-web-free .home-tabs {
  max-width: none;
  padding: 8px clamp(18px, 3.2vw, 54px) 0;
}

html.is-web-free .home-settings-button {
  top: calc(76px + env(safe-area-inset-top, 0px));
  right: clamp(18px, 3.2vw, 54px);
}

html.is-web-free .web-picker-exit {
  display: flex;
}

/* The sidebar stretched these to its own width; in a bar they are chips. */
html.is-web-free .picker-topbar .web-projects-button {
  width: auto;
  min-height: 36px;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

html.is-web-free .studio-site-exit {
  display: inline-flex;
}

html.has-native-shell .web-library-settings {
  display: none;
}

.web-editor-site-link > .editor-navigation-external {
  transition: color 160ms ease-out;
}

.web-picker-exit:hover,
.web-picker-exit:focus-visible {
  color: var(--text);
}

.site-header {
  position: relative;
  z-index: 50;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  min-height: calc(68px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(18px, 3.2vw, 54px) 0;
  background: color-mix(in srgb, var(--editor-panel) 94%, transparent);
  backdrop-filter: blur(12px);
}

.site-brand-lockup {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  color: var(--text-dark);
  text-decoration: none;
}

.site-brand-lockup .brand-icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.site-brand-lockup > span {
  color: rgba(244, 242, 235, 0.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.product-navigation {
  display: flex;
  justify-self: center;
  align-self: stretch;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.product-navigation > a,
.header-menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  color: rgba(244, 242, 235, 0.62);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.product-navigation > a:hover,
.product-navigation > a:focus-visible,
.header-menu-trigger:hover,
.header-menu-trigger:focus-visible,
.header-tools-menu[open] .header-menu-trigger {
  color: var(--text-dark);
}

.header-tools-menu {
  position: relative;
  align-self: stretch;
}

.header-menu-trigger {
  list-style: none;
  cursor: pointer;
}

.header-menu-trigger::-webkit-details-marker {
  display: none;
}

.header-menu-trigger > small {
  color: rgba(244, 242, 235, 0.42);
  font-size: 10px;
  font-weight: 800;
}

.header-tools-menu.is-current .header-menu-trigger::after,
.header-tools-menu[open] .header-menu-trigger::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--text-dark);
  content: "";
}

.header-menu-mark {
  color: rgba(244, 242, 235, 0.42);
  font-size: 12px;
  transform: translateY(-1px);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-tools-menu[open] .header-menu-mark {
  transform: rotate(180deg) translateY(1px);
}

.header-menu-panel {
  position: fixed;
  z-index: 80;
  top: calc(68px + env(safe-area-inset-top, 0px));
  left: 50vw;
  width: min(600px, calc(100vw - 36px));
  padding: 16px 22px 20px;
  border: 1px solid rgba(244, 242, 235, 0.16);
  border-top: 0;
  background: #0b0b0a;
  color: var(--text-dark);
  text-align: left;
  text-transform: none;
  transform: translateX(-50%);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.5);
  animation: studio-header-menu-reveal 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-menu-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 0;
  border-bottom: 1px solid rgba(244, 242, 235, 0.16);
}

.header-menu-overview small {
  color: rgba(244, 242, 235, 0.42);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.header-menu-overview,
.header-menu-studio-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.015em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.header-menu-studio-section {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.16);
}

.header-menu-studio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.header-menu-studio-action {
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  font-size: 13px;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.header-menu-studio-action + .header-menu-studio-action {
  border-left: 1px solid rgba(244, 242, 235, 0.16);
}

.header-menu-studio-action:hover,
.header-menu-studio-action:focus-visible {
  background: rgba(244, 242, 235, 0.1);
}

.header-menu-studio-action small {
  color: rgba(244, 242, 235, 0.42);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.header-menu-site-section {
  min-width: 0;
}

.header-menu-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.header-menu-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 0;
  border-bottom: 1px solid rgba(244, 242, 235, 0.16);
  color: rgba(244, 242, 235, 0.62);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease-out;
}

.header-menu-category:nth-child(odd) {
  margin-right: 0;
  border-right: 0;
}

.header-menu-category > span {
  display: block;
}

.header-menu-category > strong {
  color: rgba(244, 242, 235, 0.42);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.header-menu-category:hover,
.header-menu-category:focus-visible {
  color: var(--text-dark);
}

.header-menu-category:hover > strong,
.header-menu-category:focus-visible > strong {
  color: var(--text-dark);
}

.header-menu-mobile-about {
  display: none;
  /* Same trap as the inspector header: baseline against a 50px min-height puts
     the label nineteen pixels above the middle of its own row. */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 50px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.16);
  color: rgba(244, 242, 235, 0.62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.header-menu-mobile-about small {
  color: rgba(244, 242, 235, 0.42);
  font-size: 10px;
}

.site-studio-link {
  justify-self: end;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(244, 242, 235, 0.28);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;
}

@keyframes studio-header-menu-reveal {
  from { opacity: 0; transform: translate3d(-50%, -7px, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

#smokeTestButton {
  display: none;
}

.home-wordmark {
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: center;
}

.home-wordmark > span {
  color: rgba(244, 242, 235, 0.46);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow,
.section-kicker {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.picker-topbar h1,
.picker-hero h2,
.section-heading h2,
.sheet-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
}

.picker-topbar h1 {
  font-size: clamp(19px, 4.7vw, 28px);
  font-weight: 680;
  line-height: 1;
}

.home-tabs {
  max-width: 1120px;
  margin: 0 auto;
  border: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: clamp(18px, 6vw, 28px);
}

.home-workspace-bar,
.home-workspace-actions {
  display: contents;
}

.studio-random-tool {
  display: none;
}

.home-tab {
  min-height: clamp(38px, 10vw, 54px);
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.34);
  font-family: var(--font-display);
  font-size: clamp(26px, 7.6vw, 42px);
  font-weight: 760;
  line-height: 0.92;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.home-tab.is-active {
  background: transparent;
  color: var(--text);
}

.home-settings-button {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.74);
  display: grid;
  place-items: center;
}

.home-settings-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-settings-button:active,
.home-settings-button[aria-expanded="true"] {
  color: var(--text);
}

html.is-web-free .home-workspace-bar {
  width: min(100%, 1800px);
  min-height: 72px;
  margin: 0 auto;
  padding: 12px clamp(18px, 3.2vw, 54px) 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

html.is-web-free .home-tabs {
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: clamp(18px, 3vw, 32px);
}

html.is-web-free .home-tab {
  min-height: 48px;
  color: rgba(244, 242, 235, 0.5);
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 760;
  letter-spacing: -0.035em;
}

html.is-web-free .home-tab.is-active {
  color: var(--text);
}

html.is-web-free .home-workspace-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

html.is-web-free .studio-random-tool {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(244, 242, 235, 0.2);
  background: transparent;
  color: rgba(244, 242, 235, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: border-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out;
}

html.is-web-free .studio-random-tool:hover,
html.is-web-free .studio-random-tool:focus-visible {
  border-color: rgba(244, 242, 235, 0.58);
  color: var(--text);
}

html.is-web-free .studio-random-tool[aria-busy="true"] {
  opacity: 0.54;
}

html.is-web-free .home-settings-button {
  position: static;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: rgba(244, 242, 235, 0.76);
  transition: color 160ms ease-out, background 160ms ease-out;
}

html.is-web-free .home-settings-button:hover,
html.is-web-free .home-settings-button:focus-visible,
html.is-web-free .home-settings-button[aria-expanded="true"] {
  background: rgba(244, 242, 235, 0.06);
  color: var(--text);
}

.home-settings-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--picker-bg);
  pointer-events: none;
}

.home-settings-layer:not(.is-hidden) {
  pointer-events: auto;
}

.home-settings-scrim {
  display: none;
}

.home-settings-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: none;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: var(--picker-bg);
  color: var(--text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.home-settings-panel::-webkit-scrollbar {
  display: none;
}

.home-settings-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 44px;
  padding-bottom: 4px;
  background: var(--picker-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-settings-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 11vw, 68px);
  font-weight: 760;
  line-height: 0.86;
}

.home-settings-close {
  min-width: 48px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.76);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  text-transform: uppercase;
}

.home-settings-main {
  width: min(100%, 560px);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: 24px;
}

.home-settings-actions small {
  color: rgba(244, 242, 235, 0.44);
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
  text-transform: uppercase;
}

.home-settings-actions {
  display: grid;
  gap: 1px;
}

.settings-section {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.settings-section h3 {
  margin: 0;
  color: rgba(244, 242, 235, 0.42);
  font-size: 10px;
  font-weight: 780;
  line-height: 1;
  text-transform: uppercase;
}

.settings-action-button {
  width: 100%;
  min-height: 54px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(244, 242, 235, 0.1);
  background: transparent;
  color: rgba(244, 242, 235, 0.86);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.settings-action-button span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-action-button:active {
  background: rgba(244, 242, 235, 0.08);
}

.settings-action-button.is-danger {
  color: var(--danger);
}

.settings-document {
  width: min(100%, 560px);
  min-width: 0;
  margin: 0 auto;
  border-top: 0;
  align-content: start;
  display: grid;
  gap: 16px;
}

.settings-document-back {
  width: fit-content;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  font-size: 13px;
  font-weight: 700;
}

.settings-document h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 760;
  line-height: 0.98;
}

.settings-document-body {
  display: grid;
  gap: 11px;
}

.settings-document-body p {
  margin: 0;
  color: rgba(244, 242, 235, 0.68);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.45;
}

.feedback-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.feedback-layer.is-hidden {
  display: none;
}

.feedback-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
}

.feedback-modal {
  position: relative;
  width: min(100%, 460px);
  max-height: min(86vh, 640px);
  overflow-y: auto;
  padding: 22px;
  background: #0b0b0a;
  border: 1px solid rgba(244, 242, 235, 0.14);
  display: grid;
  gap: 16px;
}

.feedback-modal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.feedback-modal-header h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 760;
  line-height: 0.98;
}

.feedback-close {
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  font-size: 13px;
  font-weight: 700;
}

.settings-feedback-form {
  display: grid;
  gap: 12px;
}

.settings-feedback-types {
  display: flex;
  gap: 8px;
}

.settings-feedback-type {
  flex: 1;
  min-height: 38px;
  border: 1px solid rgba(244, 242, 235, 0.18);
  background: transparent;
  color: rgba(244, 242, 235, 0.66);
  font-size: 13px;
  font-weight: 700;
}

.settings-feedback-type.is-active {
  border-color: rgba(244, 242, 235, 0.9);
  background: rgba(244, 242, 235, 0.94);
  color: #050505;
}

.settings-feedback-message,
.settings-feedback-email {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(244, 242, 235, 0.18);
  background: rgba(244, 242, 235, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.settings-feedback-message {
  resize: vertical;
  min-height: 120px;
}

.settings-feedback-message:focus,
.settings-feedback-email:focus {
  outline: none;
  border-color: rgba(244, 242, 235, 0.55);
}

.settings-feedback-note {
  margin: 0;
  color: rgba(244, 242, 235, 0.45);
  font-size: 12px;
  line-height: 1.4;
}

.settings-feedback-submit {
  min-height: 42px;
  border: 0;
  background: rgba(244, 242, 235, 0.94);
  color: #050505;
  font-size: 14px;
  font-weight: 760;
}

.tool-picker-content,
.project-picker-content {
  max-width: 1120px;
  margin: 0 auto;
}

html.is-web-free .tool-picker-content,
html.is-web-free .project-picker-content {
  width: min(100%, 1800px);
  max-width: none;
  padding-right: clamp(18px, 3.2vw, 54px);
  padding-left: clamp(18px, 3.2vw, 54px);
}

.tool-picker-content {
  display: block;
  min-height: auto;
  padding: 14px 0 46px;
}

.section-heading {
  margin: 0 0 12px;
}

.project-picker-content .section-heading {
  display: none;
}

.project-picker-content {
  padding-top: 16px;
}

.section-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.magazine-cover {
  position: relative;
  min-height: calc(100svh - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: 0 -14px;
  padding: 0;
  background: #050505;
  border-top: 1px solid rgba(244, 242, 235, 0.16);
  border-bottom: 1px solid rgba(244, 242, 235, 0.14);
  display: grid;
  align-items: stretch;
  overflow: hidden;
}

.cover-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(100svh - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: #090909;
  color: var(--text);
  overflow: hidden;
  cursor: pointer;
  display: block;
  isolation: isolate;
  touch-action: none;
}

.cover-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.18) 45%, rgba(5, 5, 5, 0.58) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.86) 0%, transparent 42%, rgba(5, 5, 5, 0.1) 72%);
  pointer-events: none;
}

.cover-art::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(244, 242, 235, 0.26);
  pointer-events: none;
}

.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.08);
  transform: scale(1.04);
}

.cover-art:active img {
  transform: scale(1.055);
}

.cover-issue,
.cover-index {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.cover-issue {
  top: 22px;
  left: 22px;
  padding: 5px 7px;
  background: rgba(244, 242, 235, 0.92);
  color: #050505;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.cover-index {
  right: -3px;
  bottom: -11px;
  color: rgba(244, 242, 235, 0.9);
  font-family: var(--font-display);
  font-size: clamp(112px, 39vw, 216px);
  font-weight: 820;
  line-height: 0.68;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}

.cover-copy {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 42px;
  z-index: 5;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.cover-kicker {
  color: rgba(244, 242, 235, 0.5);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.cover-copy h2 {
  max-width: 8.2ch;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(44px, 15vw, 90px);
  font-weight: 820;
  line-height: 0.82;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.58);
}

.cover-switchboard {
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 7;
  width: 30px;
  padding: 7px 0;
  display: grid;
  justify-items: end;
  gap: 6px;
  transform: translateY(-50%);
}

.cover-switchboard::before,
.cover-switchboard::after {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(244, 242, 235, 0.36);
}

.cover-switch-tick {
  width: 12px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(244, 242, 235, 0.36);
  cursor: pointer;
  transition:
    width 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.cover-switch-tick[aria-current="true"] {
  width: 30px;
  background: rgba(244, 242, 235, 0.94);
}

.cover-switch-tick:active {
  transform: translateX(-2px);
}

.cover-actions {
  width: min(280px, 72vw);
  background: #050505;
  border-top: 1px solid rgba(244, 242, 235, 0.28);
  border-bottom: 1px solid rgba(244, 242, 235, 0.28);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cover-link {
  min-height: 38px;
  color: rgba(244, 242, 235, 0.86);
  font-size: 12px;
  font-weight: 760;
}

.cover-link + .cover-link {
  border-left: 1px solid rgba(244, 242, 235, 0.16);
}

.magazine-section-heading {
  min-height: 32px;
  border-top: 1px solid rgba(244, 242, 235, 0.14);
  border-bottom: 1px solid rgba(244, 242, 235, 0.08);
  color: rgba(244, 242, 235, 0.76);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.magazine-section-heading .text-button {
  min-height: 32px;
  color: rgba(244, 242, 235, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.contents-heading {
  margin-bottom: -8px;
}

.home-archive {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.home-project-rail {
  min-width: 0;
  margin: 0 -14px;
  padding: 0 14px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(122px, 38%);
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
}

.home-project-rail::-webkit-scrollbar {
  display: none;
}

.home-project-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  scroll-snap-align: start;
  display: grid;
  gap: 6px;
}

.home-project-card:nth-child(even) {
  margin-top: 18px;
}

.home-project-thumb {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(244, 242, 235, 0.1);
  background:
    linear-gradient(rgba(244, 242, 235, 0.05) 1px, transparent 1px),
    #0b0b0b;
  background-size: 100% 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.home-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-project-thumb span {
  color: rgba(244, 242, 235, 0.42);
  font-size: 9px;
  font-weight: 700;
}

.home-project-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
}

.home-project-meta span {
  color: rgba(244, 242, 235, 0.44);
  font-size: 10px;
  font-weight: 800;
}

.home-project-meta strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(244, 242, 235, 0.82);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 10px;
  align-items: start;
  perspective: 1800px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 10px;
  padding: 4px 8px 20px;
}

.project-card {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-shell);
  background: transparent;
  color: var(--text);
  overflow: visible;
  text-align: left;
  transition:
    opacity 170ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card.is-removing {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.project-card-main {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.project-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(244, 242, 235, 0.09);
  background:
    linear-gradient(rgba(244, 242, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.035) 1px, transparent 1px),
    #0b0b0b;
  background-size: 24px 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(244, 242, 235, 0.08);
  isolation: isolate;
}

.project-thumb::before,
.project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.project-thumb::before {
  background:
    linear-gradient(rgba(244, 242, 235, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.035) 1px, transparent 1px);
  background-size: 100% 18px, 22px 100%;
  mix-blend-mode: screen;
}

.project-thumb::after {
  inset: 7px;
  border: 1px solid rgba(244, 242, 235, 0.14);
  box-shadow:
    8px 0 0 -7px rgba(244, 242, 235, 0.34) inset,
    0 -8px 0 -7px rgba(244, 242, 235, 0.22) inset;
}

.project-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-thumb span {
  position: relative;
  z-index: 3;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.project-meta {
  min-width: 0;
  padding: 7px 0 0;
  display: grid;
  gap: 0;
}

.project-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-meta span {
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(244, 242, 235, 0.46);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-meta strong {
  color: rgba(244, 242, 235, 0.9);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.project-card-actions {
  position: absolute;
  top: 42px;
  right: 6px;
  z-index: 4;
  min-width: 94px;
  padding: 4px;
  border: 1px solid rgba(244, 242, 235, 0.12);
  background: rgba(5, 5, 5, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  display: grid;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
  visibility: hidden;
}

.project-card.is-menu-open .project-card-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.project-card-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.78);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.project-card-actions button:last-child {
  color: var(--danger);
}

.project-card-actions button:active,
.project-card-actions button:focus-visible {
  background: rgba(244, 242, 235, 0.1);
}

.project-menu-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(244, 242, 235, 0.14);
  border-radius: var(--radius-ui);
  background: rgba(5, 5, 5, 0.68);
  color: rgba(244, 242, 235, 0.82);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 140ms ease,
    background-color 140ms ease;
}

.project-card:hover .project-menu-button,
.project-card.is-menu-open .project-menu-button,
.project-menu-button:focus-visible {
  opacity: 1;
}

.project-menu-button[aria-expanded="true"] {
  background: rgba(244, 242, 235, 0.92);
  color: #050505;
}

.project-empty {
  position: relative;
  min-height: min(520px, calc(100svh - 170px));
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  text-align: center;
  overflow: hidden;
}

.project-empty::before,
.project-empty::after {
  content: "";
  display: block;
  pointer-events: none;
}

.project-empty::before {
  width: min(74%, 270px);
  aspect-ratio: 0.84;
  border: 1px solid rgba(244, 242, 235, 0.16);
  background:
    linear-gradient(rgba(244, 242, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.035) 1px, transparent 1px),
    linear-gradient(105deg, transparent 32%, rgba(244, 242, 235, 0.09) 32% 58%, transparent 58%),
    #0d0d0c;
  background-size: 100% 22px, 24px 100%, 100% 100%, 100% 100%;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.project-empty::after {
  position: absolute;
  top: calc(50% - 108px);
  left: 50%;
  width: min(42%, 160px);
  aspect-ratio: 1.16;
  border: 1px solid rgba(244, 242, 235, 0.12);
  background: rgba(244, 242, 235, 0.08);
  transform: translate(-50%, -50%) rotate(-6deg);
}

.project-empty strong {
  color: rgba(244, 242, 235, 0.82);
  font-size: 15px;
  font-weight: 600;
}

.project-empty .button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 2px;
  background: rgba(244, 242, 235, 0.92);
  color: #050505;
  font-size: 13px;
  font-weight: 800;
}

.tool-card {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-shell);
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
  overflow: visible;
  display: grid;
  justify-items: center;
  isolation: isolate;
  transform-style: preserve-3d;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 0;
  width: min(88%, 190px);
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 70% 92%, rgba(0, 0, 0, 0.34), transparent 54%),
    linear-gradient(100deg, transparent 8%, rgba(0, 0, 0, 0.28) 78%, transparent);
  filter: blur(7px);
  opacity: 0.72;
  pointer-events: none;
  transform: translateX(-50%) translate(8px, 8px);
}

.tool-card:nth-child(even) {
  margin-top: 0;
}

.tool-card:nth-child(5n + 1) {
  margin-top: 0;
}

.tool-card strong,
.tool-card-status {
  display: block;
}

.tool-card-body {
  width: min(88%, 190px);
  min-width: 0;
  padding: 17px 0 0;
  display: block;
}

.tool-card strong {
  margin-bottom: 0;
  color: rgba(244, 242, 235, 0.9);
  font-size: 12.5px;
  font-weight: 720;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card.is-cover-selected strong {
  color: var(--text);
}

.tool-card.is-cover-selected .tool-card-preview {
  transform: rotateY(-1.6deg) rotateX(0.35deg) translateY(-1px);
}

.tool-card.is-cover-selected .tool-card-face {
  border-color: rgba(244, 242, 235, 0.72);
}

.tool-card-index {
  display: none;
}

.tool-card-status {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  grid-column: 2;
  line-height: 1.2;
}

.tool-card-pro {
  width: fit-content;
  margin-top: 6px;
  padding: 3px 5px 2px;
  border: 1px solid rgba(244, 242, 235, 0.28);
  color: rgba(244, 242, 235, 0.82);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.tool-card-preview {
  position: relative;
  z-index: 1;
  width: min(88%, 190px);
  --book-depth: 6px;
  aspect-ratio: 4 / 5;
  border: 0;
  background: transparent;
  overflow: visible;
  display: block;
  isolation: isolate;
  transform: rotateY(-2.4deg) rotateX(0.45deg);
  transform-origin: center center;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.tool-card:nth-child(3n) .tool-card-preview {
  aspect-ratio: 4 / 5;
}

.tool-card:nth-child(4n + 2) .tool-card-preview {
  aspect-ratio: 4 / 5;
}

.tool-card:nth-child(6n + 5) .tool-card-preview {
  aspect-ratio: 4 / 5;
}

.tool-card:nth-child(4n + 2) .tool-card-preview {
  --book-depth: 5px;
}

.tool-card:nth-child(5n + 3) .tool-card-preview {
  --book-depth: 7px;
}

.tool-card-preview::before,
.tool-card-preview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-card-preview::before {
  top: var(--book-depth);
  right: calc(var(--book-depth) * -1);
  bottom: calc(var(--book-depth) * -1);
  z-index: 0;
  width: var(--book-depth);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(244, 242, 235, 0.36) 0,
      rgba(244, 242, 235, 0.36) 1px,
      rgba(126, 123, 115, 0.42) 1px,
      rgba(126, 123, 115, 0.42) 2px
    ),
    linear-gradient(90deg, rgba(246, 244, 235, 0.78), rgba(145, 141, 130, 0.58));
  clip-path: polygon(
    0 0,
    100% var(--book-depth),
    100% 100%,
    0 calc(100% - var(--book-depth))
  );
}

.tool-card-preview::after {
  left: 0;
  right: calc(var(--book-depth) * -1);
  bottom: calc(var(--book-depth) * -1);
  z-index: 0;
  height: var(--book-depth);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(244, 242, 235, 0.32) 0,
      rgba(244, 242, 235, 0.32) 1px,
      rgba(94, 91, 84, 0.5) 1px,
      rgba(94, 91, 84, 0.5) 2px
    ),
    linear-gradient(180deg, rgba(238, 234, 220, 0.72), rgba(126, 121, 111, 0.6));
  clip-path: polygon(
    0 0,
    calc(100% - var(--book-depth)) 0,
    100% 100%,
    var(--book-depth) 100%
  );
}

.tool-card-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(244, 242, 235, 0.16);
  background: #080808;
  box-shadow:
    7px 10px 20px rgba(0, 0, 0, 0.42),
    1px 0 0 rgba(244, 242, 235, 0.24) inset,
    -1px 0 0 rgba(244, 242, 235, 0.16) inset,
    0 -1px 0 rgba(244, 242, 235, 0.12) inset;
  display: block;
  overflow: hidden;
}

.tool-card-face::before,
.tool-card-face::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-card-face::before {
  inset: 0 auto 0 0;
  z-index: 3;
  width: 16px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.42), rgba(244, 242, 235, 0.1) 44%, transparent),
    linear-gradient(90deg, rgba(244, 242, 235, 0.16), transparent 2px),
    rgba(244, 242, 235, 0.05);
  mix-blend-mode: soft-light;
}

.tool-card-face::after {
  inset: 8px;
  z-index: 4;
  border: 1px solid rgba(244, 242, 235, 0.15);
  background:
    linear-gradient(90deg, rgba(244, 242, 235, 0.13), transparent 18%, transparent 86%, rgba(244, 242, 235, 0.1)),
    linear-gradient(180deg, rgba(244, 242, 235, 0.1), transparent 18%, transparent 86%, rgba(5, 5, 5, 0.14)),
    repeating-linear-gradient(
      0deg,
      rgba(244, 242, 235, 0.028) 0,
      rgba(244, 242, 235, 0.028) 1px,
      transparent 1px,
      transparent 5px
    );
  mix-blend-mode: screen;
}

.tool-card-preview img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: cover;
  display: block;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.tool-card:active .tool-card-preview {
  transform: rotateY(-1.2deg) rotateX(0.25deg) translateY(1px);
}

.tool-card:active .tool-card-preview img {
  filter: contrast(1.08);
  transform: scale(1.015);
}

.tool-card.is-active {
  box-shadow: none;
}

.tool-card.is-active .tool-card-preview {
  transform: rotateY(-1.6deg) rotateX(0.35deg) translateY(-1px);
}

.tool-card.is-active .tool-card-face {
  border-color: rgba(244, 242, 235, 0.5);
}

.tool-card:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.tool-card[data-validation-state="invalid"] .tool-card-preview {
  opacity: 0.68;
}

.tool-card[data-validation-state="invalid"] .tool-card-face {
  border-color: var(--danger-line);
}

html.is-web-free .tool-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(54px, 6vw, 88px);
  perspective: none;
}

html.is-web-free .tool-category-section {
  min-width: 0;
  display: grid;
  gap: 24px;
}

html.is-web-free .tool-category-heading {
  min-height: 44px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.15);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

html.is-web-free .tool-category-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
}

html.is-web-free .tool-category-heading span {
  color: rgba(244, 242, 235, 0.54);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

html.is-web-free .tool-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: start;
  gap: 42px 18px;
}

html.is-web-free .tool-card {
  width: 100%;
  max-width: 220px;
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  transform-style: flat;
}

html.is-web-free .tool-card::before,
html.is-web-free .tool-card-preview::before,
html.is-web-free .tool-card-preview::after,
html.is-web-free .tool-card-face::before,
html.is-web-free .tool-card-face::after {
  content: none;
}

html.is-web-free .tool-card-open {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  text-align: left;
}

html.is-web-free .tool-card-preview,
html.is-web-free .tool-card.is-cover-selected .tool-card-preview,
html.is-web-free .tool-card.is-active .tool-card-preview,
html.is-web-free .tool-card:active .tool-card-preview {
  width: 100%;
  aspect-ratio: 4 / 5;
  transform: none;
}

html.is-web-free .tool-card-face {
  border: 1px solid rgba(244, 242, 235, 0.18);
  box-shadow: none;
  transition: border-color 160ms ease-out, filter 160ms ease-out;
}

html.is-web-free .tool-card:hover .tool-card-face,
html.is-web-free .tool-card:focus-within .tool-card-face,
html.is-web-free .tool-card.is-active .tool-card-face {
  border-color: rgba(244, 242, 235, 0.62);
  filter: brightness(1.025);
}

html.is-web-free .tool-card-open:active .tool-card-preview img {
  filter: contrast(1.04);
  transform: none;
}

html.is-web-free .tool-card-body {
  width: 100%;
  min-width: 0;
  padding: 14px 0 0;
  display: grid;
  gap: 6px;
}

html.is-web-free .tool-card strong {
  color: rgba(244, 242, 235, 0.94);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.16;
}

html.is-web-free .tool-card-meta {
  color: rgba(244, 242, 235, 0.54);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.035em;
  line-height: 1.2;
}

html.is-web-free .tool-card-actions {
  min-height: 44px;
  border-top: 1px solid rgba(244, 242, 235, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  opacity: 0.68;
  transition: opacity 160ms ease-out;
}

html.is-web-free .tool-card:hover .tool-card-actions,
html.is-web-free .tool-card:focus-within .tool-card-actions {
  opacity: 1;
}

html.is-web-free .tool-card-action {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.72);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  transition: color 160ms ease-out, opacity 160ms ease-out;
}

html.is-web-free .tool-card-action:last-child {
  text-align: right;
}

html.is-web-free .tool-card-action:hover,
html.is-web-free .tool-card-action:focus-visible {
  color: var(--text);
}

html.is-web-free .tool-card-action:disabled,
html.is-web-free .tool-card-open:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

html.is-web-free .project-empty {
  width: min(100%, 880px);
  min-height: min(520px, calc(100svh - 190px));
  margin: 0 auto;
  grid-template-columns: minmax(220px, 300px) minmax(260px, 1fr);
  place-items: center stretch;
  align-content: center;
  gap: clamp(42px, 7vw, 90px);
  overflow: visible;
  text-align: left;
}

html.is-web-free .project-empty::before,
html.is-web-free .project-empty::after {
  content: none;
}

html.is-web-free .project-empty-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(244, 242, 235, 0.18);
  background:
    linear-gradient(rgba(244, 242, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.05) 1px, transparent 1px),
    #0d0d0c;
  background-size: 24px 24px;
  overflow: hidden;
}

html.is-web-free .project-empty-art::before,
html.is-web-free .project-empty-art::after,
html.is-web-free .project-empty-art span {
  position: absolute;
  border: 1px solid rgba(244, 242, 235, 0.15);
  background: rgba(244, 242, 235, 0.055);
  content: "";
}

html.is-web-free .project-empty-art::before {
  inset: 18% 16% 37% 25%;
}

html.is-web-free .project-empty-art::after {
  inset: 42% 27% 17% 14%;
}

html.is-web-free .project-empty-art span {
  inset: 31% 10% 27% 45%;
}

html.is-web-free .project-empty-copy {
  max-width: 440px;
  display: grid;
  gap: 18px;
}

html.is-web-free .project-empty-copy strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

html.is-web-free .project-empty-copy p {
  max-width: 42ch;
  margin: 0;
  color: rgba(244, 242, 235, 0.66);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.5;
}

html.is-web-free .project-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html.is-web-free .project-empty .button {
  min-height: 44px;
  padding: 0 16px;
}

html.is-web-free .project-empty .button.secondary {
  border: 1px solid rgba(244, 242, 235, 0.22);
  background: transparent;
  color: rgba(244, 242, 235, 0.82);
}

html.is-web-free :where(
  .home-tab,
  .home-settings-button,
  .studio-random-tool,
  .tool-card-open,
  .tool-card-action,
  .home-settings-close,
  .settings-action-button,
  .project-empty .button
):focus-visible {
  outline: 2px solid rgba(244, 242, 235, 0.9);
  outline-offset: 3px;
}

html.is-web-free .home-settings-actions small,
html.is-web-free .settings-section h3 {
  color: rgba(244, 242, 235, 0.62);
}

html.is-web-free .settings-action-button:hover,
html.is-web-free .settings-action-button:focus-visible {
  background: rgba(244, 242, 235, 0.055);
}

.studio-sidebar-intro,
.studio-section-index,
.studio-catalog-header,
.home-tab-index,
.home-settings-label {
  display: none;
}

@media (min-width: 900px) {
  html.is-web-free body {
    overflow-x: hidden;
  }

  html.is-web-free .tool-picker-view {
    padding: 0;
    overflow: visible;
  }

  html.is-web-free .home-header {
    position: sticky;
    z-index: 40;
    margin: 0;
    padding: 0;
    background: #070706;
  }

  html.is-web-free .home-workspace-bar {
    position: fixed;
    z-index: 22;
    top: calc(68px + env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    width: 244px;
    min-height: 0;
    margin: 0;
    padding: 28px 20px 22px;
    border-right: 1px solid rgba(244, 242, 235, 0.14);
    background: #090908;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  html.is-web-free .studio-sidebar-intro {
    padding: 0 8px 26px;
    border-bottom: 1px solid rgba(244, 242, 235, 0.14);
    display: grid;
    gap: 5px;
  }

  html.is-web-free .studio-sidebar-intro span,
  html.is-web-free .studio-catalog-kicker {
    color: rgba(244, 242, 235, 0.46);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  html.is-web-free .studio-sidebar-intro strong {
    color: rgba(244, 242, 235, 0.88);
    font-size: 14px;
    font-weight: 680;
    line-height: 1.25;
  }

  html.is-web-free .home-tabs {
    width: 100%;
    margin: 18px 0 0;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(244, 242, 235, 0.14);
    display: grid;
    gap: 2px;
  }

  html.is-web-free .home-tab {
    width: 100%;
    min-height: 46px;
    padding: 0 8px;
    color: rgba(244, 242, 235, 0.5);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    text-align: left;
  }

  html.is-web-free .home-tab:hover,
  html.is-web-free .home-tab:focus-visible {
    color: rgba(244, 242, 235, 0.8);
  }

  html.is-web-free .home-tab.is-active {
    background: rgba(244, 242, 235, 0.08);
    color: var(--text);
  }

  html.is-web-free .home-tab-index {
    color: rgba(244, 242, 235, 0.36);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline;
  }

  html.is-web-free .home-tab.is-active .home-tab-index {
    color: rgba(244, 242, 235, 0.7);
  }

  html.is-web-free .studio-section-index {
    margin-top: 18px;
    padding: 0 8px;
    display: grid;
  }

  html.is-web-free .tool-picker-view.is-library-active .studio-section-index {
    display: none;
  }

  html.is-web-free .studio-section-index a {
    min-height: 34px;
    border-bottom: 1px solid rgba(244, 242, 235, 0.075);
    color: rgba(244, 242, 235, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    font-weight: 620;
    text-decoration: none;
  }

  html.is-web-free .studio-section-index a:hover,
  html.is-web-free .studio-section-index a:focus-visible {
    color: var(--text);
  }

  html.is-web-free .studio-section-index small {
    color: rgba(244, 242, 235, 0.34);
    font-size: 10px;
    font-weight: 760;
  }

  html.is-web-free .home-workspace-actions {
    width: 100%;
    margin-top: auto;
    display: grid;
    gap: 8px;
  }

  html.is-web-free .studio-random-tool {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
  }

  html.is-web-free .home-settings-button {
    position: static;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  html.is-web-free .home-settings-button svg {
    width: 17px;
    height: 17px;
  }

  html.is-web-free .home-settings-label {
    font-size: 12px;
    font-weight: 720;
    display: inline;
  }

  html.is-web-free .tool-picker-content,
  html.is-web-free .project-picker-content {
    width: auto;
    max-width: none;
    min-height: calc(100svh - 68px);
    margin: 0 0 0 244px;
    padding: clamp(38px, 4vw, 64px) clamp(32px, 4.2vw, 72px) 110px;
  }

  html.is-web-free .studio-catalog-header {
    margin-bottom: clamp(44px, 5vw, 72px);
    padding-bottom: clamp(28px, 3vw, 42px);
    border-bottom: 1px solid rgba(244, 242, 235, 0.16);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
    align-items: end;
    gap: clamp(36px, 7vw, 120px);
  }

  html.is-web-free .studio-catalog-header > div {
    display: grid;
    gap: 12px;
  }

  html.is-web-free .studio-catalog-header h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(46px, 5vw, 74px);
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 0.92;
  }

  html.is-web-free .studio-catalog-header p,
  html.is-web-free .project-picker-content .section-heading p {
    max-width: 52ch;
    margin: 0;
    color: rgba(244, 242, 235, 0.58);
    font-size: 14px;
    font-weight: 520;
    line-height: 1.55;
  }

  html.is-web-free .tool-list {
    gap: clamp(48px, 5vw, 72px);
  }

  html.is-web-free .tool-category-section {
    scroll-margin-top: 104px;
    gap: 18px;
  }

  html.is-web-free .tool-category-heading {
    min-height: 36px;
    padding-bottom: 10px;
  }

  html.is-web-free .tool-category-heading h2 {
    font-size: clamp(19px, 1.65vw, 24px);
    letter-spacing: -0.025em;
  }

  html.is-web-free .tool-category-heading span {
    font-size: 10px;
  }

  html.is-web-free .tool-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    justify-items: start;
    gap: clamp(30px, 3vw, 46px) clamp(16px, 2vw, 26px);
  }

  html.is-web-free .tool-card {
    position: relative;
    max-width: 210px;
    gap: 0;
  }

  html.is-web-free .tool-card-body {
    padding-top: 12px;
    gap: 5px;
  }

  html.is-web-free .tool-card strong {
    font-size: 15px;
    font-weight: 690;
  }

  html.is-web-free .tool-card-meta {
    font-size: 10px;
  }

  html.is-web-free .tool-card-actions {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    min-height: 0;
    border: 0;
    display: block;
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  html.is-web-free .tool-card:hover .tool-card-actions,
  html.is-web-free .tool-card:focus-within .tool-card-actions {
    opacity: 1;
  }

  html.is-web-free .tool-card-open-action {
    display: none;
  }

  html.is-web-free .tool-card-random-action {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(244, 242, 235, 0.3);
    background: rgba(7, 7, 6, 0.9);
    color: rgba(244, 242, 235, 0.86);
    font-size: 10px;
    text-align: center;
  }

  html.is-web-free .project-picker-content .section-heading {
    margin: 0 0 clamp(38px, 4vw, 58px);
    padding-bottom: clamp(28px, 3vw, 42px);
    border-bottom: 1px solid rgba(244, 242, 235, 0.16);
    display: flex;
    align-items: end;
  }

  html.is-web-free .project-picker-content .section-heading > div {
    display: grid;
    gap: 10px;
  }

  html.is-web-free .project-picker-content .section-heading h2 {
    font-size: clamp(42px, 4.8vw, 68px);
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 0.94;
  }

  html.is-web-free .project-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 40px 24px;
    padding: 0 0 28px;
  }

  html.is-web-free .project-card {
    max-width: 240px;
    border-radius: 0;
    transform: none;
  }

  html.is-web-free .project-thumb {
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(244, 242, 235, 0.18);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  html.is-web-free .project-thumb::before,
  html.is-web-free .project-thumb::after {
    content: none;
  }

  html.is-web-free .project-empty {
    min-height: calc(100svh - 290px);
  }
}

@media (min-width: 720px) and (max-width: 899px) {
  html.is-web-free .tool-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 22px;
  }
}

@media (min-width: 900px) {
  html.is-web-free .home-settings-layer {
    background: rgba(5, 5, 5, 0.52);
  }

  html.is-web-free .home-settings-scrim {
    position: absolute;
    inset: 0;
    display: block;
    border: 0;
    background: transparent;
  }

  html.is-web-free .home-settings-panel {
    inset: 0 0 0 auto;
    width: min(480px, calc(100vw - 48px));
    padding: 24px 30px 36px;
    border-left: 1px solid rgba(244, 242, 235, 0.16);
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.34);
  }

  html.is-web-free .home-settings-heading h2 {
    font-size: 36px;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  html.is-web-free .home-settings-close {
    min-width: 52px;
    min-height: 44px;
  }

  html.is-web-free .home-settings-main,
  html.is-web-free .settings-document {
    width: 100%;
  }
}

@media (max-width: 620px) {
  html.is-web-free .home-workspace-bar {
    min-height: 64px;
    padding: 8px 14px;
    gap: 12px;
  }

  html.is-web-free .home-tabs {
    gap: 16px;
  }

  html.is-web-free .home-tab {
    min-height: 44px;
    font-size: 24px;
  }

  html.is-web-free .studio-random-tool {
    gap: 10px;
    padding: 0 10px;
    font-size: 11px;
  }

  html.is-web-free .tool-picker-content,
  html.is-web-free .project-picker-content {
    padding-right: 14px;
    padding-left: 14px;
  }

  html.is-web-free .tool-category-section {
    gap: 18px;
  }

  html.is-web-free .tool-category-grid {
    gap: 34px 15px;
  }

  html.is-web-free .tool-card strong {
    font-size: 13px;
  }

  html.is-web-free .tool-card-meta,
  html.is-web-free .tool-card-action {
    font-size: 11px;
  }

  html.is-web-free .project-empty {
    min-height: calc(100svh - 180px);
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  html.is-web-free .project-empty-art {
    width: min(62vw, 210px);
    justify-self: center;
  }

  html.is-web-free .project-empty-copy {
    justify-items: center;
  }

  html.is-web-free .project-empty-copy p {
    font-size: 14px;
  }

  html.is-web-free .project-empty-actions {
    justify-content: center;
  }
}

@media (hover: none) {
  html.is-web-free .tool-card-actions {
    opacity: 1;
  }
}

@media (min-width: 720px) {
  .magazine-cover {
    min-height: calc(100svh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .cover-art {
    min-height: calc(100svh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .cover-copy {
    left: 24px;
    right: 24px;
    bottom: 42px;
  }

  .cover-copy h2 {
    max-width: 8ch;
  }

  .home-project-rail {
    grid-auto-columns: minmax(150px, 20%);
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .tool-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .project-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
    padding-inline: 4px;
  }
}

@media (min-width: 1040px) {
  .tool-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .cover-copy h2 {
    font-size: 104px;
  }
}

@media (hover: none) {
  .project-menu-button {
    opacity: 0.72;
  }
}

.editor-view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  --bottom-panel-height: calc(var(--sheet-peek) + var(--dock-height) + env(safe-area-inset-bottom, 0px));
  --stage-preview-height: 60dvh;
  --web-inspector-width: 360px;
  background: var(--editor-bg);
  color: var(--text-dark);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  overscroll-behavior: none;
}

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

.editor-topbar {
  display: grid;
  /* Was symmetric, which left the tools menu alone in the middle with about
   * 650px of empty space on either side while the brand mark used 44px of a
   * 700px column. The mark and the menu both answer "which tool am I in", so
   * they sit together; actions keep the far edge.
   */
  grid-template-columns: auto auto minmax(280px, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: center;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(18px, 3.2vw, 54px) 0;
  background: color-mix(in srgb, var(--editor-panel) 94%, transparent);
  border-bottom: 1px solid var(--line-dark);
  backdrop-filter: blur(12px);
  z-index: 30;
}

html.is-web-free .web-editor-brand-lockup {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-self: start;
  min-width: 0;
  color: var(--text-dark);
  text-decoration: none;
}

html.is-web-free .editor-topbar {
  z-index: 1000;
  isolation: isolate;
}

html.is-web-free .editor-topbar .header-menu-panel {
  z-index: 1001;
}

html.is-web-free .editor-view::before {
  content: none;
}

.editor-tool-rail {
  display: none;
}

.header-menu-backdrop {
  position: fixed;
  z-index: 29;
  inset: calc(68px + env(safe-area-inset-top, 0px)) 0 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.32);
  cursor: default;
}

html.is-web-free.is-editor-active .header-menu-backdrop {
  z-index: 900;
}

.header-menu-backdrop[hidden] {
  display: none;
}

html.is-web-free.has-header-menu-open .tool-frame.is-live-preview-surface {
  visibility: hidden;
  opacity: 0;
}

html.is-web-free .editor-primary-navigation > a,
html.is-web-free .header-menu-trigger > [data-header-tool-count] {
  display: none;
}

.editor-primary-navigation {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-self: center;
  gap: clamp(28px, 3vw, 48px);
  min-width: 0;
}

.editor-navigation-item {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease-out;
}

.editor-navigation-item:hover,
.editor-navigation-item:focus-visible {
  color: var(--text-dark);
}

.editor-navigation-back {
  display: none;
}

html.is-web-free .web-editor-site-link {
  display: inline-flex;
}

.editor-current-tool {
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding-right: clamp(14px, 1.5vw, 20px);
  border-right: 1px solid rgba(244, 242, 235, 0.14);
  color: rgba(244, 242, 235, 0.78);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.025em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease-out;
}

html.is-web-free .web-editor-site-link {
  min-height: 44px;
}

html.is-web-free .editor-current-tool {
  padding-right: 0;
  border-right: 0;
}

.editor-current-tool:hover,
.editor-current-tool:focus-visible {
  color: var(--text-dark);
}

.editor-navigation-external {
  color: rgba(244, 242, 235, 0.54);
  font-size: 12px;
  font-weight: 800;
  transition: color 160ms ease-out;
}

.web-editor-site-link:hover .editor-navigation-external,
.web-editor-site-link:focus-visible .editor-navigation-external {
  color: currentColor;
}

html.is-studio-exiting [data-web-studio-exit] {
  cursor: progress;
  opacity: 0.46;
  pointer-events: none;
}

html.has-native-shell .editor-view {
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: calc(58px + env(safe-area-inset-top, 0px));
}

html.has-native-shell .editor-topbar {
  display: none;
}

.web-editor-site-link #webEditorToolName {
  max-width: clamp(140px, 24vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-project-title {
  display: none;
}

/* Sixty-four per cent of this bar was empty while the name of the thing being
   edited sat in it switched off. Everything else up here is chrome — small,
   uppercase, letterspaced, deliberately quiet. The name is not chrome, so it
   does not dress like it: normal case, a little larger, and the brightest text
   in the bar, because it is the one part answering "where am I". */
html.is-web-free .editor-project-title {
  display: block;
  order: -1;
  margin-right: auto;
  overflow: hidden;
  max-width: min(38ch, 34vw);
  color: rgba(244, 242, 235, 0.82);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Both Studio bars are the same shape now: who you are and where you are on
   the left, what you can do here on the right, ending in the one filled
   control this view exists for — Surprise me in the picker, Export in the
   editor. The picker used to carry the inverse: three ways out of the product
   and no way to act, with its actions parked at the foot of a sidebar. */
.picker-topbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: center;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(18px, 3.2vw, 54px) 0;
  border-bottom: 1px solid var(--line-dark);
}

/* No order or auto margin here: in the editor the title lives inside the
   actions cluster and has to claw its way left, but here it is a grid child
   already sitting in its own column between the mark and the actions. */
html.is-web-free .picker-topbar .editor-project-title.picker-context {
  display: block;
  order: 0;
  margin-right: 0;
  color: rgba(244, 242, 235, 0.62);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Leaving is available, not advertised: a line of text under the sidebar
   actions rather than the loudest control on the screen. */
html.is-web-free .studio-site-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: rgba(244, 242, 235, 0.48);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}

html.is-web-free .studio-site-exit:hover,
html.is-web-free .studio-site-exit:focus-visible {
  color: var(--text-dark);
}

.editor-ios-link {
  display: none;
}

/* Quiet on purpose. Export is the filled control and the only one; this sits
   in the same row asking for a different kind of attention, so it stays a
   ghost — a border and a word — and never competes for the eye that is
   looking for the finish line. */
html.is-web-free .editor-ios-link:not([hidden]) {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: rgba(244, 242, 235, 0.62);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}

html.is-web-free .editor-ios-link:hover,
html.is-web-free .editor-ios-link:focus-visible {
  border-color: var(--line-strong);
  color: var(--text-dark);
}

.editor-ios-mark {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Below this the bar has no room for a second word, and a phone is already
   what the reader is holding. */
@media (max-width: 1240px) {
  html.is-web-free .editor-ios-link:not([hidden]) {
    display: none;
  }
}

.editor-export-button {
  display: none;
}

/* The one filled control in the bar. Everything else up here is an outline or
   a bare icon, so weight alone says which of them is the finish line — no
   colour needed in a palette that has none. */
html.is-web-free .editor-export-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

html.is-web-free .editor-export-button:hover:not(:disabled),
html.is-web-free .editor-export-button:focus-visible:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* Nothing to export yet reads as a quiet outline rather than a dimmed slab,
   so the bar does not carry a large grey rectangle for most of a session. */
html.is-web-free .editor-export-button:disabled {
  border-color: var(--line-dark);
  background: transparent;
  color: rgba(244, 242, 235, 0.34);
  cursor: not-allowed;
}

/* One export per screen. The panel keeps its own where the bar has no room
   for it. */
@media (min-width: 1101px) {
  html.is-web-free .output-confirmation {
    display: none;
  }
}

@media (max-width: 1100px) {
  html.is-web-free .editor-export-button {
    display: none;
  }
}

/* Below this the bar is already carrying twelve controls; the canvas says
   which tool it is far better than a truncated name would. */
@media (max-width: 1100px) {
  html.is-web-free .editor-project-title {
    display: none;
  }
}

.editor-save-status {
  display: none;
}

html.is-web-free .editor-save-status {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: rgba(244, 242, 235, 0.58);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

html.is-web-free .editor-save-status[data-state="idle"],
html.is-web-free .editor-save-status[data-state="saved"] {
  display: none;
}

html.is-web-free .editor-save-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  content: "";
}

html.is-web-free .editor-save-status[data-state="saving"]::before {
  animation: studio-save-pulse 900ms ease-in-out infinite alternate;
}

html.is-web-free .editor-save-status[data-state="saved"]::before {
  background: currentColor;
}

html.is-web-free .editor-save-status[data-state="failed"] {
  color: var(--danger);
}

.editor-save-message {
  display: none;
}

.editor-save-status[data-state="idle"] .editor-save-message-idle,
.editor-save-status[data-state="saving"] .editor-save-message-saving,
.editor-save-status[data-state="saved"] .editor-save-message-saved,
.editor-save-status[data-state="failed"] .editor-save-message-failed,
.editor-save-status[data-state="unsaved"] .editor-save-message-unsaved {
  display: inline;
}

.editor-save-recovery {
  align-items: center;
  gap: 8px;
  margin-left: 2px;
}

.editor-save-recovery:not([hidden]) {
  display: inline-flex;
}

.editor-save-recovery button {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
}

@keyframes studio-save-pulse {
  from { opacity: 0.34; }
  to { opacity: 1; }
}

.sheet-heading span {
  color: var(--muted-dark);
  font-size: 11px;
  font-weight: 500;
}

.editor-runtime-status {
  display: none;
}

.editor-runtime-status.is-visible {
  display: block;
  max-width: 160px;
  overflow: hidden;
  color: rgba(244, 242, 235, 0.46);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.icon-button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}

.history-actions {
  position: relative;
  /* Two 44px targets need 88. At 84 the pair overlapped by four pixels, and
     since redo is painted last, the right edge of undo performed a redo. */
  width: 88px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0;
}

.editor-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.4vw, 20px);
}

.editor-capability-actions {
  display: none;
  /* Stretching 36px buttons to a fixed 44px box left their contents optically
     four pixels above everything else in the row. The group takes the height
     of what is in it. */
  align-items: center;
  border-left: 1px solid rgba(244, 242, 235, 0.14);
}

html.is-web-free .editor-capability-actions {
  display: flex;
}

html.is-web-free .editor-view.is-awaiting-start .editor-bottom {
  opacity: 0.28;
  transition: opacity 160ms ease-out;
}

.editor-capability-actions[hidden] {
  display: none !important;
}

/* The divider belongs between two of these, and most of the time there is only
   one — the motion toggle hides for tools that do not animate. :last-child
   cannot see that, because a hidden button is still the last child, so the
   rule keys off the attribute that does the hiding. */
.editor-capability-button:last-child,
.editor-capability-button:has(~ .editor-capability-button[hidden]) {
  border-right: 0;
}

.editor-capability-button {
  /* Was 44 tall beside a 36 tall Projects and Export. The icon buttons keep 44
     because a bare icon needs the target; a button with a word in it does not. */
  min-width: 82px;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid rgba(244, 242, 235, 0.14);
  border-radius: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.editor-capability-button:hover,
.editor-capability-button:focus-visible {
  color: var(--text-dark);
}

.editor-capability-button:active {
  transform: none;
}

.editor-capability-button[hidden] {
  display: none;
}

.editor-random-mark {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

/* Matches the undo/redo pair: same box, same stroke, same joins. The random
   mark used to be the character ↝, which SF Pro does not carry — every
   platform drew it from whatever fallback it happened to have — and the motion
   mark was a 7px bordered square, which is a shape rather than an icon. */
.editor-capability-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* The triangle reads as a triangle, not an outline of one. */
.editor-motion-mark .editor-motion-play {
  fill: currentColor;
  stroke: none;
}

/* Pressed means motion is running, so the button offers the way to stop it. */
.editor-capability-button .editor-motion-pause,
.editor-capability-button[aria-pressed="true"] .editor-motion-play {
  display: none;
}

.editor-capability-button[aria-pressed="true"] .editor-motion-pause {
  display: block;
}

.editor-capability-button.is-active {
  background: rgba(244, 242, 235, 0.09);
  color: var(--text-dark);
}



.editor-capability-button[aria-busy="true"] .editor-random-mark {
  animation: editor-random-busy 720ms steps(4, end) infinite;
}

@keyframes editor-random-busy {
  to {
    rotate: 1turn;
  }
}

.history-actions .icon-button {
  position: absolute;
  top: 0;
  color: rgba(244, 242, 235, 0.68);
}

.history-actions .icon-button:disabled {
  color: rgba(244, 242, 235, 0.34);
  opacity: 1;
}

.history-actions .icon-button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

#undoButton {
  left: 0;
}

#redoButton {
  left: 44px;
}

.editor-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0 0 var(--bottom-panel-height);
  background:
    linear-gradient(rgba(244, 242, 235, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, #141414 0%, #0b0b0b 48%, #050505 100%);
  background-size:
    36px 36px,
    36px 36px,
    auto;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

html.is-web-free .editor-stage {
  background: linear-gradient(180deg, #111 0%, #090909 54%, #050505 100%);
}

#previewCanvas,
.editor-comparison-canvas {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: auto;
  max-width: min(calc(100% - clamp(12px, 4vw, 44px)), 760px);
  max-height: var(--stage-preview-height);
  border: 1px solid rgba(244, 242, 235, 0.16);
  border-radius: 0;
  background:
    linear-gradient(45deg, #202020 25%, transparent 25%),
    linear-gradient(-45deg, #202020 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #202020 75%),
    linear-gradient(-45deg, transparent 75%, #202020 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.62),
    0 24px 72px rgba(0, 0, 0, 0.46);
}

html.is-web-free #previewCanvas,
html.is-web-free .editor-comparison-canvas {
  border-color: rgba(244, 242, 235, 0.09);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.editor-comparison-canvas {
  z-index: 3;
  pointer-events: none;
}

.editor-comparison-canvas[hidden] {
  display: none;
}

.editor-canvas-tools {
  position: absolute;
  z-index: 6;
  left: 22px;
  bottom: calc(var(--bottom-panel-height) + 20px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-compare-toggle {
  position: static;
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.86);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92), 0 0 1px rgba(0, 0, 0, 0.96);
  transition: box-shadow 160ms ease-out, color 160ms ease-out;
}

html.is-web-free .editor-compare-toggle {
  min-height: 44px;
  padding-inline: 8px;
}

.editor-compare-toggle kbd {
  color: rgba(244, 242, 235, 0.42);
  font: inherit;
  font-size: 10px;
}

.editor-compare-toggle[aria-pressed="true"] {
  background: transparent;
  color: rgba(244, 242, 235, 0.96);
  box-shadow: inset 0 -1px 0 currentColor;
}

.editor-compare-toggle[aria-pressed="true"] kbd {
  color: rgba(244, 242, 235, 0.52);
}

.editor-compare-toggle[hidden],
html.has-native-shell .editor-compare-toggle {
  display: none;
}

#previewCanvas.is-empty-start {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.live-preview-toggle {
  position: absolute;
  z-index: 5;
  min-width: 66px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(244, 242, 235, 0.32);
  border-radius: 0;
  background: rgba(5, 5, 5, 0.72);
  color: rgba(244, 242, 235, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(0, 0, 0, 0.34);
  opacity: 0.92;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.live-preview-toggle.is-hidden {
  display: none;
}

html.has-native-shell .live-preview-toggle {
  display: none;
}

html.is-web-free .live-preview-toggle {
  display: none;
}

.live-preview-toggle.is-active {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 1;
}

.live-preview-mark {
  width: 6px;
  height: 6px;
  background: currentColor;
  display: block;
}

.live-preview-toggle.is-active .live-preview-mark {
  animation: live-preview-pulse 960ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes live-preview-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  54% {
    opacity: 0.42;
    transform: scale(0.72);
  }
}

.pixel-stretch-overlay {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  touch-action: none;
}

.pixel-stretch-overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: auto;
  touch-action: none;
}

.pixel-stretch-region {
  fill: rgba(244, 242, 235, 0.035);
  vector-effect: non-scaling-stroke;
}

.pixel-stretch-region-output {
  stroke: rgba(244, 242, 235, 0.72);
  stroke-width: 0.62;
  stroke-dasharray: none;
}


.pixel-stretch-region.is-active {
  stroke: rgba(255, 255, 255, 0.98);
  stroke-dasharray: none;
}

.pixel-stretch-region-hit-area {
  fill: transparent;
  stroke: transparent;
}

.pixel-stretch-region-hit-area.is-active {
  stroke: transparent;
}

.pixel-stretch-region-path {
  fill: rgba(244, 242, 235, 0.08);
  stroke-width: 0.82;
  stroke-dasharray: none;
}

.pixel-stretch-path-end {
  fill: rgba(5, 5, 5, 0.92);
  stroke: rgba(244, 242, 235, 0.96);
  stroke-width: 0.38;
}

.pixel-stretch-handle {
  fill: rgba(244, 242, 235, 0.96);
  stroke: rgba(5, 5, 5, 0.88);
  stroke-width: 0.32;
  vector-effect: non-scaling-stroke;
}

.pixel-stretch-sample-line {
  stroke: rgba(244, 242, 235, 0.7);
  stroke-width: 0.8;
  stroke-dasharray: 1.4 1.1;
  vector-effect: non-scaling-stroke;
}

.pixel-stretch-sample-line-layer {
  stroke: #ff6a3d;
  stroke-width: 1.25;
  stroke-dasharray: none;
}

.pixel-stretch-sample-line.is-active {
  stroke: #ff6a3d;
  stroke-width: 1.1;
  stroke-dasharray: none;
}

.pixel-stretch-sample-handle {
  fill: #050505;
  stroke: #ff6a3d;
  stroke-width: 0.42;
  vector-effect: non-scaling-stroke;
}


.pixel-stretch-flow-path {
  fill: none;
  stroke: #ff6a3d;
  stroke-width: 0.78;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


.pixel-stretch-flow-node {
  fill: #ff6a3d;
  stroke: rgba(5, 5, 5, 0.9);
  stroke-width: 0.34;
  vector-effect: non-scaling-stroke;
}

.pixel-stretch-flow-node.is-anchor {
  fill: rgba(244, 242, 235, 0.88);
}

.pixel-stretch-flow-node.is-active {
  fill: #050505;
  stroke: #ff6a3d;
  stroke-width: 0.58;
}



.pixel-layer-more {
  display: grid;
  gap: 8px;
}

.pixel-layer-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.5);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.pixel-layer-more-toggle:hover {
  color: var(--text);
}

.pixel-layer-more-chevron {
  font-size: 11px;
  line-height: 1;
  opacity: 0.7;
}











.subject-object-overlay {
  position: absolute;
  z-index: 4;
  pointer-events: auto;
  touch-action: none;
}

/* The kaleidoscope viewfinder: a floating source thumbnail carrying the
 * draggable sample frame, pinned to the stage corner so the tiled result and
 * the framing stay visible together.
 */
.kaleido-viewfinder {
  /* Fixed at body level beside the live-preview iframe surface (also a
   * body-level fixed layer, z 4): only there can it reliably paint above the
   * surface. The module positions it against the editor stage rect on every
   * update.
   */
  position: fixed;
  z-index: 30;
  width: min(220px, 34vw);
  border: 1px solid rgba(244, 242, 235, 0.2);
  background: rgba(10, 10, 10, 0.86);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  touch-action: none;
}

.kaleido-viewfinder-stage {
  position: relative;
  overflow: hidden;
  background: #2a2a28;
  cursor: crosshair;
}

.kaleido-viewfinder.is-collapsed .kaleido-viewfinder-stage {
  display: none;
}

.kaleido-viewfinder-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.kaleido-viewfinder-frame {
  position: absolute;
  border: 1.5px solid #6ea8ff;
  /* The fill marks what actually feeds the pattern: the whole square in
   * mirror mode.
   */
  background: rgba(110, 168, 255, 0.22);
  cursor: move;
}

/* In kaleido mode only the triangle above the main diagonal is sampled, so
 * only it carries the fill; the unsampled half stays near-clear.
 */
.kaleido-viewfinder-frame.is-kaleido {
  background: linear-gradient(to bottom left, rgba(110, 168, 255, 0.3) 50%, rgba(110, 168, 255, 0.04) 50%);
}

/* The kaleidoscope fold is `f.y > f.x`, which is the diagonal from the frame's
   top-left corner to its bottom-right one. A gradient's stops run at a right
   angle to its axis, so `to bottom right` drew the other diagonal — the line
   sat perpendicular to the fold it was describing, and anything framed against
   it landed on the wrong side. Drawn as a corner-to-corner line instead of a
   gradient, so there is no axis to get backwards.

   The half below the line is shaded because the shader never reads it: with
   the kaleidoscope fold, one right triangle paints the tile eight ways, and
   only the triangle above the line is the one it reads. */
.kaleido-viewfinder-diagonal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kaleido-viewfinder-diagonal::before {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.5);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  content: "";
}

/* The radial and hexagonal folds read a wedge out of the middle of the frame
   instead of a corner of it, so the shading is a conic sweep from the centre
   and the line is the wedge's two edges. Same element, different geometry. */
.kaleido-viewfinder-frame[data-sample-shape="sector"] .kaleido-viewfinder-diagonal::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent var(--kaleido-sector, 0deg),
    rgba(6, 10, 20, 0.5) var(--kaleido-sector, 0deg)
  );
  clip-path: none;
}

.kaleido-viewfinder-frame[data-sample-shape="sector"] .kaleido-viewfinder-diagonal::after {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 1.5px;
  transform: rotate(var(--kaleido-sector, 0deg));
}

.kaleido-viewfinder-diagonal::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 141.5%;
  height: 1.5px;
  transform-origin: 0 0;
  transform: rotate(45deg);
  background: #6ea8ff;
  opacity: 0.75;
  content: "";
}

.kaleido-viewfinder-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid #6ea8ff;
  background: #0c0c0c;
}

.kaleido-viewfinder-resize {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.kaleido-viewfinder-rotate {
  top: -22px;
  left: 50%;
  margin-left: -7px;
  border-radius: 50%;
  cursor: grab;
}

.kaleido-viewfinder.is-dragging .kaleido-viewfinder-rotate {
  cursor: grabbing;
}

.kaleido-viewfinder-toggle {
  display: block;
  width: 100%;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  cursor: pointer;
}

.kaleido-viewfinder-toggle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg) translate(-1px, -1px);
}

.kaleido-viewfinder.is-collapsed .kaleido-viewfinder-toggle::before {
  transform: rotate(45deg) translate(-2px, -2px);
}

.subject-object-frame {
  position: absolute;
  border: 1px solid rgba(244, 242, 235, 0.56);
  background: rgba(244, 242, 235, 0.045);
  contain: layout style;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
  will-change: transform;
  box-shadow:
    inset 0 0 0 1px rgba(5, 5, 5, 0.68),
    0 10px 28px rgba(0, 0, 0, 0.18);
  touch-action: none;
  user-select: none;
}

.subject-object-frame.is-active {
  border-color: rgba(244, 242, 235, 0.96);
  background: rgba(244, 242, 235, 0.075);
  box-shadow:
    inset 0 0 0 1px rgba(5, 5, 5, 0.86),
    0 0 0 1px rgba(244, 242, 235, 0.28),
    0 16px 34px rgba(0, 0, 0, 0.24);
}

.subject-object-overlay.is-dragging .subject-object-frame {
  background: transparent;
  box-shadow: none;
}

.subject-object-frame.is-dragging {
  visibility: hidden;
  background: transparent;
  box-shadow: none;
}

.subject-object-frame.is-dragging .subject-object-label {
  opacity: 0;
}

.subject-object-frame.is-drag-source-hidden {
  visibility: hidden;
}

.subject-object-overlay.is-dragging .subject-object-control {
  display: none;
}

.subject-object-frame:not(.is-active) .subject-object-control {
  display: none;
}

.subject-object-drag-preview {
  position: absolute;
  border: 1px solid rgba(244, 242, 235, 0.96);
  background: transparent;
  contain: layout style paint;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
  will-change: transform;
}

.subject-object-drag-preview::before,
.subject-object-drag-preview::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: rgba(244, 242, 235, 0.96);
}

.subject-object-drag-preview::before {
  left: -1px;
  top: -1px;
}

.subject-object-drag-preview::after {
  right: -1px;
  bottom: -1px;
}

.subject-object-label {
  position: absolute;
  left: -1px;
  top: -21px;
  min-width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 242, 235, 0.2);
  background: rgba(5, 5, 5, 0.78);
  color: rgba(244, 242, 235, 0.78);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.subject-object-frame.is-active .subject-object-label {
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  background: rgba(244, 242, 235, 0.94);
  color: #050505;
}

.subject-object-control {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  z-index: 2;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.subject-object-control::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(244, 242, 235, 0.24);
  background: rgba(5, 5, 5, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(5, 5, 5, 0.92),
    0 8px 18px rgba(0, 0, 0, 0.22);
  transform-origin: center;
  transition: transform 140ms ease, opacity 140ms ease, background-color 140ms ease;
  z-index: 0;
}

.subject-object-control::before {
  content: none;
}

.subject-object-control:focus-visible {
  outline: 2px solid rgba(244, 242, 235, 0.9);
  outline-offset: -4px;
}

.subject-object-control:active::after {
  transform: scale(0.94);
  opacity: 0.9;
}

.subject-object-delete {
  left: -19px;
  top: -19px;
}

.subject-object-delete::before {
  content: none;
}

.subject-object-delete::after {
  background: rgba(244, 242, 235, 0.96);
  border-color: rgba(5, 5, 5, 0.88);
}

.subject-object-handle {
  touch-action: none;
  color: #050505;
}

.subject-object-handle::after {
  background: rgba(244, 242, 235, 0.96);
  border-color: rgba(5, 5, 5, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(244, 242, 235, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.subject-object-handle-se {
  right: -19px;
  bottom: -19px;
  cursor: nwse-resize;
}

.subject-object-handle-se::before {
  content: none;
}

.subject-object-control-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.subject-object-delete-icon::before,
.subject-object-delete-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 12px;
  height: 2px;
  background: #050505;
  transform-origin: center;
}

.subject-object-delete-icon::before {
  transform: rotate(45deg);
}

.subject-object-delete-icon::after {
  transform: rotate(-45deg);
}

.subject-object-resize-icon::before,
.subject-object-resize-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  background: #050505;
}

.subject-object-resize-icon::before {
  width: 14px;
  height: 3px;
}

.subject-object-resize-icon::after {
  width: 3px;
  height: 14px;
}

.subject-object-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 10px;
  border: 1px solid rgba(244, 242, 235, 0.14);
  background: rgba(5, 5, 5, 0.62);
  color: rgba(244, 242, 235, 0.62);
  font-size: 11px;
  font-weight: 680;
  line-height: 1;
  pointer-events: none;
}





.pixel-layer-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.pixel-layer-switcher {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.1);
}

.pixel-layer-switcher-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.pixel-layer-switcher-header strong {
  color: rgba(244, 242, 235, 0.96);
  font-size: 12px;
  font-weight: 780;
}

.pixel-layer-switcher-header span {
  min-width: 0;
  color: rgba(244, 242, 235, 0.4);
  font-size: 10px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixel-layer-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.pixel-layer-track::-webkit-scrollbar {
  display: none;
}

.pixel-layer-switch-card {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--line);
  background: rgba(244, 242, 235, 0.04);
  color: var(--text);
}

.pixel-layer-switch-card.is-active {
  border-color: var(--line-strong);
  background: var(--accent);
  color: var(--accent-ink);
}

.pixel-layer-switch-card.is-hidden-layer .pixel-layer-switch-select {
  opacity: 0.38;
}

.pixel-layer-switch-card--add {
  gap: 6px;
  padding: 0 12px;
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.pixel-layer-switch-card--add:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.pixel-layer-switch-plus {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.pixel-layer-switch-select {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  border: 0;
  padding: 0 4px 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The thumbnail is drawn in currentColor so it inverts with the card: light
   marks on the dark resting card, dark marks on the selected one. */
.pixel-layer-thumb {
  flex: 0 0 auto;
  width: 26px;
  height: 32px;
  overflow: visible;
}

.pixel-layer-thumb-frame {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.28;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pixel-layer-thumb-area {
  fill: currentColor;
  fill-opacity: 0.18;
  stroke: currentColor;
  stroke-opacity: 0.75;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pixel-layer-thumb-flow {
  fill: none;
  stroke: #ff6a3d;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pixel-layer-switch-visibility {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
}

.pixel-layer-switch-visibility:hover {
  opacity: 1;
}

.pixel-layer-visibility-icon {
  width: 15px;
  height: 15px;
}

.pixel-layer-visibility-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.pixel-layer-visibility-icon circle {
  fill: currentColor;
}

.pixel-layer-visibility-slash {
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.pixel-layer-switch-card strong {
  min-width: 0;
  max-width: 84px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixel-layer-primary {
  /* Pairs on one line only while both controls genuinely fit: the direction
     chips are as wide as their longest label, which varies by language, so a
     fixed column threshold clipped them. Wrapping is decided by content. */
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 12px 18px;
}

.pixel-layer-primary-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pixel-layer-primary-group:first-child {
  flex: 0 1 auto;
}

.pixel-layer-primary-group:last-child {
  flex: 1 1 190px;
}

.pixel-layer-primary-group .control-group {
  margin: 0;
}

.pixel-inspector-section-count {
  margin-left: 6px;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.pixel-layer-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}

.pixel-layer-panel-header strong {
  color: rgba(244, 242, 235, 0.94);
  font-size: 14px;
  font-weight: 780;
}

.pixel-layer-panel-header span {
  color: rgba(244, 242, 235, 0.42);
  font-size: 11px;
  font-weight: 640;
}




.pixel-layer-strip {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pixel-layer-strip::-webkit-scrollbar {
  display: none;
}

.pixel-layer-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.pixel-layer-control {
  padding: 0;
  border-bottom: 0;
}

.pixel-layer-control .control-row {
  min-height: 16px;
}

.pixel-inspector-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.09);
}

.pixel-inspector-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.pixel-inspector-header strong {
  color: rgba(244, 242, 235, 0.94);
  font-size: 13px;
  font-weight: 760;
}

.pixel-inspector-header span {
  min-width: 0;
  color: rgba(244, 242, 235, 0.42);
  font-size: 11px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixel-inspector-section-label {
  margin-top: 0;
  color: rgba(244, 242, 235, 0.38);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0;
}

.pixel-inspector-object-strip,
.pixel-inspector-actions {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pixel-inspector-object-strip::-webkit-scrollbar,
.pixel-inspector-actions::-webkit-scrollbar {
  display: none;
}


.pixel-inspector-chip,
.pixel-inspector-button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(244, 242, 235, 0.1);
  border-radius: 0;
  background: rgba(244, 242, 235, 0.045);
  color: rgba(244, 242, 235, 0.68);
  font-size: 11px;
  font-weight: 720;
}

.pixel-inspector-chip.is-active,
.pixel-inspector-button.is-active {
  background: rgba(244, 242, 235, 0.92);
  color: #050505;
}

.pixel-inspector-button:disabled {
  color: rgba(244, 242, 235, 0.26);
  opacity: 0.62;
}


.empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 6vw, 42px);
  color: var(--text-dark);
  pointer-events: none;
}

.empty-state.is-actionable {
  pointer-events: auto;
}

.empty-state.is-hidden {
  display: none;
}

.empty-start-panel {
  width: min(292px, calc(100% - 56px));
  display: grid;
  gap: 14px;
  padding: 0;
  color: rgba(244, 242, 235, 0.94);
  text-align: center;
  transform: translateY(-4%);
}

.empty-start-panel.requires-source {
  width: min(280px, calc(100% - 64px));
}

.empty-start-title {
  color: rgba(244, 242, 235, 0.94);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.2;
}

.empty-start-description {
  margin-top: -6px;
  color: rgba(244, 242, 235, 0.5);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}

.empty-start-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.empty-start-actions .media-action-button.is-wide {
  flex-basis: 100%;
}

.empty-start-actions .media-action-button {
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border-color: rgba(244, 242, 235, 0.18);
  background: transparent;
  color: rgba(244, 242, 235, 0.68);
}

.empty-start-actions .media-action-button.is-primary {
  border-color: rgba(244, 242, 235, 0.92);
  background: rgba(244, 242, 235, 0.92);
  color: #050505;
  justify-content: center;
}

/* Dims the sample button when it sits beside a filled primary. When sample is
   itself the primary, this used to win on source order alone and paint pale
   text on a pale button — the same cream at 0.56 over the same cream at 0.92,
   which is not low contrast so much as no contrast. */
.empty-start-actions .media-action-button[data-media-action="sample"]:not(.is-primary) {
  color: rgba(244, 242, 235, 0.56);
}

.editor-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

.sheet-panel,
.editor-dock {
  pointer-events: auto;
}

.sheet-panel {
  max-height: var(--sheet-expanded-max);
  margin: 0;
  padding: 6px 16px 12px;
  border-top: 1px solid var(--line-dark);
  border-radius: var(--radius-shell);
  background:
    linear-gradient(180deg, rgba(244, 242, 235, 0.022), rgba(244, 242, 235, 0)),
    rgba(5, 5, 5, 0.98);
  box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition:
    max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}

.sheet-panel.is-expanded {
  max-height: var(--sheet-expanded-max);
}

.sheet-panel.is-collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-top-color: transparent;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.sheet-panel.is-collapsed .sheet-handle,
.sheet-panel.is-collapsed .sheet-heading,
.sheet-panel.is-collapsed #controlForm {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sheet-handle {
  width: 100%;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
}

html.is-web-free .sheet-handle {
  height: 44px;
}

.sheet-handle span {
  width: 38px;
  height: 3px;
  border-radius: var(--radius-shell);
  background: rgba(244, 242, 235, 0.28);
}

.sheet-heading {
  margin-bottom: 4px;
  transition:
    opacity 140ms ease,
    visibility 140ms ease;
}

.sheet-heading h2 {
  font-size: 14px;
  font-weight: 600;
}

.sheet-heading span {
  display: none;
}

#controlForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 0;
  min-height: 0;
  max-height: calc(var(--sheet-expanded-max) - 58px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 10px;
  scrollbar-width: none;
  transition:
    opacity 140ms ease,
    visibility 140ms ease;
}

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

.control-group,
.inspector-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-shell);
  background: transparent;
}

.control-group[data-param-type="text"],
.control-group[data-param-type="select"],
.control-group[data-param-priority="prominent"],
.inspector-card {
  grid-column: 1 / -1;
}

.control-group[data-param-key="previewMotion"] {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.control-group[data-param-key="previewMotion"] > .switch {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}

.control-row,
.inspector-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.control-label,
.inspector-card-title strong {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.control-value,
.inspector-card-title span {
  color: var(--muted-dark);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: right;
}

.media-role-pill {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.4);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 640;
  line-height: 1;
  white-space: nowrap;
}

.media-current-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 44px;
}

.media-current-preview {
  position: relative;
  min-height: 44px;
  border: 1px solid rgba(244, 242, 235, 0.14);
  background: rgba(244, 242, 235, 0.035);
  overflow: hidden;
}

.media-current-row.is-blank .media-current-preview {
  background: rgba(244, 242, 235, 0.06);
}

.media-current-row.is-new .media-current-preview {
  background: transparent;
}

.media-current-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.media-current-badge {
  position: absolute;
  inset: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.58);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
}

.media-current-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 0;
  border-bottom: 0;
}

.media-current-copy strong {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-current-copy span {
  color: var(--muted-dark);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.media-role-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.web-platform-note {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

/* The trial note carries the same shape as the platform note but has to be
   noticed: it is describing a boundary, and it is only useful if it is read
   before the work rather than after it. */
.trial-tool-note {
  border-color: rgba(110, 168, 255, 0.34);
  color: rgba(232, 238, 248, 0.86);
}


.media-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

.media-action-button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(244, 242, 235, 0.12);
  background: transparent;
  color: rgba(244, 242, 235, 0.66);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.media-action-button.is-primary {
  border-color: rgba(244, 242, 235, 0.92);
  background: rgba(244, 242, 235, 0.92);
  color: var(--accent-ink);
  justify-content: center;
  padding: 0 14px;
}

.media-action-button.is-wide {
  grid-column: 1 / -1;
}

.media-action-button[data-media-action="sample"] {
  color: rgba(244, 242, 235, 0.72);
}

.object-region-canvas-note {
  margin: 2px 0 0;
  color: rgba(244, 242, 235, 0.46);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.inspector-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.inspector-actions.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.slider-control {
  min-height: 34px;
  display: flex;
  align-items: center;
}

input[type="range"] {
  width: 100%;
  min-height: 34px;
  background: transparent;
  accent-color: var(--accent);
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-touch);
  background: rgba(244, 242, 235, 0.2);
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border: 1px solid rgba(244, 242, 235, 0.82);
  border-radius: var(--radius-touch);
  background: var(--accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.44);
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-touch);
  background: rgba(244, 242, 235, 0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(244, 242, 235, 0.82);
  border-radius: var(--radius-touch);
  background: var(--accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.44);
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(244, 242, 235, 0.085);
  border-radius: var(--radius-ui);
  padding: 0 11px;
  background: rgba(244, 242, 235, 0.018);
  color: var(--text-dark);
}

.segmented-control {
  min-width: 0;
  min-height: 42px;
  padding: 3px;
  border: 1px solid rgba(244, 242, 235, 0.085);
  border-radius: var(--radius-ui);
  background: rgba(244, 242, 235, 0.018);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 1fr));
  gap: 3px;
  overflow: visible;
}

.segmented-control button {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--muted-dark);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.segmented-control[data-option-count="5"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.segmented-control[data-option-count="5"] button {
  grid-column: span 2;
}

.segmented-control[data-option-count="5"] button:nth-child(n + 4) {
  grid-column: span 3;
}

.segmented-control button.is-active {
  background: rgba(244, 242, 235, 0.14);
  color: var(--text-dark);
}

.segmented-label-compact {
  display: none;
}

html.is-web-free .segmented-control {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
}

html.is-web-free .segmented-control button + button {
  border-left: 1px solid rgba(244, 242, 235, 0.09);
}

html.is-web-free .segmented-control button.is-active {
  background: rgba(244, 242, 235, 0.13);
}

html.is-web-free .control-label,
html.is-web-free .control-value,
html.is-web-free .segmented-control button,
html.is-web-free select {
  text-transform: capitalize;
}

html.is-web-free input[type="range"],
html.is-web-free .slider-control,
html.is-web-free input[type="text"],
html.is-web-free input[type="number"],
html.is-web-free select,
html.is-web-free .segmented-control button,
html.is-web-free .color-control,
html.is-web-free .media-action-button {
  min-height: 44px;
}

html.is-web-free .switch {
  min-height: 44px;
}

html.is-web-free .switch input {
  height: 44px;
  border: 0;
  background: transparent;
}

html.is-web-free .switch input::after {
  position: absolute;
  z-index: 0;
  inset: 9px 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-touch);
  background: rgba(244, 242, 235, 0.08);
  content: "";
}

html.is-web-free .switch input::before {
  z-index: 1;
  top: 12px;
}

html.is-web-free .switch input:checked {
  background: transparent;
}

html.is-web-free .switch input:checked::after {
  border-color: var(--accent-strong);
  background: var(--accent);
}

html.is-web-free .pixel-inspector-card {
  padding-top: 14px;
  padding-bottom: 18px;
  border-bottom: 0;
}

.color-control {
  position: relative;
  min-height: 36px;
  border: 1px solid rgba(244, 242, 235, 0.085);
  border-radius: var(--radius-ui);
  background: rgba(244, 242, 235, 0.018);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  overflow: hidden;
}

.color-control input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

.color-preview {
  width: 100%;
  height: 4px;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-ui);
  box-shadow: inset 0 0 0 1px rgba(244, 242, 235, 0.2);
  pointer-events: none;
}

.color-code {
  min-width: 70px;
  color: var(--muted-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  pointer-events: none;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.switch input {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-touch);
  background: rgba(244, 242, 235, 0.08);
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-touch);
  background: rgba(244, 242, 235, 0.72);
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease;
}

.switch input:checked {
  border-color: var(--accent-strong);
  background: var(--accent);
}

.switch input:checked::before {
  background: var(--accent-ink);
  transform: translateX(20px);
}

.empty-panel-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-dark);
}

.output-confirmation {
  grid-column: 1 / -1;
  position: sticky;
  z-index: 3;
  bottom: 0;
  margin: 0 -2px;
  padding: 12px 2px 2px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, 0.98) 28%);
}

.output-capability-summary {
  grid-column: 1 / -1;
  display: grid;
  border-top: 1px solid rgba(244, 242, 235, 0.09);
  border-bottom: 1px solid rgba(244, 242, 235, 0.09);
}

.output-capability-summary p {
  min-width: 0;
  min-height: 42px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(244, 242, 235, 0.07);
}

.output-capability-summary p:last-child {
  border-bottom: 0;
}

.output-capability-summary strong {
  color: rgba(244, 242, 235, 0.88);
  font-size: 11px;
  font-weight: 700;
}

.output-capability-summary span {
  min-width: 0;
  color: rgba(244, 242, 235, 0.48);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}

.output-capability-summary .is-warning span {
  color: #e5b59f;
}

.output-confirm-button {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(244, 242, 235, 0.92);
  border-radius: 0;
  background: var(--text-dark);
  color: var(--editor-panel);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  transition:
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 140ms ease;
}

html.is-web-free .output-confirm-button,
html.is-web-free .export-dock-button {
  --export-progress: 0;
  position: relative;
  overflow: hidden;
}

html.is-web-free .output-confirm-button::after,
html.is-web-free .export-dock-button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  opacity: 0.72;
  transform: scaleX(var(--export-progress, 0));
  transform-origin: left;
  transition: transform 180ms ease;
  pointer-events: none;
}

.output-confirm-button:active:not(:disabled) {
  transform: scale(0.99);
}

.output-confirm-button:disabled {
  opacity: 0.32;
}

.advanced-section {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid rgba(244, 242, 235, 0.09);
}

.advanced-section summary {
  min-height: 42px;
  padding: 0 2px;
  color: var(--muted-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.advanced-section summary::-webkit-details-marker {
  display: none;
}

.advanced-section summary span {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
}

.advanced-section summary small {
  min-width: 26px;
  height: 26px;
  border: 1px solid rgba(244, 242, 235, 0.12);
  border-radius: var(--radius-shell);
  color: var(--muted-dark);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

.advanced-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 10px;
}

.presets-panel {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.preset-recipe-panel,
.preset-save-panel,
.preset-card {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(244, 242, 235, 0.075);
  border-radius: var(--radius-shell);
  background: transparent;
}

.preset-recipe-panel,
.preset-save-panel {
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.preset-recipe-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}

.preset-recipe-actions .button {
  min-width: 0;
  min-height: 36px;
  padding-inline: 8px;
}

.preset-current,
.preset-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preset-current span,
.preset-section-heading span {
  color: var(--muted-dark);
  font-size: 11px;
  font-weight: 500;
}

.preset-current strong,
.preset-section-heading strong {
  min-width: 0;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-save-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.preset-save-form .button {
  min-width: 72px;
}

.preset-section {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.preset-list {
  display: grid;
  gap: 0;
}

.preset-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
}

.preset-card.is-active {
  background: rgba(244, 242, 235, 0.06);
}

.preset-card-main,
.preset-delete-button {
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--text-dark);
}

.preset-card-main {
  min-width: 0;
  padding: 11px 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.preset-card-main strong,
.preset-card-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-card-main strong {
  font-size: 13px;
  font-weight: 600;
}

.preset-card-main span {
  color: var(--muted-dark);
  font-size: 12px;
  line-height: 1.25;
}

.preset-delete-button {
  min-width: 56px;
  padding: 0 0 0 12px;
  border-left: 1px solid rgba(244, 242, 235, 0.075);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

.editor-dock {
  min-height: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
  padding: 0 12px env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 0;
  background: var(--editor-panel);
  border-top: 1px solid rgba(244, 242, 235, 0.075);
  touch-action: pan-x;
}

.editor-dock.has-no-export {
  grid-template-columns: minmax(0, 1fr);
}

.dock-button,
.panel-tab {
  position: relative;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

html.is-web-free .dock-button,
html.is-web-free .panel-tab {
  min-height: 44px;
}

.dock-button {
  height: 32px;
  padding: 0 4px;
}

html.is-web-free .dock-button {
  height: 44px;
}

.dock-button.primary {
  color: var(--text-dark);
}

.export-dock-button:not(:disabled) {
  color: var(--text-dark);
}

.export-dock-button.is-loading {
  color: var(--text-dark);
  opacity: 0.82;
}

html.has-native-shell .export-dock-button {
  display: none;
}

html.has-native-shell .editor-dock {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 60px;
  padding-right: 60px;
}

html.has-native-shell .panel-tabs {
  padding-left: 4px;
  padding-right: 4px;
  scroll-padding-left: 12px;
  scroll-padding-right: 12px;
}

.panel-tabs {
  --tab-indicator-x: 0px;
  --tab-indicator-width: 0;
  position: relative;
  min-width: 0;
  height: var(--dock-height);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-padding-inline: 10px;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  mask-image: none;
}

.panel-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  z-index: 0;
  width: 1px;
  height: 34px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--tab-indicator-x), 0, 0) scaleX(var(--tab-indicator-width));
  transform-origin: left center;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;
}

.panel-tabs.has-active-indicator::before {
  opacity: 1;
}

.panel-tabs.can-scroll-right:not(.can-scroll-left) {
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - 22px),
    transparent 100%
  );
}

.panel-tabs.can-scroll-left:not(.can-scroll-right) {
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%);
}

.panel-tabs.can-scroll-left.can-scroll-right {
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
}

.panel-tabs::-webkit-scrollbar {
  display: none;
}

.panel-tabs-scroll,
html.has-native-shell .panel-tabs-scroll {
  display: none;
}

.panel-tab {
  z-index: 1;
  width: max-content;
  min-width: 48px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  color: rgba(244, 242, 235, 0.62);
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  scroll-snap-align: center;
  white-space: nowrap;
}

.panel-tab::after {
  content: none;
}

.panel-tab.is-active {
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  mix-blend-mode: difference;
}

.editor-dock.is-sheet-collapsed .panel-tab.is-active {
  background: transparent;
  color: rgba(244, 242, 235, 0.62);
  font-size: 13.5px;
  font-weight: 500;
  mix-blend-mode: normal;
}

.panel-tab.is-active::after {
  content: none;
}

.editor-toast,
.home-toast {
  position: fixed;
  left: 50%;
  z-index: 24;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid rgba(244, 242, 235, 0.14);
  border-radius: var(--radius-ui);
  background: rgba(12, 12, 12, 0.94);
  color: var(--text-dark);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.editor-toast {
  bottom: calc(var(--bottom-panel-height) + 16px);
}

.home-toast {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
}

.editor-toast.is-visible,
.home-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.editor-toast.is-warning,
.home-toast.is-warning {
  border-color: var(--warning-line);
}

.editor-toast.is-error,
.home-toast.is-error {
  border-color: var(--danger-line);
}

.ios-app-promotion[hidden] {
  display: none;
}

.ios-app-promotion {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 42;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 18px;
  align-items: center;
  width: min(460px, calc(100vw - 44px));
  min-height: 76px;
  padding: 14px 12px 14px 18px;
  border: 1px solid rgba(244, 242, 235, 0.32);
  background: #111;
  color: var(--text-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.ios-app-promotion.is-visible {
  opacity: 1;
  visibility: visible;
}

.ios-app-promotion-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ios-app-promotion-copy span {
  color: rgba(244, 242, 235, 0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.ios-app-promotion-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ios-app-promotion-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(244, 242, 235, 0.3);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ios-app-promotion-link:hover,
.ios-app-promotion-link:focus-visible {
  border-color: var(--text-dark);
  background: var(--text-dark);
  color: #111;
}

.ios-app-promotion-dismiss {
  display: grid;
  place-items: center;
  width: 28px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 235, 0.48);
  font-size: 18px;
  line-height: 1;
  transition: color 150ms ease;
}

.ios-app-promotion-dismiss:hover,
.ios-app-promotion-dismiss:focus-visible {
  color: var(--text-dark);
}

.tool-frame {
  position: fixed;
  left: -10px;
  top: -10px;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.tool-frame.is-live-preview-surface {
  z-index: 4;
  border: 1px solid rgba(244, 242, 235, 0.16);
  opacity: 1;
  background: transparent;
  contain: strict;
  transform: translateZ(0);
}

@media (max-width: 819px) {
  .site-header,
  .editor-topbar {
    grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr);
    padding-right: 18px;
    padding-left: 18px;
  }

  .editor-primary-navigation {
    gap: 24px;
  }

  .web-editor-site-link #webEditorToolName {
    max-width: 180px;
  }

  .editor-runtime-status {
    display: none !important;
  }

  html.is-web-free .editor-dock {
    position: relative;
  }

  html.is-web-free .panel-tabs {
    padding-inline: 18px;
  }

  html.is-web-free .panel-tabs-scroll:not([hidden]) {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: inline-flex;
    width: 32px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--editor-panel);
    color: rgba(244, 242, 235, 0.82);
    transform: translateY(-50%);
  }

  html.is-web-free .panel-tabs-scroll-previous {
    left: 0;
  }

  html.is-web-free .panel-tabs-scroll-next {
    right: 46px;
  }
}

@media (max-width: 900px) {
  .editor-current-tool {
    display: none !important;
  }
}

@media (max-width: 1040px) and (min-width: 621px) {
  .editor-capability-button {
    min-width: 44px;
    padding-inline: 10px;
  }

  .editor-capability-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 820px) {
  html.is-web-free .editor-view {
    --web-inspector-width: clamp(400px, 30vw, 468px);
    --web-tool-rail-width: 96px;
    position: fixed;
    grid-template-columns: minmax(0, 1fr) var(--web-inspector-width);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .editor-topbar {
    grid-column: 1 / -1;
  }

  html.is-web-free .editor-stage {
    padding: 34px clamp(30px, 3.6vw, 62px);
  }

  html.is-web-free .editor-bottom {
    position: static;
    display: grid;
    grid-template-rows: 104px minmax(0, 1fr);
    min-height: 0;
    border-left: 1px solid var(--line-dark);
    background: var(--editor-panel);
  }

  html.is-web-free .sheet-panel {
    grid-row: 2;
    max-height: none;
    min-height: 0;
    padding: 0 22px 22px;
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
    overflow: visible;
    transition: none;
  }

  html.is-web-free .sheet-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  html.is-web-free .sheet-heading {
    display: none;
  }

  html.is-web-free .sheet-heading h2 {
    font-size: 16px;
    font-weight: 720;
  }

  .sheet-panel.is-collapsed {
    max-height: none;
    padding-bottom: 14px;
    box-shadow: none;
  }

  .sheet-panel.is-collapsed .sheet-heading,
  .sheet-panel.is-collapsed #controlForm {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .sheet-handle {
    display: none;
  }

  #controlForm {
    max-height: none;
  }

  html.is-web-free #controlForm {
    align-content: start;
    column-gap: 18px;
    min-height: 0;
    padding-top: 18px;
    overflow-y: auto;
    scroll-padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 242, 235, 0.2) transparent;
  }

  html.is-web-free #controlForm::-webkit-scrollbar {
    display: block;
    width: 5px;
  }

  html.is-web-free #controlForm::-webkit-scrollbar-thumb {
    background: rgba(244, 242, 235, 0.2);
  }

  html.is-web-free .control-group,
  html.is-web-free .inspector-card {
    gap: 7px;
    padding: 12px 0 14px;
    border-top: 1px solid rgba(244, 242, 235, 0.075);
  }

  html.is-web-free .control-label,
  html.is-web-free .inspector-card-title strong {
    font-size: 12.5px;
    font-weight: 680;
    text-transform: capitalize;
  }

  html.is-web-free .control-value,
  html.is-web-free .inspector-card-title span {
    color: rgba(244, 242, 235, 0.58);
    font-size: 11px;
  }

  html.is-web-free .control-group[data-param-type="select"]:not([data-param-priority="prominent"]) {
    grid-column: auto;
  }

  html.is-web-free .control-group[data-param-key="format"] {
    grid-column: 1 / -1;
  }

  html.is-web-free .output-capability-summary strong {
    font-size: 12px;
  }

  html.is-web-free .output-capability-summary span {
    font-size: 11px;
  }

  html.is-web-free #previewCanvas {
    max-width: min(calc(100% - 32px), 960px);
    max-height: calc(100dvh - 176px);
  }

  html.is-web-free .editor-comparison-canvas {
    max-width: min(calc(100% - 32px), 960px);
    max-height: calc(100dvh - 176px);
  }

  html.is-web-free .editor-canvas-tools {
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
  }

  html.is-web-free .editor-dock {
    position: relative;
    grid-row: 1;
    min-height: 104px;
    padding: 0 12px 0 0;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: stretch;
    border-top: 0;
    border-bottom: 1px solid rgba(244, 242, 235, 0.055);
  }

  html.is-web-free .editor-dock.has-no-export {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-web-free .panel-tabs {
    height: 103px;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    overflow: hidden;
    scroll-snap-type: none;
    mask-image: none;
  }

  html.is-web-free .panel-tabs[data-panel-count="5"],
  html.is-web-free .panel-tabs[data-panel-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html.is-web-free .panel-tabs-scroll {
    display: none;
  }

  html.is-web-free .panel-tab {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0 8px;
    background: transparent;
    box-shadow: inset -1px -1px rgba(244, 242, 235, 0.065);
    color: rgba(244, 242, 235, 0.54);
    font-size: 12.5px;
    font-weight: 620;
    letter-spacing: 0.01em;
    transition: background 140ms ease-out, color 140ms ease-out;
  }

  html.is-web-free .panel-tab:hover,
  html.is-web-free .panel-tab:focus-visible {
    background: rgba(244, 242, 235, 0.055);
    color: rgba(244, 242, 235, 0.9);
  }

  html.is-web-free .panel-tab.is-active {
    background: rgba(244, 242, 235, 0.12);
    box-shadow: inset 0 -2px var(--accent);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 740;
    mix-blend-mode: normal;
  }

  html.is-web-free .panel-tabs::before {
    display: none;
  }

  html.is-web-free .export-dock-button {
    width: 76px;
    height: 42px;
    align-self: center;
    justify-self: end;
    border: 1px solid rgba(244, 242, 235, 0.34);
    background: transparent;
    color: rgba(244, 242, 235, 0.88);
    font-size: 12px;
    font-weight: 720;
    transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
  }

  html.is-web-free .export-dock-button:hover:not(:disabled),
  html.is-web-free .export-dock-button:focus-visible:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
  }

  html.is-web-free .export-dock-button:disabled {
    border-color: rgba(244, 242, 235, 0.14);
    background: transparent;
    color: rgba(244, 242, 235, 0.32);
  }

  html.is-web-free .segmented-control[data-option-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  html.is-web-free .segmented-control[data-option-count="5"] button,
  html.is-web-free .segmented-control[data-option-count="5"] button:nth-child(n + 4) {
    grid-column: auto;
  }

  html.is-web-free .segmented-control[data-option-count="5"] button:last-child:nth-child(odd) {
    grid-column: auto;
  }

  html.is-web-free .segmented-control[data-param-key="format"] .segmented-label-full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.is-web-free .segmented-control[data-param-key="format"] .segmented-label-compact {
    display: inline;
  }

  .pixel-layer-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .editor-toast {
    left: auto;
    right: calc(var(--web-inspector-width) + 22px);
    bottom: 22px;
    transform: translateY(8px);
  }

  .editor-toast.is-visible {
    transform: translateY(0);
  }

  .ios-app-promotion {
    right: calc(var(--web-inspector-width) + 22px);
  }
}

@media (min-width: 960px) {
  html.is-web-free .editor-view {
    grid-template-columns: var(--web-tool-rail-width) minmax(0, 1fr) var(--web-inspector-width);
  }

  html.is-web-free .editor-tool-rail {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    border-right: 1px solid var(--line-dark);
    background: #090909;
    overflow: hidden;
  }

  html.is-web-free .editor-tool-rail-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(244, 242, 235, 0.09);
    color: rgba(244, 242, 235, 0.48);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  html.is-web-free .editor-tool-rail-header strong {
    display: none;
  }

  html.is-web-free .editor-tool-rail-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 242, 235, 0.18) transparent;
  }

  html.is-web-free .editor-tool-rail-list::-webkit-scrollbar {
    width: 4px;
  }

  html.is-web-free .editor-tool-rail-list::-webkit-scrollbar-thumb {
    background: rgba(244, 242, 235, 0.18);
  }

  html.is-web-free .editor-tool-rail-group + .editor-tool-rail-group {
    border-top: 1px solid rgba(244, 242, 235, 0.075);
  }

  html.is-web-free .editor-tool-rail-group-title {
    display: none;
  }

  html.is-web-free .editor-tool-rail-group-items {
    display: grid;
  }

  html.is-web-free .editor-tool-rail-item {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    padding: 8px;
    border: 0;
    border-bottom: 1px solid rgba(244, 242, 235, 0.055);
    background: transparent;
    color: var(--text-dark);
    display: grid;
    place-items: center;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease-out, color 140ms ease-out, opacity 140ms ease-out;
  }

  html.is-web-free .editor-tool-rail-item::before {
    position: absolute;
    inset: 8px auto 8px 0;
    width: 2px;
    background: transparent;
    content: "";
  }

  html.is-web-free .editor-tool-rail-item:hover:not(:disabled),
  html.is-web-free .editor-tool-rail-item:focus-visible {
    background: rgba(244, 242, 235, 0.055);
  }

  html.is-web-free .editor-tool-rail-item.is-active {
    background: rgba(244, 242, 235, 0.1);
  }

  html.is-web-free .editor-tool-rail-item.is-active::before {
    background: var(--text-dark);
  }

  html.is-web-free .editor-tool-rail-item:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  html.is-web-free .editor-tool-rail-list[data-switching="true"] .editor-tool-rail-item:not([aria-busy="true"]) {
    opacity: 0.42;
    pointer-events: none;
  }

  html.is-web-free .editor-tool-rail-preview {
    width: 40px;
    aspect-ratio: 4 / 5;
    display: block;
    overflow: hidden;
    background: #171717;
  }

  html.is-web-free .editor-tool-rail-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html.is-web-free .editor-tool-rail-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.is-web-free .editor-stage {
    grid-column: 2;
    grid-row: 2;
  }

  html.is-web-free .editor-bottom {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (min-width: 1160px) {
  html.is-web-free .editor-view {
    --web-tool-rail-width: clamp(208px, 15vw, 232px);
  }

  html.is-web-free .editor-tool-rail {
    grid-template-rows: minmax(0, 1fr);
  }

  /* Hidden rather than restyled. It repeated the word already in the top bar,
   * on a screen that shows the tool list itself with the current entry marked.
   */
  html.is-web-free .editor-tool-rail-header {
    display: none;
  }

  /* The rail is the tool list and marks the current entry, so the bar does not
   * need to name the tool or offer a way to change it. What the menu still
   * owned that nothing else did was Library, which is lifted out to sit in the
   * bar directly; the rest of the menu goes.
   */
  html.is-web-free .editor-topbar .editor-current-tool,
  html.is-web-free .editor-topbar .header-tools-menu,
  html.is-web-free .editor-topbar .editor-primary-navigation > a {
    display: none;
  }

  html.is-web-free .editor-topbar .editor-primary-navigation {
    display: flex;
    align-items: center;
  }

  /* Hidden by default; only the wide layout removes the menu that otherwise
   * holds this action, so only it needs the button in the bar.
   */
  html.is-web-free .editor-library-button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--muted-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  html.is-web-free .editor-library-button:hover {
    color: var(--text-dark);
  }

  html.is-web-free .editor-tool-rail-header strong {
    display: inline;
    color: rgba(244, 242, 235, 0.78);
    font-size: 11px;
    font-weight: 760;
  }

  html.is-web-free .editor-tool-rail-group-title {
    min-height: 34px;
    margin: 0;
    padding: 0 16px;
    color: rgba(244, 242, 235, 0.36);
    display: flex;
    align-items: center;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  html.is-web-free .editor-tool-rail-item {
    min-height: 64px;
    padding: 7px 14px;
    grid-template-columns: 38px minmax(0, 1fr);
    place-items: center stretch;
    gap: 12px;
  }

  html.is-web-free .editor-tool-rail-item::before {
    inset-block: 7px;
  }

  html.is-web-free .editor-tool-rail-preview {
    width: 38px;
  }

  html.is-web-free .editor-tool-rail-copy {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    clip: auto;
    clip-path: none;
    display: grid;
    gap: 5px;
    white-space: normal;
  }

  html.is-web-free .editor-tool-rail-copy strong,
  html.is-web-free .editor-tool-rail-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-web-free .editor-tool-rail-copy strong {
    color: rgba(244, 242, 235, 0.84);
    font-size: 11.5px;
    font-weight: 680;
    letter-spacing: -0.005em;
  }

  html.is-web-free .editor-tool-rail-copy small {
    color: rgba(244, 242, 235, 0.38);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }
}

/* Web-only workspace cleanup. The native shell keeps its Library and Settings
 * surfaces; the browser editor uses Projects and a focused tool workspace. */
html.is-web-free .home-tabs,
html.is-web-free .home-settings-button,
html.is-web-free .home-settings-layer {
  display: none !important;
}

html.is-web-free .home-workspace-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 900px) {
  html.is-web-free .home-workspace-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-web-free .web-projects-button {
    width: 100%;
  }
}

html.is-web-free .web-projects-button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(244, 242, 235, 0.2);
  background: transparent;
  color: rgba(244, 242, 235, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
}

html.is-web-free .web-projects-button small {
  color: rgba(244, 242, 235, 0.4);
  font-size: 10px;
  font-weight: 760;
}

html.is-web-free .web-projects-button:hover,
html.is-web-free .web-projects-button:focus-visible,
html.is-web-free .web-projects-button.is-active {
  border-color: rgba(244, 242, 235, 0.58);
  color: var(--text);
}

html.is-web-free .web-picker-discovery:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 22px 42px;
  margin: -28px 0 clamp(36px, 4vw, 58px);
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(244, 242, 235, 0.12);
}

html.is-web-free .web-picker-search {
  display: grid;
  gap: 8px;
}

html.is-web-free .web-picker-search > span,
html.is-web-free .web-picker-recent > span {
  color: rgba(244, 242, 235, 0.44);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.is-web-free .web-picker-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(244, 242, 235, 0.2);
  border-radius: 0;
  outline: 0;
  background: rgba(244, 242, 235, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

html.is-web-free .web-picker-search input::placeholder {
  color: rgba(244, 242, 235, 0.34);
}

html.is-web-free .web-picker-search input:focus {
  border-color: rgba(244, 242, 235, 0.7);
  box-shadow: 0 0 0 2px rgba(244, 242, 235, 0.1);
}

html.is-web-free .web-picker-recent {
  min-width: 0;
  display: grid;
  gap: 9px;
}

html.is-web-free .web-picker-recent > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.is-web-free .web-picker-recent button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(244, 242, 235, 0.16);
  background: transparent;
  color: rgba(244, 242, 235, 0.72);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

html.is-web-free .web-picker-recent button:hover,
html.is-web-free .web-picker-recent button:focus-visible {
  border-color: rgba(244, 242, 235, 0.5);
  color: var(--text);
}

html.is-web-free .web-picker-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(244, 242, 235, 0.58);
  font-size: 13px;
}

html.is-web-free .web-picker-empty button {
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

html.is-web-free .tool-category-section[hidden] {
  display: none;
}

html.is-web-free .web-mobile-controls-button,
html.is-web-free .web-mobile-controls-menu {
  display: none;
}

@media (max-width: 819px) {
  html.is-web-free .web-picker-discovery:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 8px 0 28px;
  }

  html.is-web-free .web-picker-recent {
    display: none;
  }

  html.is-web-free .editor-library-button {
    display: inline-flex;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: rgba(244, 242, 235, 0.62);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  html.is-web-free .editor-library-button:hover,
  html.is-web-free .editor-library-button:focus-visible {
    color: var(--text-dark);
  }

  html.is-web-free .panel-tabs {
    display: none;
  }

  html.is-web-free .editor-dock {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }

  html.is-web-free .web-mobile-controls-button {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: rgba(244, 242, 235, 0.72);
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0.02em;
  }

  html.is-web-free .web-mobile-controls-button::after {
    width: 7px;
    height: 7px;
    margin-left: 9px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
  }

  html.is-web-free .web-mobile-controls-button[aria-expanded="true"] {
    color: var(--text-dark);
  }

  html.is-web-free .web-mobile-controls-button[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }

  html.is-web-free .web-mobile-controls-menu:not([hidden]) {
    position: absolute;
    z-index: 16;
    right: 12px;
    bottom: calc(100% + 8px);
    left: 12px;
    padding: 8px;
    border: 1px solid rgba(244, 242, 235, 0.18);
    background: rgba(7, 7, 6, 0.98);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  html.is-web-free .web-mobile-controls-menu button {
    min-height: 42px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: rgba(244, 242, 235, 0.62);
    font-size: 11px;
    font-weight: 680;
    text-align: left;
  }

  html.is-web-free .web-mobile-controls-menu button:hover,
  html.is-web-free .web-mobile-controls-menu button:focus-visible,
  html.is-web-free .web-mobile-controls-menu button.is-active {
    background: rgba(244, 242, 235, 0.09);
    color: var(--text-dark);
  }
}

html.is-web-free .editor-stage.is-file-drop-target::after {
  position: absolute;
  z-index: 12;
  inset: 20px;
  border: 1px solid rgba(244, 242, 235, 0.86);
  background: rgba(5, 5, 5, 0.82);
  color: var(--text-dark);
  content: "Drop image\A PNG, JPEG, or WebP · processed locally";
  display: grid;
  place-items: center;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}

@media (min-width: 820px) and (max-width: 1120px) {
  .site-header,
  .editor-topbar {
    grid-template-columns: minmax(136px, 0.8fr) auto minmax(300px, 1.5fr);
    padding-right: 18px;
    padding-left: 18px;
  }

  /* Undo and redo are meta actions on the work; Random and Motion make the
   * work. Sitting flush together they read as one row of equal buttons, so the
   * history pair is set apart rather than given a divider.
   */
  html.is-web-free .editor-actions .history-actions {
    margin-left: 14px;
  }

  html.is-web-free .editor-current-tool {
    border-right: 0;
  }

  .product-navigation,
  .editor-primary-navigation {
    gap: 0;
    font-size: 14px;
  }

  .picker-topbar .product-navigation > a:nth-child(2),
  .editor-primary-navigation > a:nth-child(2) {
    display: none;
  }

  .picker-topbar .header-menu-mobile-about,
  .editor-primary-navigation .header-menu-mobile-about {
    display: flex;
  }

  .site-brand-lockup {
    gap: 8px;
  }

  .web-editor-site-link #webEditorToolName {
    max-width: 124px;
  }

  .editor-current-tool {
    padding-right: 14px;
    font-size: 12px;
  }

  .editor-actions {
    gap: 12px;
  }

  .history-actions {
    width: 84px;
  }

  .history-actions .icon-button {
    width: 44px;
  }

  #redoButton {
    left: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-menu-panel,
  .header-menu-mark,
  .editor-navigation-external,
  .header-menu-category,
  .header-menu-studio-action,
  .editor-toast,
  .home-toast,
  .segmented-control button,
  .panel-tabs::before,
  .sheet-panel,
  .sheet-heading,
  .editor-bottom,
  #controlForm {
    animation: none;
    transition: none;
  }

  html.is-web-free .editor-save-status[data-state="saving"]::before,
  .live-preview-toggle.is-active .live-preview-mark,
  .editor-capability-button[aria-busy="true"] .editor-random-mark {
    animation: none;
  }
}

@media (max-width: 620px) {
  .site-header,
  .editor-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    padding-right: 14px;
    padding-left: 14px;
  }

  html.is-web-free .web-editor-brand-lockup {
    display: none;
  }

  .editor-primary-navigation {
    justify-self: start;
    gap: 0;
    overflow: hidden;
  }

  .editor-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html.is-web-free .editor-capability-actions {
    position: fixed;
    z-index: 8;
    top: calc(76px + env(safe-area-inset-top, 0px));
    right: 14px;
    height: 40px;
    border: 1px solid rgba(244, 242, 235, 0.18);
    background: rgba(5, 5, 5, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .editor-capability-button {
    min-width: 72px;
    height: 38px;
    padding: 0 10px;
  }

  .editor-capability-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }

  .web-editor-site-link #webEditorToolName {
    max-width: 92px;
  }

  .site-brand-lockup > span,
  .product-navigation > a:nth-child(2) {
    display: none;
  }

  .product-navigation {
    gap: 0;
    font-size: 13px;
  }

  .header-menu-trigger {
    gap: 6px;
  }

  .header-menu-panel {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 14px;
    left: 14px;
    width: auto;
    padding: 12px 16px 16px;
    transform: none;
    animation-name: studio-header-menu-reveal-mobile;
  }

  .header-menu-overview {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    min-height: 50px;
  }

  .header-menu-category {
    min-height: 48px;
    font-size: 12px;
  }

  .header-menu-categories {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .header-menu-category:nth-child(odd) {
    margin-right: 0;
  }

  .header-menu-mobile-about {
    display: flex;
  }

  .site-studio-link {
    gap: 8px;
    min-height: 32px;
    padding: 0 9px 0 11px;
  }

  .ios-app-promotion {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 14px;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    width: auto;
  }

  .ios-app-promotion-copy strong {
    font-size: 13px;
  }

  html.is-web-free .home-tabs {
    padding-right: 14px;
    padding-left: 14px;
  }

  html.is-web-free .home-settings-button {
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: 14px;
  }

  @keyframes studio-header-menu-reveal-mobile {
    from { opacity: 0; transform: translate3d(0, -7px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .tool-picker-view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .picker-topbar {
    min-height: 46px;
  }

  .home-tabs {
    margin-left: 0;
    margin-right: 0;
  }

  .home-tab {
    min-height: clamp(36px, 9vw, 48px);
  }

  .magazine-cover {
    min-height: calc(100svh - 104px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .cover-art {
    min-height: calc(100svh - 104px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .cover-art::after {
    inset: 10px;
  }

  .cover-copy h2 {
    max-width: min(92vw, 6.2em);
    font-size: clamp(40px, 13vw, 58px);
  }

  .cover-actions {
    margin-top: 1px;
  }

  .picker-hero {
    margin-top: 18px;
    padding-top: 16px;
  }

  .tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 15px;
  }

  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    padding-inline: 8px;
  }

  .tool-card-body {
    padding-top: 17px;
  }

  .tool-card strong {
    font-size: 11.5px;
  }

  .tool-card-index {
    font-size: 9.5px;
  }

  .project-meta {
    padding-top: 6px;
  }

  .project-meta strong {
    font-size: 12px;
  }

  .editor-stage {
    padding-top: 0;
  }

  #previewCanvas {
    max-width: min(calc(100% - 12px), 760px);
  }

  .editor-compare-toggle kbd {
    display: none;
  }
}

/* Desktop editor: let the composition grow with the screen.
 *
 * The web editor inherited its shape from the phone layout. The pieces that
 * still read as a port are a canvas pinned to 960px however much room the
 * stage has, an inspector that stops widening at 468px, and a collapsed state
 * that reserves its column without giving anything back — collapsing is a
 * phone trade between canvas and controls, and there is nothing to trade here.
 *
 * Everything below is scoped to wide viewports and to `html.is-web-free`, so
 * the phone layout and the iOS shell keep the behaviour they already have.
 */
@media (min-width: 1440px) {
  html.is-web-free .editor-stage {
    padding: 34px clamp(24px, 2.2vw, 44px);
  }

  html.is-web-free #previewCanvas,
  html.is-web-free .editor-comparison-canvas {
    max-width: calc(100% - 32px);
  }
}

@media (min-width: 820px) {
  /* The class is still applied by the shared editor, so neutralise the space
   * it reserves rather than letting a dead state hold a column open.
   */
  html.is-web-free .sheet-panel.is-collapsed {
    padding-bottom: 22px;
  }

  html.is-web-free .editor-dock.is-sheet-collapsed {
    border-bottom: 1px solid var(--line-dark);
  }
}

/* Desktop inspector: one scrolling column of collapsible sections.
 *
 * The tab strip is a phone compromise — seven parameter groups do not fit on a
 * phone at once, so they were split. On a desktop inspector that split leaves
 * most tabs about a third full, and the strip itself costs 103px of height.
 * The media and active sections stay open while secondary sections collapse
 * until they are needed.
 *
 * Scoped to `html.is-web-free` and to wide viewports, so the phone layout and
 * the iOS shell keep the tabs they need. Pixel stretch keeps tabs too; its
 * panels own overlay state, which is handled in the runtime.
 */
@media (min-width: 1160px) {
  /* The dock exists to hold the tab strip and a small export button. With the
   * tabs gone it is a 104px row containing one 76px button, while the pinned
   * export sits at the other end of the same panel — two export affordances,
   * neither where the eye lands. Hide the dock and keep the pinned one.
   */
  html.is-web-free .editor-bottom.has-stacked-inspector .editor-dock,
  html.is-web-free .editor-bottom.has-stacked-inspector .sheet-heading {
    display: none;
  }

  html.is-web-free .editor-bottom.has-stacked-inspector {
    grid-template-rows: minmax(0, 1fr);
  }

  /* The sheet sits in row 2 because narrower layouts keep a heading above it.
     This one has no heading and only declares a single row, so row 2 was an
     implicit row created after it — the panel hung off the bottom of the
     column and the 1fr above it took whatever the panel did not need. With
     every section expanded that was nothing; collapsing them opened four
     hundred pixels of blank above the panel. */
  html.is-web-free .editor-bottom.has-stacked-inspector .sheet-panel {
    grid-row: 1;
  }

  html.is-web-free .has-stacked-inspector #controlForm {
    display: block;
    overflow-y: auto;
    padding-top: 0;
    padding-right: 4px;
  }

  html.is-web-free .inspector-overview {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    min-height: 52px;
    /* Baseline alignment parked the whole row against the top of its 52px
       height, thirteen pixels above the centre it was meant to sit on. The two
       labels are 13px and 11px, so centring their boxes moves their baselines
       by about a pixel — which is the smaller of the two errors by far. */
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 -4px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line-dark);
    background: var(--editor-panel);
  }

  html.is-web-free .inspector-overview strong {
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: 0.01em;
  }

  html.is-web-free .inspector-overview span {
    margin-left: auto;
    color: var(--muted-dark);
    font-size: 11px;
    font-weight: 620;
  }

  html.is-web-free .inspector-reset-button {
    flex: 0 0 auto;
    min-height: 26px;
    margin-left: 4px;
    padding: 0 9px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    background: transparent;
    color: var(--muted-dark);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  html.is-web-free .inspector-reset-button:hover,
  html.is-web-free .inspector-reset-button:focus-visible {
    border-color: var(--line-strong);
    color: var(--text-dark);
  }

  html.is-web-free .inspector-reset-button:focus-visible {
    outline: 1px solid var(--line-strong);
    outline-offset: 2px;
  }

  .inspector-section + .inspector-section {
    border-top: 1px solid var(--line-dark);
  }

  .inspector-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .inspector-section-header:focus-visible {
    outline: 1px solid var(--line-strong);
    outline-offset: 2px;
  }

  .inspector-section-header::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
  }

  .inspector-section.is-collapsed .inspector-section-header::after {
    transform: translateY(1px) rotate(-135deg);
  }

  .inspector-section-body {
    padding-bottom: 24px;
  }

  .inspector-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -4px;
    padding: 14px 4px 4px;
    border-top: 1px solid var(--line-dark);
    background: var(--editor-panel);
  }

  .inspector-section[data-panel-kind="params"] .inspector-section-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  /* A section holding one control leaves the right half of the row empty and
   * spends more height on its heading than on its content. Let the control take
   * the full width so the section reads as one line rather than a broken row.
   */
  .inspector-section[data-panel-kind="params"] .inspector-section-body:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 16px;
  }

  .inspector-section.is-collapsed .inspector-section-body {
    display: none;
  }
}

/* Only the wide web layout hides the menu that otherwise holds this action, so
 * only it shows the button in the bar. Narrow layouts and the iOS shell keep
 * reaching Library through the menu.
 */
.editor-library-button {
  display: none;
}

/* The web editor bar carries the site wordmark, 780x324, so it cannot use the
 * square sizing that suits the app icon. That icon is still what the boot
 * screen and the iOS shell show, and they keep the rule above.
 */
/* Both Studio bars carry the 780x324 wordmark on the web, and the square rule
   above would crop it to 44x44. It applied to the editor only, and only above
   1160px, so the picker showed a squashed mark at every width and the editor
   showed one below that. The app icon keeps the square rule: it is square, and
   it is what the boot screen and the iOS shell show. */
html.is-web-free .site-brand-lockup .brand-icon {
  width: auto;
  height: 28px;
  object-fit: contain;
}


/* The gated media actions carry the same PRO mark the tool grid uses, so the
   boundary reads the same wherever it is met. */
.media-action-button.is-pro-gated {
  position: relative;
}

.media-action-pro {
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid rgba(110, 168, 255, 0.5);
  color: rgba(160, 198, 255, 0.95);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
}


/* The Studio embedded in a tool's own page. Everything that exists to move
   between tools or between projects is gone — the page around it already says
   which tool this is, and the archive belongs to the workspace. What is left is
   the canvas, this tool's controls, and the actions that finish a picture. */
body.is-embedded-surface .editor-tool-rail,
body.is-embedded-surface .web-editor-brand-lockup,
body.is-embedded-surface .web-editor-site-link {
  display: none;
}

/* Matched to `html.is-web-free .editor-topbar .editor-primary-navigation`,
   which is more specific than a plain body.is-embedded-surface rule and would
   otherwise put Tools and Library back on a page that is one tool. */
html body.is-embedded-surface .editor-topbar .editor-primary-navigation {
  display: none;
}

/* Undo, redo and Export used to live in this bar and went out with it, which
   left an editor you could play with but not finish. The bar stays; only the
   ways out of the tool are gone. */
body.is-embedded-surface .editor-topbar {
  justify-content: flex-end;
  padding-block: 10px;
  border-bottom: 1px solid var(--hairline);
}

body.is-embedded-surface .editor-view {
  padding-top: 0;
}