/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
._card_pixen_1 {
	display: flex;
	flex-direction: column;
	background: var(--color-background-default);
	border-radius: 24px;
	width: 220px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition: box-shadow 0.2s ease;
}

[data-theme="dark"] ._card_pixen_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_pixen_1._hovered_pixen_19 {
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_pixen_1._hovered_pixen_19 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_pixen_1:active {
	transform: perspective(600px) scale(0.96);
}

._card_pixen_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._thumbnail_pixen_39 {
	height: 100px;
	background: var(--color-container-hover);
	border-radius: 24px 24px 0 0;
}

._content_pixen_45 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-16) 20px;
	transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_pixen_19 ._content_pixen_45 {
	padding: var(--base-spacing-24);
}

._badge_pixen_57 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_pixen_66 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	text-wrap: balance;
}

._reveal_pixen_75 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_pixen_19 ._reveal_pixen_75 {
	grid-template-rows: 1fr;
}

._revealInner_pixen_85 {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	min-height: 0;
}

._summary_pixen_93 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	text-wrap: pretty;
	opacity: 0;
	will-change: opacity, transform;
	transform: translateY(8px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_pixen_19 ._summary_pixen_93 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

._tags_pixen_114 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-spacing-4);
	margin-top: var(--base-spacing-4);
	opacity: 0;
	will-change: opacity, transform;
	transform: translateY(8px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_pixen_19 ._tags_pixen_114 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

._tag_pixen_114 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	color: var(--color-text-weaker);
	background: var(--color-container-hover);
	padding: 2px var(--base-spacing-6);
	border-radius: var(--base-radius-xs);
}
._card_1ih5p_1 {
	display: flex;
	flex-direction: column;
	background: var(--color-background-default);
	border-radius: 16px;
	width: 280px;
	cursor: pointer;
	padding: 0;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._card_1ih5p_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_1ih5p_1._hovered_1ih5p_24 {
	padding: 8px 8px 16px;
	width: 296px;
	border-radius: 24px;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_1ih5p_1._hovered_1ih5p_24 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_1ih5p_1:active {
	transform: perspective(600px) scale(0.96);
}

._card_1ih5p_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._video_1ih5p_47 {
	width: 100%;
	height: auto;
	display: block;
	-o-object-fit: cover;
	   object-fit: cover;
	pointer-events: none;
	border-radius: 16px;
}

._reveal_1ih5p_56 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_1ih5p_24 ._reveal_1ih5p_56 {
	grid-template-rows: 1fr;
}

._revealInner_1ih5p_66 {
	overflow: hidden;
	min-height: 0;
}

._content_1ih5p_71 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-8) var(--base-spacing-4) 0;
}

._badge_1ih5p_78 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_1ih5p_24 ._badge_1ih5p_78 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

._title_1ih5p_100 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	text-wrap: balance;
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_1ih5p_24 ._title_1ih5p_100 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

._summary_1ih5p_122 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	text-wrap: pretty;
	opacity: 0;
	transform: translateY(4px);
	will-change: opacity, transform;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_1ih5p_24 ._summary_1ih5p_122 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
._card_1dymw_1 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	width: 200px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.2s ease;
}

[data-theme="dark"] ._card_1dymw_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_1dymw_1._hovered_1dymw_23 {
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_1dymw_1._hovered_1dymw_23 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_1dymw_1:active {
	transform: perspective(600px) scale(0.96);
}

._card_1dymw_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_1dymw_44 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_1dymw_53 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	text-wrap: balance;
}

._reveal_1dymw_62 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_1dymw_23 ._reveal_1dymw_62 {
	grid-template-rows: 1fr;
}

._revealInner_1dymw_72 {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	min-height: 0;
}

._summary_1dymw_80 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	text-wrap: pretty;
	opacity: 0;
	will-change: opacity, transform;
	transform: translateY(8px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_1dymw_23 ._summary_1dymw_80 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

._tags_1dymw_101 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-spacing-4);
	opacity: 0;
	will-change: opacity, transform;
	transform: translateY(8px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_1dymw_23 ._tags_1dymw_101 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

._tag_1dymw_101 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	color: var(--color-text-weaker);
	background: var(--color-container-hover);
	padding: 2px var(--base-spacing-6);
	border-radius: var(--base-radius-xs);
}
._pill_4yfkl_1 {
	display: inline-flex;
	align-items: center;
	gap: var(--base-spacing-8);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition: box-shadow 0.2s ease;
}

[data-theme="dark"] ._pill_4yfkl_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._pill_4yfkl_1:hover {
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._pill_4yfkl_1:hover {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._pill_4yfkl_1:active {
	transform: perspective(600px) scale(0.96);
}

._pill_4yfkl_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._icon_4yfkl_40 {
	color: var(--color-text-weaker);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

._pill_4yfkl_1:hover ._icon_4yfkl_40 {
	transform: translate(1px, -1px);
}

._label_4yfkl_50 {
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-sm);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	white-space: nowrap;
}
._widget_1qlgk_1 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	cursor: default;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._widget_1qlgk_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._widget_1qlgk_1._hovered_1qlgk_22 {
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._widget_1qlgk_1._hovered_1qlgk_22 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._widget_1qlgk_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_1qlgk_39 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_1qlgk_48 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
}

._reveal_1qlgk_56 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_1qlgk_22 ._reveal_1qlgk_56 {
	grid-template-rows: 1fr;
}

._revealInner_1qlgk_66 {
	overflow: hidden;
	min-height: 0;
}

._clock_1qlgk_71 {
	display: block;
	font-family: "Fragment Mono", var(--base-font-family-mono);
	font-size: 32px;
	color: var(--color-text-weak);
	line-height: 1;
	padding-top: var(--base-spacing-8);
	letter-spacing: 0.02em;
}
._card_1m749_1 {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-8);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.25s ease;
}

[data-theme="dark"] ._card_1m749_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_1m749_1:hover {
	padding-right: 80px;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_1m749_1:hover {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_1m749_1:active {
	transform: perspective(600px) scale(0.96);
}

._card_1m749_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_1m749_44 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._linkIcon_1m749_53 {
	position: absolute;
	top: var(--base-spacing-16);
	right: 20px;
	color: var(--color-text-default);
	opacity: 0;
	transition: opacity 0.2s ease;
}

._card_1m749_1:hover ._linkIcon_1m749_53 {
	opacity: 1;
}

._title_1m749_66 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
}
._bio_oi3an_1 {
	display: flex;
	flex-direction: column;
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	width: 220px;
	cursor: pointer;
	position: relative;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._bio_oi3an_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._bio_oi3an_1._expanded_oi3an_24 {
	width: 380px;
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._bio_oi3an_1._expanded_oi3an_24 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._bio_oi3an_1:active {
	transform: perspective(600px) scale(0.96);
}

._bio_oi3an_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._label_oi3an_46 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._name_oi3an_55 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	margin-top: var(--base-spacing-4);
}

._role_oi3an_64 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	margin-top: 2px;
}

/* Body: always in DOM, hidden by default via grid row collapse */
._body_oi3an_72 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._expanded_oi3an_24 ._body_oi3an_72 {
	grid-template-rows: 1fr;
}

._bodyInner_oi3an_82 {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Paragraphs: enter with opacity + translateY, exit is fast and subtle */
/* Note: filter: blur() omitted on text — causes font-weight rendering artifacts mid-transition */
._paragraph_oi3an_91 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-relaxed);
	text-wrap: pretty;
	margin: 0;
	opacity: 0;
	transform: translateY(8px);
	will-change: opacity, transform;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._paragraph_oi3an_91:first-child {
	margin-top: var(--base-spacing-12);
}

._expanded_oi3an_24 ._paragraph_oi3an_91 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

._paragraph_oi3an_91 + ._paragraph_oi3an_91 {
	margin-top: var(--base-spacing-12);
}

._refWrapper_oi3an_121 {
	position: relative;
	display: inline;
}

._ref_oi3an_121 {
	color: var(--color-text-default);
	text-decoration: underline;
	text-decoration-color: var(--color-text-weaker);
	text-underline-offset: 2px;
	cursor: default;
	transition: text-decoration-color 0.15s ease;
}

._ref_oi3an_121:hover {
	text-decoration-color: var(--color-text-default);
}

._preview_oi3an_139 {
	position: fixed;
	z-index: 100;
	pointer-events: none;
	background: var(--color-background-default);
	border: 1px solid var(--color-border-default);
	box-shadow: 0 8px 32px oklch(0% 0 0 / 0.12);
	animation: _previewIn_oi3an_1 0.15s ease-out;
}

@keyframes _previewIn_oi3an_1 {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
._wrapper_1xgwz_1 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-8);
	padding-top: var(--base-spacing-8);
}

._label_1xgwz_8 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-tight);
}

