/* Optional relief: one soft light from the upper left, with crisp foreground ink. */
.gf-depth-face { display: none; pointer-events: none; }

.gf-studio[data-depth="on"], .gf-studio[data-depth="on"] .gf-canvas-wrap[data-canvas-theme="dark"] {
  --gf-depth-shadow: #0007;
  --gf-depth-wire-shadow: #000b;
  --gf-depth-rim: #ffffff1c;
  --gf-depth-edge: #0005;
  --gf-depth-gloss: #ffffff0c;
  --gf-depth-shade: #00000020;
  --gf-depth-field-shade: #00000020;
  --gf-depth-face-light: .115;
  --gf-depth-face-shade: .14;
  --gf-depth-rim-light: .28;
  --gf-depth-rim-shade: .22;
}
.gf-studio[data-depth="on"][data-theme="light"], .gf-studio[data-depth="on"] .gf-canvas-wrap[data-canvas-theme="light"] {
  --gf-depth-shadow: #24364a30;
  --gf-depth-wire-shadow: #24364a42;
  --gf-depth-rim: #ffffffdd;
  --gf-depth-edge: #24364a20;
  --gf-depth-gloss: #ffffff88;
  --gf-depth-shade: #24364a0b;
  --gf-depth-field-shade: #24364a0e;
  --gf-depth-face-light: .28;
  --gf-depth-face-shade: .045;
  --gf-depth-rim-light: .85;
  --gf-depth-rim-shade: .13;
}

.gf-studio[data-depth="on"] .gf-depth-face { display: initial; }
.gf-studio[data-depth="on"] .gf-depth-region-face { opacity: .35; }
.gf-studio[data-depth="on"] :is(.gf-node-shape, .gf-action-box, .gf-action-condition-box, .gf-note-box, .gf-reference-circle) {
  filter: drop-shadow(0 2.5px 1.6px var(--gf-depth-shadow));
}
.gf-studio[data-depth="on"] :is(.gf-depth-tube, .gf-depth-cone) {
  filter: drop-shadow(.65px 1.2px .6px var(--gf-depth-wire-shadow));
}

.gf-studio[data-depth="on"][data-theme] :is(.gf-header, .gf-toolbar, .gf-library-heading, .gf-inspector-tabs, .gf-sheets, .gf-statusbar, .gf-dialog-heading, .gf-action-editor-header, .gf-property-section > .gf-inspector-heading) {
  background-image: linear-gradient(170deg, var(--gf-depth-gloss), transparent 45%, var(--gf-depth-shade));
  box-shadow: inset 0 1px 0 var(--gf-depth-rim), inset 0 -1px 0 var(--gf-depth-edge);
}
.gf-studio[data-depth="on"] :is(.gf-library, .gf-inspector) {
  background-image: linear-gradient(150deg, var(--gf-depth-gloss), transparent 32%);
  box-shadow: inset 1px 0 0 var(--gf-depth-rim), inset -1px 0 0 var(--gf-depth-edge);
}
.gf-studio[data-depth="on"][data-theme] :is(.gf-symbols button, .gf-tool-group button, .gf-header > button, .gf-color-fields button, .gf-color-presets button, .gf-inspector-actions button, .gf-routing-actions button, .gf-sequence-detail-actions button, .gf-sheets button) {
  background-image: linear-gradient(165deg, var(--gf-depth-gloss), transparent 45%, var(--gf-depth-shade));
  box-shadow: inset 0 1px 0 var(--gf-depth-rim), 0 1px 2px var(--gf-depth-shadow);
}
.gf-studio[data-depth="on"][data-theme] :is(.gf-tool-group button[aria-pressed="true"], .gf-header > button[aria-pressed="true"], .gf-sheets button[aria-selected="true"]) {
  box-shadow: inset 0 1px 3px var(--gf-depth-shadow), inset 0 -1px 0 var(--gf-depth-rim);
}
.gf-studio[data-depth="on"][data-theme] :is(.gf-field input:not([type="checkbox"]), .gf-field textarea, .gf-field select, .gf-position input, .gf-project-search-trigger) {
  background-image: linear-gradient(180deg, var(--gf-depth-field-shade), transparent 9px);
  box-shadow: inset 0 1px 2px var(--gf-depth-shadow), 0 1px 0 var(--gf-depth-rim);
}
.gf-studio[data-depth="on"] .gf-action-editor-item {
  background-image: linear-gradient(160deg, var(--gf-depth-gloss), transparent 45%);
  box-shadow: inset 0 1px 0 var(--gf-depth-rim), 0 2px 4px var(--gf-depth-shadow);
}
.gf-studio[data-depth="on"] :is(.gf-minimap, .gf-zoom-controls, .gf-canvas-controls [data-gf="compact"], .gf-canvas-issues, .gf-diagnostic-popover, .gf-region-title-map) {
  box-shadow: inset 0 1px 0 var(--gf-depth-rim), 0 4px 14px var(--gf-depth-shadow);
}
.gf-studio[data-depth="on"] :is(.gf-dialog, .gf-color-palette, .gf-edge-menu, .gf-inspector-tooltip) {
  box-shadow: inset 0 1px 0 var(--gf-depth-rim), 0 16px 48px var(--gf-depth-shadow);
}