._grid_1xgwz_15 {
	display: flex;
	gap: 3px;
}

._column_1xgwz_20 {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

._cell_1xgwz_26 {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: var(--color-container-hover);
}

._cell_1xgwz_26[data-level="1"] {
	background: oklch(45% 0.15 145);
}

._cell_1xgwz_26[data-level="2"] {
	background: oklch(55% 0.18 145);
}

._cell_1xgwz_26[data-level="3"] {
	background: oklch(65% 0.2 145);
}

._cell_1xgwz_26[data-level="4"] {
	background: oklch(75% 0.22 145);
}

._count_1xgwz_49 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weaker);
	line-height: var(--base-font-line-height-tight);
}
._card_1oheh_1 {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	min-width: 105px;
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._card_1oheh_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_1oheh_1._hovered_1oheh_24 {
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_1oheh_1._hovered_1oheh_24 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_1oheh_1:active {
	transform: perspective(600px) scale(0.96);
}

._card_1oheh_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_1oheh_45 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_1oheh_54 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
}

._linkIcon_1oheh_62 {
	position: absolute;
	top: var(--base-spacing-24);
	right: var(--base-spacing-24);
	color: var(--color-text-default);
	opacity: 0;
	transition: opacity 0.2s ease;
}

._hovered_1oheh_24 ._linkIcon_1oheh_62 {
	opacity: 1;
}

._reveal_1oheh_75 {
	display: grid;
	grid-template-rows: 0fr;
	grid-template-columns: 0fr;
	transition:
		grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		grid-template-columns 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_1oheh_24 ._reveal_1oheh_75 {
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
}

._revealInner_1oheh_89 {
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}
._card_q4b0b_1 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	width: 280px;
	cursor: pointer;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._card_q4b0b_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_q4b0b_1._hovered_q4b0b_23 {
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_q4b0b_1._hovered_q4b0b_23 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_q4b0b_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_q4b0b_40 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_q4b0b_49 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	text-wrap: balance;
}

._reveal_q4b0b_58 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_q4b0b_23 ._reveal_q4b0b_58 {
	grid-template-rows: 1fr;
}

._revealInner_q4b0b_68 {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-8);
}

._revealInner_q4b0b_68 ._video_q4b0b_76 {
	margin-top: var(--base-spacing-8);
}

._video_q4b0b_76 {
	width: 100%;
	height: auto;
	display: block;
	-o-object-fit: cover;
	   object-fit: cover;
	pointer-events: none;
	border-radius: 16px;
}

._text_q4b0b_89 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	text-wrap: pretty;
	opacity: 0;
	transform: translateY(4px);
	will-change: opacity, transform;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_q4b0b_23 ._text_q4b0b_89 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._statement_q4b0b_110 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-sm);
	font-style: italic;
	color: var(--color-text-weaker);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

._hovered_q4b0b_23 ._statement_q4b0b_110 {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
._card_lp120_1 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-16) 20px;
	background: var(--color-background-default);
	border-radius: 24px;
	cursor: default;
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.06),
		0 1px 2px -1px oklch(0% 0 0 / 0.06),
		0 2px 4px 0 oklch(0% 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] ._card_lp120_1 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08);
}

._card_lp120_1._hovered_lp120_22 {
	padding: var(--base-spacing-24);
	box-shadow:
		0 0 0 1px oklch(0% 0 0 / 0.08),
		0 1px 2px -1px oklch(0% 0 0 / 0.08),
		0 2px 4px 0 oklch(0% 0 0 / 0.06);
}

[data-theme="dark"] ._card_lp120_1._hovered_lp120_22 {
	box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.13);
}

._card_lp120_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._badge_lp120_39 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._title_lp120_48 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
}

._reveal_lp120_56 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._hovered_lp120_22 ._reveal_lp120_56 {
	grid-template-rows: 1fr;
}

._revealInner_lp120_66 {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
}

._tokens_lp120_74 {
	display: block;
	font-family: "Fragment Mono", var(--base-font-family-mono);
	font-size: 32px;
	color: var(--color-text-weak);
	line-height: 1;
	padding-top: var(--base-spacing-8);
	letter-spacing: 0.02em;
}

._static_lp120_84 {
	color: var(--color-text-weaker);
}

._digits_lp120_88 {
	color: var(--color-text-weak);
}

._updated_lp120_92 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weaker);
	line-height: var(--base-font-line-height-tight);
}
._canvas_1wldk_1 {
	flex: 1;
	width: 100%;
	height: 100%;
}

._canvas_1wldk_1 .react-flow__pane {
	cursor: default;
}

._canvas_1wldk_1 .react-flow__background {
	opacity: 0.4;
}
._edge_161jj_1 {
	stroke: var(--color-border-default);
	stroke-width: 1.5;
	opacity: 0.4;
}

._edge_161jj_1:hover {
	opacity: 0.7;
}
._backdrop_x5z6s_1 {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: oklch(0% 0 0 / 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--base-spacing-48) var(--base-spacing-16);
	overflow-y: auto;
}

._overlay_x5z6s_15 {
	background: var(--color-background-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-lg);
	width: 100%;
	max-width: 720px;
	min-height: 200px;
	outline: none;
}

._header_x5z6s_25 {
	display: flex;
	justify-content: flex-end;
	padding: var(--base-spacing-12) var(--base-spacing-16);
	position: sticky;
	top: 0;
	z-index: 1;
}

._close_x5z6s_34 {
	font-size: var(--base-font-size-2xl);
	line-height: 1;
	background: none;
	border: none;
	color: var(--color-text-weaker);
	cursor: pointer;
	padding: var(--base-spacing-4) var(--base-spacing-8);
	border-radius: var(--base-radius-sm);
}

._close_x5z6s_34:hover {
	color: var(--color-text-default);
	background: var(--color-container-hover);
}

._content_x5z6s_50 {
	padding: 0 var(--base-spacing-32) var(--base-spacing-48);
}

._loading_x5z6s_54 {
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weaker);
	padding: var(--base-spacing-48);
	text-align: center;
}
._button_12lae_1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: oklch(0% 0 0 / 0.4);
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

[data-theme="dark"] ._button_12lae_1 {
	color: oklch(100% 0 0 / 0.5);
}

._button_12lae_1:hover {
	background: oklch(0% 0 0 / 0.08);
	color: oklch(0% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] ._button_12lae_1:hover {
	background: oklch(100% 0 0 / 0.16);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

._button_12lae_1:active {
	background: oklch(0% 0 0 / 0.05);
}

[data-theme="dark"] ._button_12lae_1:active {
	background: oklch(100% 0 0 / 0.08);
}

._button_12lae_1:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

._icon_12lae_47 {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
._callout_6jr5s_1 {
	padding: var(--base-spacing-16);
	background: var(--color-container-hover);
	border-left: 3px solid var(--color-text-weaker);
	border-radius: var(--base-radius-sm);
	margin: var(--base-spacing-16) 0;
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-relaxed);
}
._prose_1vt9z_1 {
	max-width: 640px;
	margin: 0 auto;
	color: var(--color-text-default);
	font-size: var(--base-font-size-base);
	line-height: var(--base-font-line-height-relaxed);
}

._prose_1vt9z_1 h1 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-3xl);
	font-weight: var(--base-font-weight-medium);
	line-height: var(--base-font-line-height-tight);
	margin: 0 0 var(--base-spacing-24);
}

._prose_1vt9z_1 h2 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-xl);
	font-weight: var(--base-font-weight-medium);
	line-height: var(--base-font-line-height-tight);
	margin: var(--base-spacing-48) 0 var(--base-spacing-16);
}

._prose_1vt9z_1 p {
	margin: 0 0 var(--base-spacing-16);
}

._prose_1vt9z_1 strong {
	font-weight: var(--base-font-weight-medium);
}

._prose_1vt9z_1 a {
	color: var(--color-text-default);
	text-decoration: underline;
	text-underline-offset: 2px;
}

._prose_1vt9z_1 a:hover {
	color: var(--color-text-weak);
}

._prose_1vt9z_1 code {
	font-family: var(--base-font-family-mono);
	font-size: 0.875em;
	background: var(--color-container-hover);
	padding: 2px var(--base-spacing-4);
	border-radius: var(--base-radius-sm);
}

._prose_1vt9z_1 pre {
	background: var(--color-container-hover);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-md);
	padding: var(--base-spacing-16);
	overflow-x: auto;
	margin: var(--base-spacing-24) 0;
	font-size: var(--base-font-size-sm);
	line-height: var(--base-font-line-height-relaxed);
}

._prose_1vt9z_1 pre code {
	background: none;
	padding: 0;
	border-radius: 0;
}

._prose_1vt9z_1 hr {
	border: none;
	border-top: 1px solid var(--color-border-default);
	margin: var(--base-spacing-48) 0;
}

._prose_1vt9z_1 em {
	color: var(--color-text-weak);
}

._prose_1vt9z_1 ul,
._prose_1vt9z_1 ol {
	padding-left: var(--base-spacing-24);
	margin: 0 0 var(--base-spacing-16);
}

._prose_1vt9z_1 li {
	margin: 0 0 var(--base-spacing-8);
}
._backdrop_1dmno_1 {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
}

._sideLeft_1dmno_8 {
	flex: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: linear-gradient(to right, oklch(0% 0 0 / 0.3), var(--color-background-default));
	cursor: pointer;
}

._sideRight_1dmno_16 {
	flex: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: linear-gradient(to left, oklch(0% 0 0 / 0.3), var(--color-background-default));
	cursor: pointer;
}

._center_1dmno_24 {
	width: 100%;
	max-width: 660px;
	background: var(--color-background-default);
	overflow-y: auto;
	outline: none;
	display: flex;
	flex-direction: column;
}

._closeRow_1dmno_34 {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--base-spacing-16);
}

._close_1dmno_34 {
	font-size: var(--base-font-size-2xl);
	line-height: 1;
	background: none;
	border: none;
	color: var(--color-text-weaker);
	cursor: pointer;
	padding: var(--base-spacing-4) var(--base-spacing-8);
	border-radius: var(--base-radius-sm);
}

._close_1dmno_34:hover {
	color: var(--color-text-default);
	background: var(--color-container-hover);
}

._content_1dmno_56 {
	display: flex;
	flex-direction: column;
	padding: var(--base-spacing-64) var(--base-spacing-48) var(--base-spacing-64);
}

._label_1dmno_62 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._name_1dmno_71 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-xl);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	margin-top: var(--base-spacing-8);
}

._role_1dmno_80 {
	font-size: var(--base-font-size-base);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
	margin-top: 2px;
}

._body_1dmno_87 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-16);
	margin-top: var(--base-spacing-24);
}

._paragraph_1dmno_94 {
	font-size: var(--base-font-size-base);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-relaxed);
	margin: 0;
}

._ref_1dmno_101 {
	text-decoration: underline;
	text-decoration-color: var(--color-text-weaker);
	text-underline-offset: 2px;
}

._ref_1dmno_101:hover {
	text-decoration-color: var(--color-text-default);
}
@property --edge-opacity {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

._nav_hirw0_7 {
	position: fixed;
	bottom: var(--base-spacing-32);
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 60;
	pointer-events: none;
}

._navElevated_hirw0_18 {
	z-index: 110;
}

._navAboveOverlay_hirw0_22 {
	z-index: 101;
}

/* Inverted theme when nav is over the Up Next footer */
._navInverted_hirw0_27 ._outer_hirw0_27 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(100% 0 0 / calc(var(--edge-opacity, 0) * 0.25)),
		oklch(100% 0 0 / 0.06)
	);
	transition: background 0.3s ease;
}

[data-theme="dark"] ._navInverted_hirw0_27 ._outer_hirw0_27 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(0% 0 0 / calc(var(--edge-opacity, 0) * 0.3)),
		oklch(0% 0 0 / 0.08)
	);
}

._navInverted_hirw0_27 ._inner_hirw0_44 {
	background: oklch(0% 0 0 / 0.4);
	transition: background 0.3s ease;
}

[data-theme="dark"] ._navInverted_hirw0_27 ._inner_hirw0_44 {
	background: oklch(100% 0 0 / 0.7);
}

._navInverted_hirw0_27 ._button_hirw0_53 {
	color: oklch(100% 0 0 / 0.4);
	transition: color 0.3s ease;
}

[data-theme="dark"] ._navInverted_hirw0_27 ._button_hirw0_53 {
	color: oklch(0% 0 0 / 0.4);
}

._navInverted_hirw0_27 ._button_hirw0_53._active_hirw0_62 {
	color: oklch(100% 0 0 / 0.9);
}

[data-theme="dark"] ._navInverted_hirw0_27 ._button_hirw0_53._active_hirw0_62 {
	color: oklch(0% 0 0 / 0.9);
}

/* Outer wrapper — gradient border via padding gap */
._outer_hirw0_27 {
	position: relative;
	pointer-events: auto;
	padding: 1px;
	border-radius: 19px;
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(0% 0 0 / calc(var(--edge-opacity, 0) * 0.3)),
		oklch(0% 0 0 / 0.08)
	);
	transition: --edge-opacity 0.3s ease;
}

[data-theme="dark"] ._outer_hirw0_27 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(100% 0 0 / calc(var(--edge-opacity, 0) * 0.25)),
		oklch(100% 0 0 / 0.06)
	);
}

/* Inner pill — glassmorphism surface */
._inner_hirw0_44 {
	display: flex;
	align-items: center;
	gap: var(--base-spacing-12);
	padding: var(--base-spacing-6);
	border-radius: 18px;
	background: oklch(100% 0 0 / 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: background 0.3s ease;
}

[data-theme="dark"] ._inner_hirw0_44 {
	background: oklch(0% 0 0 / 0.4);
}

/* Icon button — base */
._button_hirw0_53 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--base-spacing-12);
	border: none;
	border-radius: var(--base-radius-lg);
	background: transparent;
	color: oklch(0% 0 0 / 0.4);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

[data-theme="dark"] ._button_hirw0_53 {
	color: oklch(100% 0 0 / 0.5);
}

@media (hover: hover) {
	._button_hirw0_53:hover {
		background: oklch(0% 0 0 / 0.08);
		border-radius: var(--base-radius-lg);
		color: oklch(0% 0 0 / 0.9);
		box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
	}

	[data-theme="dark"] ._button_hirw0_53:hover {
		background: oklch(100% 0 0 / 0.16);
		color: oklch(100% 0 0 / 0.9);
		box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
	}
}

._button_hirw0_53:active {
	transform: scale(0.96);
}