/* Actual front, top and side faces. Their ink follows each element's palette. */
.gf-depth-geometry { display: none; pointer-events: none; }
.gf-studio[data-depth="on"] .gf-depth-geometry { display: initial; }
.gf-depth-solid { --gf-volume-fill: var(--gf-node-fill); --gf-volume-border: var(--gf-node-stroke); }
.gf-depth-solid-stage { --gf-volume-fill: var(--gf-stage-fill, var(--gf-node-fill)); --gf-volume-border: var(--gf-stage-border, var(--gf-node-stroke)); }
.gf-depth-solid-action { --gf-volume-fill: var(--gf-action-fill, var(--gf-action-floating)); --gf-volume-border: var(--gf-action-border, var(--gf-edge)); }
.gf-depth-solid-condition { --gf-volume-fill: var(--gf-action-fill, var(--gf-surface-soft)); --gf-volume-border: var(--gf-action-border, var(--gf-edge)); }
.gf-depth-solid-note { --gf-volume-fill: var(--gf-annotation-fill, var(--gf-note-bg)); --gf-volume-border: var(--gf-annotation-border, var(--gf-note-border)); }
.gf-depth-solid-region { --gf-volume-fill: var(--gf-region-fill, var(--gf-region-bg)); --gf-volume-border: var(--gf-region-border); }
.gf-depth-solid-bar { --gf-volume-fill: var(--gf-line-color, var(--gf-node-stroke)); --gf-volume-border: var(--gf-line-color, var(--gf-node-stroke)); }
.gf-depth-solid-top { fill: color-mix(in srgb, var(--gf-volume-fill) 77%, white); stroke: color-mix(in srgb, var(--gf-volume-border) 85%, white); stroke-width: .65; }
.gf-depth-solid-side { fill: color-mix(in srgb, var(--gf-volume-fill) 66%, black); stroke: color-mix(in srgb, var(--gf-volume-border) 72%, black); stroke-width: .65; }
.gf-depth-solid-bar .gf-depth-solid-top { fill: color-mix(in srgb, var(--gf-volume-fill) 60%, white); stroke: color-mix(in srgb, var(--gf-volume-border) 68%, white); }
.gf-depth-solid-bar .gf-depth-solid-side { fill: color-mix(in srgb, var(--gf-volume-fill) 54%, black); stroke: color-mix(in srgb, var(--gf-volume-border) 58%, black); }
.gf-stage-action:is(:hover, :focus) .gf-depth-solid-action { --gf-volume-border: var(--gf-action-border, var(--gf-accent)); }
.gf-depth-coin { fill: color-mix(in srgb, var(--gf-canvas) 65%, var(--gf-edge)); stroke: var(--gf-edge); stroke-width: .65; }
.gf-depth-bar-front { fill: var(--gf-line-color, var(--gf-node-stroke)); }
.gf-depth-tube, .gf-depth-cone { --gf-depth-wire-color: var(--gf-edge); }
.gf-depth-wire-action { --gf-depth-wire-color: var(--gf-action-border, var(--gf-edge)); }
.gf-depth-tube-base { fill: none; stroke: var(--gf-depth-wire-color); stroke-linecap: round; stroke-linejoin: round; }
.gf-depth-wire-stem .gf-depth-tube-base { stroke-linecap: butt; }
.gf-depth-cone-base { fill: var(--gf-depth-wire-color); }
.gf-edge.is-selected :is(.gf-depth-tube, .gf-depth-cone) { --gf-depth-wire-color: var(--gf-selected); }
.gf-route-changed :is(.gf-depth-tube, .gf-depth-cone), .gf-edge-reference.is-reference-peek .gf-depth-tube { --gf-depth-wire-color: var(--gf-accent); }
.gf-studio[data-depth="on"] :is(.gf-edge-line, .gf-edge-turn-arrow, .gf-action-link, .gf-transition-stem, .gf-transition-bar, .gf-parallel-bar) { opacity: 0; }