/* Active/selected button */
._buttonActive_hirw0_151 {
	background: oklch(0% 0 0 / 0.05);
	border-radius: var(--base-radius-lg);
	color: oklch(0% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] ._buttonActive_hirw0_151 {
	background: oklch(100% 0 0 / 0.08);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

@media (hover: hover) {
	._buttonActive_hirw0_151:hover {
		background: oklch(0% 0 0 / 0.08);
	}

	[data-theme="dark"] ._buttonActive_hirw0_151:hover {
		background: oklch(100% 0 0 / 0.16);
	}
}

._iconMotion_hirw0_175 {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icon sizing */
._icon_hirw0_175 {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Focus ring */
._button_hirw0_53:focus-visible,
._buttonActive_hirw0_151:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

/* Mobile */
@media (max-width: 768px) {
	._nav_hirw0_7 {
		bottom: 12px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	._outer_hirw0_27 {
		transition: none;
	}

	._button_hirw0_53,
	._buttonActive_hirw0_151 {
		transition: none;
	}
}
@property --edge-opacity {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

._popover_1qkzh_7 {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
	pointer-events: auto;
}

/* Outer wrapper — edge light gradient border */
._outer_1qkzh_19 {
	padding: 1px;
	border-radius: 19px;
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(0% 0 0 / calc(var(--edge-opacity, 0) * 0.3)),
		oklch(0% 0 0 / 0.08)
	);
	transition: --edge-opacity 0.3s ease;
}

[data-theme="dark"] ._outer_1qkzh_19 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(100% 0 0 / calc(var(--edge-opacity, 0) * 0.25)),
		oklch(100% 0 0 / 0.06)
	);
}

/* Inner surface — glassmorphism */
._inner_1qkzh_39 {
	width: 288px;
	padding: var(--base-spacing-8);
	border-radius: 18px;
	background: oklch(100% 0 0 / 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-12);
}

[data-theme="dark"] ._inner_1qkzh_39 {
	background: oklch(0% 0 0 / 0.4);
}

/* Menu item */
._item_1qkzh_56 {
	display: flex;
	align-items: center;
	gap: var(--base-spacing-12);
	padding: 2px;
	border-radius: 10px;
	border: none;
	background: transparent;
	cursor: pointer;
	font: inherit;
	text-align: left;
	width: 100%;
	transition:
		background 0.15s ease,
		box-shadow 0.15s ease;
}

._item_1qkzh_56:hover {
	background: oklch(0% 0 0 / 0.08);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] ._item_1qkzh_56:hover {
	background: oklch(100% 0 0 / 0.16);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

._item_1qkzh_56:active {
	transform: scale(0.98);
}

._item_1qkzh_56:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

/* Thumbnail image */
._thumbnail_1qkzh_93 {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	-o-object-fit: cover;
	   object-fit: cover;
	flex-shrink: 0;
}

/* Icon thumbnail fallback */
._iconThumb_1qkzh_102 {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	color: oklch(0% 0 0 / 0.6);
}

/* Label */
._label_1qkzh_115 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: var(--base-font-weight-medium);
	line-height: 1;
	color: var(--color-text-weak);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._item_1qkzh_56:hover ._label_1qkzh_115 {
	opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	._outer_1qkzh_19 {
		transition: none;
	}

	._item_1qkzh_56 {
		transition: none;
	}
}
/* Sidebar left padding trigger — inside the sidebar, triggers icon state */
._hoverZone_oh6rj_2 {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	z-index: 1;
	pointer-events: auto;
}

/*
 * Expanded zone — covers the expanded pill area + 48px padding.
 * Entering this zone goes straight to expanded state.
 * Leaving it collapses to default.
 */
._expandedZone_oh6rj_17 {
	position: absolute;
	right: 100%; /* right edge touches zone 1's left edge */
	top: 50%;
	transform: translateY(-50%);
	width: 261px; /* expanded pill ~165px + 48px left + 48px right */
	height: 96px; /* pill 48px + 24px top + 24px bottom */
	z-index: 2;
	pointer-events: auto;
}

/*
 * Pill container — positioned inside expandedZone.
 * All sizing controlled by Motion. CSS handles visual/color only.
 */
._pill_oh6rj_32 {
	position: absolute;
	right: -8px; /* pill overlaps sidebar by 8px (original position) */
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	pointer-events: auto;
	overflow: hidden;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.08);
	background: oklch(0% 0 0 / 0.04);
	transition:
		background 0.15s ease,
		box-shadow 0.15s ease;
}

[data-theme="dark"] ._pill_oh6rj_32 {
	background: oklch(100% 0 0 / 0.04);
	box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1);
}

/* Hover visual — only when cursor is directly on the pill */
@media (hover: hover) {
	._pill_oh6rj_32:hover {
		background: oklch(0% 0 0 / 0.08);
		box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
	}

	[data-theme="dark"] ._pill_oh6rj_32:hover {
		background: oklch(100% 0 0 / 0.16);
		box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.2);
	}
}

._pill_oh6rj_32:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

/* Icon — animates in with fade + scale (like the label text) */
._icon_oh6rj_78 {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--color-text-default);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

._pill_oh6rj_32[data-state="icon"] ._icon_oh6rj_78,
._pill_oh6rj_32[data-state="expanded"] ._icon_oh6rj_78 {
	opacity: 0.5;
	transform: scale(1);
}

@media (hover: hover) {
	._pill_oh6rj_32:hover ._icon_oh6rj_78 {
		opacity: 1;
	}
}

/* Label text — reveals from right to left */
._label_oh6rj_103 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: var(--base-font-weight-medium);
	line-height: 1;
	color: var(--color-text-default);
	white-space: nowrap;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	transform: translateX(8px);
	transition:
		opacity 0.3s ease 0.05s,
		max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._pill_oh6rj_32[data-state="expanded"] ._label_oh6rj_103 {
	opacity: 0.5;
	max-width: 120px;
	margin-left: 6px;
	transform: translateX(0);
}

@media (hover: hover) {
	._pill_oh6rj_32:hover ._label_oh6rj_103 {
		opacity: 1;
	}
}

/* Hide on mobile */
@media (max-width: 768px) {
	._hoverZone_oh6rj_2,
	._expandedZone_oh6rj_17 {
		display: none;
	}
}
@property --edge-opacity {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

._overlay_g8xst_7 {
	position: fixed;
	top: 0;
	right: var(--base-spacing-32);
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	pointer-events: none;
}

/* Outer wrapper — edge light gradient border */
._outer_g8xst_19 {
	position: relative;
	pointer-events: auto;
	padding: 1px;
	border-radius: 37px;
	max-height: 71vh;
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(0% 0 0 / calc(var(--edge-opacity, 0) * 0.3)),
		oklch(0% 0 0 / 0.08)
	);
	transition: --edge-opacity 0.3s ease;
}

[data-theme="dark"] ._outer_g8xst_19 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(100% 0 0 / calc(var(--edge-opacity, 0) * 0.25)),
		oklch(100% 0 0 / 0.06)
	);
}

/* Inner surface — glassmorphism */
._inner_g8xst_42 {
	width: 440px;
	max-height: calc(71vh - 2px);
	border-radius: 36px;
	background: oklch(100% 0 0 / 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	overflow: hidden;
}

/* Scrollable content wrapper — mask fades content edges */
._scroll_g8xst_53 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 24px 48px;
	max-height: calc(71vh - 2px);
	overflow-y: auto;
	scrollbar-width: none;
	outline: none;
	mask-image: linear-gradient(
		to bottom,
		transparent 0px,
		black 24px,
		black calc(100% - 24px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0px,
		black 24px,
		black calc(100% - 24px),
		transparent 100%
	);
}

/* Pointer devices: canvas panning works outside sidebar when not hovering */

._scroll_g8xst_53::-webkit-scrollbar {
	display: none;
}

[data-theme="dark"] ._inner_g8xst_42 {
	background: oklch(0% 0 0 / 0.4);
}

/* Header row */
._header_g8xst_89 {
	display: flex;
	align-items: flex-start;
	gap: var(--base-spacing-12);
}

._headerText_g8xst_95 {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
}

._badge_g8xst_103 {
	font-family: var(--base-font-family-mono);
	font-size: 13px;
	line-height: 16px;
	color: var(--color-text-weaker);
}

._title_g8xst_110 {
	font-family: var(--base-font-family-sans);
	font-size: 34px;
	font-weight: var(--base-font-weight-regular);
	line-height: 1;
	color: var(--color-text-default);
	margin: 0;
}

/* Sidebar — badge + close on one line */
._sidebarBadgeRow_g8xst_120 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Sidebar close button — forced hover appearance */
._sidebarBadgeRow_g8xst_120 button {
	background: oklch(0% 0 0 / 0.08);
	color: oklch(0% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] ._sidebarBadgeRow_g8xst_120 button {
	background: oklch(100% 0 0 / 0.16);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

/* Tags */
._tags_g8xst_140 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-spacing-4);
}

._tagOutline_g8xst_146 {
	font-family: var(--base-font-family-sans);
	font-size: 11px;
	font-weight: 300;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 6px;
	background: var(--color-text-default);
	color: var(--color-background-default);
}

._tagFilled_g8xst_157 {
	font-family: var(--base-font-family-sans);
	font-size: 11px;
	font-weight: 300;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 6px;
	background: var(--color-background-default);
	color: var(--color-text-default);
	box-shadow: inset 0 0 0 0.5px var(--color-border-default);
}

/* Summary text */
._summary_g8xst_170 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

/* Content block (image + caption) */
._block_g8xst_179 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Content images */
._image_g8xst_186 {
	width: 100%;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 11px;
	border: 0.5px solid var(--color-border-default);
	display: block;
}

/* Caption text */
._caption_g8xst_196 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

/* ========================
   FULLSCREEN MODE
   ======================== */

._overlayFullscreen_g8xst_208 {
	inset: 0;
	padding: 0;
	margin: 0;
	align-items: stretch;
	pointer-events: auto;
}

._outerFullscreen_g8xst_216 {
	max-height: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: none;
}

._overlayFullscreen_g8xst_208 ._inner_g8xst_42 {
	width: 100%;
	max-height: none;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
}

/* Fullscreen content grid — 3-col base, left 1col / right 2col */
._fullscreenGrid_g8xst_241 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr;
	-moz-column-gap: 12px;
	     column-gap: 12px;
	flex: 1;
	min-height: 0;
	padding: 18px;
}

/* Left column — project info */
._fsLeft_g8xst_252 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	padding-bottom: 0;
}

._fsLeft_g8xst_252::-webkit-scrollbar {
	display: none;
}

._fsBadge_g8xst_267 {
	font-family: var(--base-font-family-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--color-text-weaker);
}

._fsTitle_g8xst_274 {
	font-family: var(--base-font-family-sans);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text-default);
	margin: 0;
	text-wrap: balance;
}

._fsTitleDimmed_g8xst_284 {
	color: var(--color-text-weaker);
}

._fsTitleLegacy_g8xst_288 {
	font-family: var(--base-font-family-sans);
	font-size: 72px;
	font-weight: 300;
	line-height: 1;
	color: var(--color-text-default);
	margin: 0;
}

/* Text info card — floats above layer 1 content */
._fsInfoCard_g8xst_298 {
	background: oklch(0% 0 0 / 0.05);
	border-radius: 24px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-8);
}

[data-theme="dark"] ._fsInfoCard_g8xst_298 {
	background: oklch(100% 0 0 / 0.05);
}

._fsInfoLabel_g8xst_311 {
	font-family: var(--base-font-family-mono);
	font-size: 13px;
	line-height: 1;
	color: var(--color-text-weaker);
}

._fsInfoText_g8xst_318 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-default);
	margin: 0;
}

/* Fullscreen left — tags, sections (mirroring mobile text styling) */
._fsTags_g8xst_327 {
	font-family: var(--base-font-family-sans);
	font-size: 17px;
	line-height: 1.5;
	color: var(--color-text-weaker);
	margin: 0;
}

._fsSection_g8xst_335 {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

._fsSectionLabel_g8xst_341 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

._fsSectionBody_g8xst_349 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-default);
	margin: 0;
	white-space: pre-line;
}

._fsDivider_g8xst_358 {
	width: 100%;
	min-height: 1px;
	height: 1px;
	flex-shrink: 0;
	background: var(--color-text-default);
	opacity: 0.15;
	border-radius: 9999px;
}

/* Right column — images + close */
._fsRight_g8xst_369 {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
}

._fsRight_g8xst_369 > :not(._fsCloseOverlay_g8xst_379) + :not(._fsCloseOverlay_g8xst_379) {
	margin-top: 12px;
}

._fsRight_g8xst_369::-webkit-scrollbar {
	display: none;
}

._fsCloseOverlay_g8xst_379 {
	position: sticky;
	top: 8px;
	z-index: 10;
	align-self: flex-end;
	height: 0;
	overflow: visible;
	margin-right: 8px;
	mix-blend-mode: difference;
}

._fsCloseOverlay_g8xst_379 button {
	background: oklch(100% 0 0 / 0.16);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

._fsGallerySplit_g8xst_404 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

._fsRightScroll_g8xst_410::-webkit-scrollbar {
	display: none;
}

._fsImage_g8xst_414 {
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 18px;
	border: 0.5px solid var(--color-border-default);
	display: block;
}

._fsCaption_g8xst_422 {
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	._outer_g8xst_19 {
		transition: none;
	}
}

/* ========================
   MOBILE FULL-SCREEN
   ======================== */

._mobileOverlay_g8xst_441 {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--base-color-js-chrome-1200);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: none;
	outline: none;
}

[data-theme="dark"] ._mobileOverlay_g8xst_441 {
	background: var(--base-color-white);
}

._mobileOverlay_g8xst_441::-webkit-scrollbar {
	display: none;
}

._mobileContent_g8xst_461 {
	padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px 48px 12px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--color-background-default);
	border-radius: 0 0 24px 24px;
	position: relative;
	z-index: 1;
}

._mobileUpNextArea_g8xst_472 {
	position: sticky;
	bottom: 0;
	padding: 48px 12px calc(24px + 60px + 24px) 12px;
	/* Override theme tokens for inverted area */
	--color-text-default: var(--base-color-white);
	--color-text-weak: var(--base-color-js-chrome-400);
	--color-text-weaker: var(--base-color-js-chrome-600);
	--color-border-default: oklch(100% 0 0 / 0.12);
	color: var(--base-color-white);
}

[data-theme="dark"] ._mobileUpNextArea_g8xst_472 {
	--color-text-default: var(--base-color-js-chrome-1200);
	--color-text-weak: var(--base-color-js-chrome-900);
	--color-text-weaker: var(--base-color-js-chrome-700);
	--color-border-default: oklch(0% 0 0 / 0.08);
	color: var(--base-color-js-chrome-1200);
}

/* Close button — fixed top-right */
._mobileClose_g8xst_493 {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 16px);
	right: 18px;
	z-index: 110;
}

/* Force close button to always show hover state on mobile */
._mobileClose_g8xst_493 button {
	background: oklch(0% 0 0 / 0.08);
	color: oklch(0% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] ._mobileClose_g8xst_493 button {
	background: oklch(100% 0 0 / 0.16);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

/* Staggered content reveal — handled by Motion in TSX */

/* Badge — vertically centered with close button (36px) */
._mBadge_g8xst_516 {
	font-family: var(--base-font-family-mono);
	font-size: 17px;
	line-height: 36px;
	color: var(--color-text-weaker);
}

/* Title + description inline paragraph */
._mTitleBlock_g8xst_524 {
	font-family: var(--base-font-family-sans);
	font-size: 21px;
	font-weight: var(--base-font-weight-regular);
	line-height: 1.4;
	color: var(--color-text-default);
	margin: 0;
}

._mTitleDimmed_g8xst_533 {
	color: var(--color-text-weaker);
}

/* Tags — comma separated */
._mTags_g8xst_538 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-weaker);
	margin: 0;
}

/* Gallery card — glassmorphism */
._mGalleryCard_g8xst_547 {
	border-radius: 24px;
	padding: 6px;
	background: oklch(0% 0 0 / 0.04);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid oklch(0% 0 0 / 0.08);
	display: flex;
	flex-direction: column;
}

/* Spacing between card children — using margin so the reveal div doesn't add gap when collapsed */
._mGalleryCard_g8xst_547 > * + * {
	margin-top: 12px;
}

._mGalleryCard_g8xst_547 > ._mGalleryReveal_g8xst_563 {
	margin-top: 0;
}

._mGalleryCard_g8xst_547 > ._mGalleryExpanded_g8xst_567 {
	margin-top: 12px;
}

[data-theme="dark"] ._mGalleryCard_g8xst_547 {
	background: oklch(100% 0 0 / 0.04);
	border-color: oklch(100% 0 0 / 0.12);
}

._mGalleryHero_g8xst_576,
._mGalleryVideo_g8xst_577,
._mGallerySplitImage_g8xst_578,
._mStandaloneImage_g8xst_579 {
	width: 100%;
	border-radius: 18px;
	border: 0.5px solid var(--color-border-default);
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

._mGalleryHero_g8xst_576,
._mGalleryVideo_g8xst_577 {
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}

._mGalleryVideo_g8xst_577 {
	vertical-align: top;
	background: var(--color-background-default);
}

._mGallerySplitImage_g8xst_578 {
	height: 212px;
}

._mStandaloneImage_g8xst_579 {
	height: 212px;
}

._mGallerySplitRow_g8xst_606 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Gallery expand/collapse — grid row reveal */
._mGalleryReveal_g8xst_563 {
	display: grid;
	grid-template-rows: 0fr;
	transition:
		grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._mGalleryExpanded_g8xst_567 {
	grid-template-rows: 1fr;
}

._mGalleryRevealInner_g8xst_625 {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Images inside the reveal — staggered fade */
._mGalleryRevealImg_g8xst_634 {
	opacity: 0;
	transform: scale(0.97);
	transition:
		opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._mGalleryRevealImgVisible_g8xst_642 {
	opacity: 1;
	transform: scale(1);
}

._mGalleryFooter_g8xst_647 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 0 6px 6px;
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: var(--base-font-weight-medium);
	line-height: 1;
	color: var(--color-text-default);
	background: none;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Expand tap target without changing visual layout */
._mGalleryFooter_g8xst_647::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: -12px;
}

._mGalleryFooterIcon_g8xst_674 {
	width: 24px;
	height: 24px;
	color: var(--color-text-default);
}

/* Text block — label + body */
._mTextBlock_g8xst_681 {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

._mTextLabel_g8xst_687 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

._mTextBody_g8xst_695 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-default);
	margin: 0;
	white-space: pre-line;
}

/* Divider */
._mDivider_g8xst_705 {
	width: 100%;
	height: 1px;
	min-height: 1px;
	flex-shrink: 0;
	background: var(--color-text-default);
	opacity: 0.2;
	border-radius: 9999px;
}

/* CTA links */
._mCtaLink_g8xst_716 {
	color: var(--color-text-default);
	text-decoration: underline;
	-webkit-text-decoration-skip-ink: none;
	        text-decoration-skip-ink: none;
	text-underline-offset: 3px;
}

/* Artifacts block — card + controls outside */
._artifactsBlock_g8xst_724 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Artifact image — mobile */
._mArtifactImage_g8xst_732 {
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 18px;
	display: block;
}

/* Artifact image — desktop fullscreen */
._fsArtifactImage_g8xst_740 {
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 18px;
	display: block;
}

/* Artifact card — desktop fullscreen (glassmorphism wrapper) */
._fsArtifactsCard_g8xst_748 {
	background: oklch(0% 0 0 / 0.04);
	border: 0.5px solid oklch(0% 0 0 / 0.08);
	border-radius: 24px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	width: 100%;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] ._fsArtifactsCard_g8xst_748 {
	background: oklch(100% 0 0 / 0.04);
	border-color: oklch(100% 0 0 / 0.12);
}

/* Controls — outside card, centered */
._artifactsControls_g8xst_766 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-default);
	padding: 0;
}

/* Shared artifact text block */
._artifactText_g8xst_782 {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 6px 12px;
}

._artifactItem_g8xst_789 {
	display: flex;
	flex-direction: column;
}

._recognitionBlock_g8xst_794 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Recognition card */
._recognitionCard_g8xst_801 {
	background: oklch(0% 0 0 / 0.04);
	border: 0.5px solid oklch(0% 0 0 / 0.08);
	border-radius: 24px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

[data-theme="dark"] ._recognitionCard_g8xst_801 {
	background: oklch(100% 0 0 / 0.04);
	border-color: oklch(100% 0 0 / 0.12);
}

._recognitionImage_g8xst_816 {
	width: 100%;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 18px;
	display: block;
}

._recognitionText_g8xst_824 {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 6px;
}

._recognitionTitle_g8xst_831 {
	font-family: var(--base-font-family-sans);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text-default);
	margin: 0;
}

._recognitionDesc_g8xst_840 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-weak);
	margin: 0;
}

/* Up Next — mobile only */
._upNextBlock_g8xst_850 {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

._upNextLabel_g8xst_856 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	font-weight: 400;
	opacity: 0.65;
	margin: 0;
	padding: 0 6px;
}

._upNextCard_g8xst_865 {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background: oklch(100% 0 0 / 0.04);
	border: 0.5px solid var(--color-border-default);
	border-radius: 24px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	text-align: left;
	width: 100%;
	color: inherit;
}

._upNextImage_g8xst_880 {
	width: 100%;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 18px;
	display: block;
}

._upNextText_g8xst_888 {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 6px 0;
}

._upNextTitle_g8xst_895 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-default);
}

._upNextDesc_g8xst_903 {
	font-family: var(--base-font-family-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-default);
	opacity: 0.5;
}

._upNextFooter_g8xst_912 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 6px;
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-default);
}

._recognitionLink_g8xst_923 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px;
	font-family: var(--base-font-family-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-default);
	text-decoration: none;
}
@property --edge-opacity {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

._wrapper_1wf4d_7 {
	position: fixed;
	top: var(--base-spacing-32);
	right: var(--base-spacing-32);
	z-index: 60;
	pointer-events: none;
}

/* Outer wrapper — gradient border via padding gap */
._outer_1wf4d_16 {
	pointer-events: auto;
	padding: 1px;
	border-radius: 19px;
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(0% 0 0 / calc(var(--edge-opacity, 0) * 0.3)),
		oklch(0% 0 0 / 0.08)
	);
	transition: --edge-opacity 0.3s ease;
}

[data-theme="dark"] ._outer_1wf4d_16 {
	background: radial-gradient(
		circle var(--edge-glow-size, 200px) at var(--edge-x, 50%) var(--edge-y, 50%),
		oklch(100% 0 0 / calc(var(--edge-opacity, 0) * 0.25)),
		oklch(100% 0 0 / 0.06)
	);
}

/* Inner surface — glassmorphism */
._inner_1wf4d_37 {
	display: flex;
	align-items: center;
	padding: var(--base-spacing-6);
	border-radius: 18px;
	background: oklch(100% 0 0 / 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] ._inner_1wf4d_37 {
	background: oklch(0% 0 0 / 0.4);
}

/* Button — always in selected/pressed state */
._button_1wf4d_52 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--base-spacing-12);
	border: none;
	border-radius: var(--base-radius-lg);
	background: oklch(0% 0 0 / 0.05);
	color: oklch(0% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

[data-theme="dark"] ._button_1wf4d_52 {
	background: oklch(100% 0 0 / 0.08);
	color: oklch(100% 0 0 / 0.9);
	box-shadow: inset 0 0 0 0.5px oklch(100% 0 0 / 0.2);
}

._button_1wf4d_52:hover {
	background: oklch(0% 0 0 / 0.08);
}

[data-theme="dark"] ._button_1wf4d_52:hover {
	background: oklch(100% 0 0 / 0.16);
}

._button_1wf4d_52:active {
	transform: scale(0.96);
}

._button_1wf4d_52:focus-visible {
	outline: 2px solid var(--base-color-js-blue-600);
	outline-offset: 2px;
}

/* Icon wrapper for AnimatePresence positioning */
._iconWrapper_1wf4d_93 {
	position: relative;
	width: 24px;
	height: 24px;
}

/* Mobile */
@media (max-width: 768px) {
	._wrapper_1wf4d_7 {
		top: 12px;
		right: 12px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	._outer_1wf4d_16 {
		transition: none;
	}

	._button_1wf4d_52 {
		transition: none;
	}

	._themeIcon_1wf4d_117 {
		transition: none;
	}
}
._welcome_124gj_1 {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	overflow: hidden;
}

._bg_124gj_9 {
	position: absolute;
	inset: 0;
	background: #000;
}

[data-theme="light"] ._bg_124gj_9 {
	background: #f5f5f5;
}

._canvas_124gj_19 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

._foreground_124gj_26 {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

._grid_124gj_34 {
	display: grid;
	position: absolute;
}

._cell_124gj_39 {
	border-radius: 1px;
	background: white;
	opacity: 0;
}

[data-theme="light"] ._cell_124gj_39 {
	background: oklch(0% 0 0 / 0.85);
}

._name_124gj_49 {
	position: absolute;
	font-family: var(--base-font-family-mono);
	font-size: 13px;
	font-weight: var(--base-font-weight-medium);
	letter-spacing: 0.2em;
	color: white;
	text-transform: uppercase;
	opacity: 0;
	white-space: nowrap;
}

[data-theme="light"] ._name_124gj_49 {
	color: var(--color-text-default);
}
._expanded_1rqiz_1 {
	display: flex;
	flex-direction: column;
	background: var(--color-container-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-md);
	width: 360px;
	overflow: hidden;
	box-shadow: 0 12px 40px oklch(0% 0 0 / 0.12);
}

._header_1rqiz_12 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--base-spacing-8) var(--base-spacing-12);
}

._badge_1rqiz_19 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

._close_1rqiz_28 {
	font-size: var(--base-font-size-lg);
	line-height: 1;
	background: none;
	border: none;
	color: var(--color-text-weaker);
	cursor: pointer;
	padding: var(--base-spacing-4);
}

._close_1rqiz_28:hover {
	color: var(--color-text-default);
}

._thumbnail_1rqiz_42 {
	height: 160px;
	background: var(--color-container-hover);
}

._body_1rqiz_47 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-8);
	padding: var(--base-spacing-16);
}

._title_1rqiz_54 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-xl);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
	margin: 0;
}

._summary_1rqiz_63 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-relaxed);
	margin: 0;
}

._tags_1rqiz_70 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-spacing-4);
}

._tag_1rqiz_70 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	color: var(--color-text-weaker);
	background: var(--color-container-hover);
	padding: 2px var(--base-spacing-6);
	border-radius: var(--base-radius-xs);
}

._link_1rqiz_85 {
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-default);
	text-decoration: none;
	margin-top: var(--base-spacing-4);
}

._link_1rqiz_85:hover {
	text-decoration: underline;
}
._page_pyudq_1 {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--base-spacing-32) var(--base-spacing-16);
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-48);
}

._section_pyudq_10 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-16);
}

._sectionTitle_pyudq_16 {
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-xs);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-weaker);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
}

._grid_pyudq_26 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--base-spacing-12);
}

/* Project card */
._projectCard_pyudq_33 {
	display: flex;
	flex-direction: column;
	background: var(--color-container-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-md);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
	font: inherit;
	color: inherit;
}

._projectCard_pyudq_33:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
}

._thumbnail_pyudq_54 {
	height: 80px;
	background: var(--color-container-hover);
}

._cardBody_pyudq_59 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-12);
}

/* Generic card (articles) */
._card_pyudq_59 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-6);
	padding: var(--base-spacing-16);
	background: var(--color-container-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-md);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition:
		transform 0.15s,
		border-color 0.15s;
}

._card_pyudq_59:hover {
	transform: scale(1.01);
	border-color: var(--color-text-weaker);
}

/* Pill (links) */
._pill_pyudq_90 {
	display: inline-flex;
	align-items: center;
	gap: var(--base-spacing-6);
	padding: var(--base-spacing-8) var(--base-spacing-16);
	background: var(--color-container-default);
	border: 1px solid var(--color-border-default);
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-default);
	transition: background 0.15s;
}

._pill_pyudq_90:hover {
	background: var(--color-container-hover);
}

/* Chip (social) */
._chip_pyudq_111 {
	display: inline-flex;
	align-items: center;
	padding: var(--base-spacing-8) var(--base-spacing-16);
	background: var(--color-container-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--base-radius-lg);
	cursor: pointer;
	font: inherit;
	font-family: var(--base-font-family-mono);
	font-size: var(--base-font-size-sm);
	color: var(--color-text-default);
	transition: border-color 0.15s;
}

._chip_pyudq_111:hover {
	border-color: var(--color-text-weak);
}

/* Widget card */
._widgetCard_pyudq_131 {
	display: flex;
	flex-direction: column;
	gap: var(--base-spacing-4);
	padding: var(--base-spacing-12) var(--base-spacing-16);
	background: var(--color-container-default);
	border: 1px dashed var(--color-border-default);
	border-radius: var(--base-radius-lg);
}

._widgetIcon_pyudq_141 {
	color: var(--color-text-weaker);
}

/* Shared */
._title_pyudq_146 {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--base-font-line-height-tight);
}

._summary_pyudq_154 {
	font-size: var(--base-font-size-sm);
	color: var(--color-text-weak);
	line-height: var(--base-font-line-height-base);
}

._tags_pyudq_160 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-spacing-4);
	margin-top: var(--base-spacing-4);
}

._tag_pyudq_160 {
	font-family: var(--base-font-family-mono);
	font-size: 0.625rem;
	color: var(--color-text-weaker);
	background: var(--color-container-hover);
	padding: 2px var(--base-spacing-6);
	border-radius: var(--base-radius-xs);
}

/* Responsive */
@media (max-width: 480px) {
	._grid_pyudq_26 {
		grid-template-columns: 1fr;
	}
}
._layout_welge_1 {
	height: 100dvh;
	overflow: hidden;
}

._main_welge_6 {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: auto;
}
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  --base-color-black: oklch(0% 0 0);
  --base-color-js-amber-dark: oklch(58.19% 0.1379 58.95);
  --base-color-js-amber-light: oklch(78% 0.15 65);
  --base-color-js-blue-50: oklch(98% 0.0038 266.4);
  --base-color-js-blue-100: oklch(97.14% 0.006 266.4);
  --base-color-js-blue-200: oklch(94.16% 0.0146 266.4);
  --base-color-js-blue-300: oklch(88.56% 0.032 266.4);
  --base-color-js-blue-400: oklch(82.12% 0.057 266.4);
  --base-color-js-blue-500: oklch(72.32% 0.0993 266.4);
  --base-color-js-blue-600: oklch(61.47% 0.1543 266.4);
  --base-color-js-blue-700: oklch(47.4% 0.237 266.4);
  --base-color-js-blue-800: oklch(40.68% 0.2061 266.4);
  --base-color-js-blue-900: oklch(30.88% 0.1564 266.4);
  --base-color-js-blue-950: oklch(24.44% 0.1238 266.4);
  --base-color-js-blue-1000: oklch(18.84% 0.0952 266.4);
  --base-color-js-blue-1100: oklch(15.86% 0.08 266.4);
  --base-color-js-blue-1200: oklch(15% 0.0759 266.4);
  --base-color-js-chrome-50: oklch(98% 0.0013 230.4);
  --base-color-js-chrome-100: oklch(97.14% 0.0018 230.4);
  --base-color-js-chrome-200: oklch(94.16% 0.0038 230.4);
  --base-color-js-chrome-300: oklch(88.56% 0.006 230.4);
  --base-color-js-chrome-400: oklch(82.12% 0.0101 230.4);
  --base-color-js-chrome-500: oklch(72.32% 0.0168 230.4);
  --base-color-js-chrome-600: oklch(61.47% 0.0151 230.4);
  --base-color-js-chrome-700: oklch(51.53% 0.0134 230.4);
  --base-color-js-chrome-800: oklch(40.68% 0.0111 230.4);
  --base-color-js-chrome-900: oklch(30.88% 0.0088 230.4);
  --base-color-js-chrome-950: oklch(24.44% 0.0073 230.4);
  --base-color-js-chrome-1000: oklch(18.84% 0.0058 230.4);
  --base-color-js-chrome-1100: oklch(15.86% 0.0051 230.4);
  --base-color-js-chrome-1200: oklch(5.8% 0.002 230.4);
  --base-color-js-cobalt-dark: oklch(52.76% 0.1715 254.6);
  --base-color-js-cobalt-light: oklch(72% 0.15 250);
  --base-color-js-green-dark: oklch(52.78% 0.1582 146.7);
  --base-color-js-green-light: oklch(75% 0.17 150);
  --base-color-js-red-dark: oklch(55% 0.19 25);
  --base-color-js-red-light: oklch(72.76% 0.1681 24.99);
  --base-color-js-teal-dark: oklch(50.9% 0.0903 183.7);
  --base-color-js-teal-light: oklch(72% 0.12 185);
  --base-color-js-violet-dark: oklch(50% 0.2 290);
  --base-color-js-violet-light: oklch(72.72% 0.1531 290.6);
  --base-color-white: oklch(100% 0 0);
  --base-font-family-mono: "Fragment Mono", ui-monospace, monospace;
  --base-font-family-sans: "Geist", system-ui, sans-serif;
  --base-font-line-height-base: 1.5;
  --base-font-line-height-relaxed: 1.75;
  --base-font-line-height-tight: 1.2;
  --base-font-size-2xl: 1.5rem;
  --base-font-size-3xl: 2rem;
  --base-font-size-4xl: 2.5rem;
  --base-font-size-5xl: 4rem;
  --base-font-size-base: 1rem;
  --base-font-size-lg: 1.125rem;
  --base-font-size-sm: 0.875rem;
  --base-font-size-xl: 1.25rem;
  --base-font-size-xs: 0.75rem;
  --base-font-weight-medium: 500;
  --base-font-weight-regular: 400;
  --base-radius-lg: 12px;
  --base-radius-md: 8px;
  --base-radius-sm: 4px;
  --base-radius-xl: 16px;
  --base-radius-xs: 6px;
  --base-spacing-4: 4px;
  --base-spacing-6: 6px;
  --base-spacing-8: 8px;
  --base-spacing-12: 12px;
  --base-spacing-16: 16px;
  --base-spacing-24: 24px;
  --base-spacing-32: 32px;
  --base-spacing-48: 48px;
  --base-spacing-64: 64px;
  --base-spacing-96: 96px;
  /* primary background color */
  --color-background-default: var(--base-color-white);
  /* default border color */
  --color-border-default: var(--base-color-js-chrome-300);
  /* default container color */
  --color-container-default: var(--base-color-js-chrome-50);
  /* hover container color */
  --color-container-hover: var(--base-color-js-chrome-100);
  /* inverse container color - dark on light */
  --color-container-inverse-default: var(--base-color-js-chrome-1100);
  /* concept link hover color */
  --color-link-concept: var(--base-color-js-red-dark);
  /* design system link hover color */
  --color-link-design-system: var(--base-color-js-violet-dark);
  /* Flow link hover color */
  --color-link-flow: var(--base-color-js-green-dark);
  /* LinkedIn link hover color */
  --color-link-linkedin: var(--base-color-js-teal-dark);
  /* MyŠkoda link hover color */
  --color-link-myskoda: var(--base-color-js-amber-dark);
  /* @slonkaj link hover color */
  --color-link-slonkaj: var(--base-color-js-cobalt-dark);
  /* primary text color */
  --color-text-default: var(--base-color-js-chrome-1200);
  /* disabled text color */
  --color-text-disabled: var(--base-color-js-chrome-600);
  --color-text-inverse-default: var(--base-color-white);
  /* disabled inverse text color */
  --color-text-inverse-disabled: var(--base-color-js-chrome-700);
  /* weak inverse text color */
  --color-text-inverse-weak: var(--base-color-js-chrome-400);
  /* weaker inverse text color */
  --color-text-inverse-weaker: var(--base-color-js-chrome-600);
  /* secondary text color */
  --color-text-weak: var(--base-color-js-chrome-900);
  /* tertiary text color */
  --color-text-weaker: var(--base-color-js-chrome-700);
}

@media (color-gamut: p3) {
  :root {
    --base-color-js-amber-dark: oklch(58.09% 0.1529 62);
    /* MyŠkoda link hover color */
    --color-link-myskoda: var(--base-color-js-amber-dark);
    --base-color-js-cobalt-dark: oklch(52% 0.18 250);
    /* @slonkaj link hover color */
    --color-link-slonkaj: var(--base-color-js-cobalt-dark);
    --base-color-js-green-dark: oklch(52% 0.17 150);
    /* Flow link hover color */
    --color-link-flow: var(--base-color-js-green-dark);
    --base-color-js-red-light: oklch(73% 0.17 25);
    /* concept link hover color */
    --color-link-concept: var(--base-color-js-red-dark);
    --base-color-js-teal-dark: oklch(50.04% 0.1192 185);
    /* LinkedIn link hover color */
    --color-link-linkedin: var(--base-color-js-teal-dark);
    --base-color-js-violet-light: oklch(73% 0.16 290);
    /* design system link hover color */
    --color-link-design-system: var(--base-color-js-violet-dark);
  }
}

@media (color-gamut: rec2020) {
  :root {
    --base-color-js-amber-dark: oklch(58.06% 0.1542 62.62);
    /* MyŠkoda link hover color */
    --color-link-myskoda: var(--base-color-js-amber-dark);
    --base-color-js-cobalt-dark: oklch(52% 0.18 250);
    /* @slonkaj link hover color */
    --color-link-slonkaj: var(--base-color-js-cobalt-dark);
    --base-color-js-green-dark: oklch(52% 0.17 150);
    /* Flow link hover color */
    --color-link-flow: var(--base-color-js-green-dark);
    --base-color-js-red-light: oklch(73% 0.17 25);
    /* concept link hover color */
    --color-link-concept: var(--base-color-js-red-dark);
    --base-color-js-teal-dark: oklch(50% 0.12 185);
    /* LinkedIn link hover color */
    --color-link-linkedin: var(--base-color-js-teal-dark);
    --base-color-js-violet-light: oklch(73% 0.16 290);
    /* design system link hover color */
    --color-link-design-system: var(--base-color-js-violet-dark);
  }
}

[data-theme="light"] {
  /* primary background color */
  --color-background-default: var(--base-color-white);
  /* default border color */
  --color-border-default: var(--base-color-js-chrome-300);
  /* default container color */
  --color-container-default: var(--base-color-js-chrome-50);
  /* hover container color */
  --color-container-hover: var(--base-color-js-chrome-100);
  /* inverse container color - dark on light */
  --color-container-inverse-default: var(--base-color-js-chrome-1100);
  /* concept link hover color */
  --color-link-concept: var(--base-color-js-red-dark);
  /* design system link hover color */
  --color-link-design-system: var(--base-color-js-violet-dark);
  /* Flow link hover color */
  --color-link-flow: var(--base-color-js-green-dark);
  /* LinkedIn link hover color */
  --color-link-linkedin: var(--base-color-js-teal-dark);
  /* MyŠkoda link hover color */
  --color-link-myskoda: var(--base-color-js-amber-dark);
  /* @slonkaj link hover color */
  --color-link-slonkaj: var(--base-color-js-cobalt-dark);
  /* primary text color */
  --color-text-default: var(--base-color-js-chrome-1200);
  /* disabled text color */
  --color-text-disabled: var(--base-color-js-chrome-600);
  --color-text-inverse-default: var(--base-color-white);
  /* disabled inverse text color */
  --color-text-inverse-disabled: var(--base-color-js-chrome-700);
  /* weak inverse text color */
  --color-text-inverse-weak: var(--base-color-js-chrome-400);
  /* weaker inverse text color */
  --color-text-inverse-weaker: var(--base-color-js-chrome-600);
  /* secondary text color */
  --color-text-weak: var(--base-color-js-chrome-900);
  /* tertiary text color */
  --color-text-weaker: var(--base-color-js-chrome-700);
}

[data-theme="dark"] {
  /* primary background color */
  --color-background-default: var(--base-color-js-chrome-1200);
  /* default border color */
  --color-border-default: var(--base-color-js-chrome-950);
  /* default container color */
  --color-container-default: var(--base-color-js-chrome-1100);
  /* hover container color */
  --color-container-hover: var(--base-color-js-chrome-1000);
  /* inverse container color - dark on light */
  --color-container-inverse-default: var(--base-color-js-chrome-50);
  /* concept link hover color */
  --color-link-concept: var(--base-color-js-red-light);
  /* design system link hover color */
  --color-link-design-system: var(--base-color-js-violet-light);
  /* Flow link hover color */
  --color-link-flow: var(--base-color-js-green-light);
  /* LinkedIn link hover color */
  --color-link-linkedin: var(--base-color-js-teal-light);
  /* MyŠkoda link hover color */
  --color-link-myskoda: var(--base-color-js-amber-light);
  /* @slonkaj link hover color */
  --color-link-slonkaj: var(--base-color-js-cobalt-light);
  /* primary text color */
  --color-text-default: var(--base-color-white);
  /* disabled text color */
  --color-text-disabled: var(--base-color-js-chrome-700);
  --color-text-inverse-default: var(--base-color-js-chrome-1200);
  /* disabled inverse text color */
  --color-text-inverse-disabled: var(--base-color-js-chrome-600);
  /* weak inverse text color */
  --color-text-inverse-weak: var(--base-color-js-chrome-900);
  /* weaker inverse text color */
  --color-text-inverse-weaker: var(--base-color-js-chrome-700);
  /* secondary text color */
  --color-text-weak: var(--base-color-js-chrome-400);
  /* tertiary text color */
  --color-text-weaker: var(--base-color-js-chrome-600);
}

@font-face {
	font-family: "Geist";
	src: url("/fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

::-moz-selection {
	background-color: #000 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

::selection {
	background-color: #000 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

[data-theme="dark"] ::-moz-selection, [data-theme="dark"]::-moz-selection {
	background-color: #fff !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

[data-theme="dark"] ::selection,
[data-theme="dark"]::selection {
	background-color: #fff !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

/* Inverse selection for elements with inverted text/bg colors */

[data-selection-invert] ::-moz-selection, [data-selection-invert]::-moz-selection {
	background-color: #fff !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

[data-selection-invert] ::selection,
[data-selection-invert]::selection {
	background-color: #fff !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

[data-theme="dark"] [data-selection-invert] ::-moz-selection, [data-theme="dark"] [data-selection-invert]::-moz-selection {
	background-color: #000 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

[data-theme="dark"] [data-selection-invert] ::selection,
[data-theme="dark"] [data-selection-invert]::selection {
	background-color: #000 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

body {
	font-family: var(--base-font-family-sans);
	font-size: var(--base-font-size-base);
	font-weight: var(--base-font-weight-regular);
	line-height: var(--base-font-line-height-base);
	color: var(--color-text-default);
	background-color: var(--color-background-default);
	min-height: 100dvh;
}

#root {
	min-height: 100dvh;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Smooth position transitions when nodes get pushed */

.react-flow__node {
	transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Hide React Flow connection handles — they exist for edge routing only */

.react-flow__handle {
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: none !important;
	pointer-events: none !important;
}