@weasel-js/labkit 0.1.0

package/dist/styles.css

@@ -0,0 +1,1224 @@
+:root {
+  --lk-bg: #0a0a14;
+  --lk-bg-elevated: rgba(20, 20, 36, 0.55);
+  --lk-bg-canvas: #02020a;
+  --lk-border: rgba(255, 255, 255, 0.14);
+  --lk-divider: rgba(255, 255, 255, 0.08);
+  --lk-glass-blur: 12px;
+  --lk-text: #e8e8f0;
+  --lk-text-muted: #a8a8c0;
+  --lk-text-disabled: #5a5a78;
+  --lk-accent: #b08adb;
+  --lk-accent-hover: #c6a3ee;
+  --lk-focus-ring: rgba(176, 138, 219, 0.45);
+  --lk-swatch-green: #2fdd18;
+  --lk-swatch-pink: #ff5885;
+  --lk-swatch-cyan: #00dfff;
+  --lk-swatch-gold: #dcb700;
+  --lk-swatch-amber: #ff8c00;
+  --lk-swatch-violet: #a497ff;
+  --lk-swatch-mint: #00e7af;
+  --lk-swatch-sky: #00b8ff;
+  --lk-swatch-orange: #ff6b00;
+  --lk-swatch-magenta: #ff6eff;
+  --lk-space-nebula: radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%);
+  --lk-radius: 6px;
+  --lk-radius-sm: 3px;
+  --lk-radius-lg: 14px;
+  --lk-control-height: 28px;
+  --lk-spacing-xs: 4px;
+  --lk-spacing-sm: 8px;
+  --lk-spacing-md: 12px;
+  --lk-spacing-lg: 16px;
+  --lk-font: 'Oswald', system-ui, -apple-system, sans-serif;
+  --lk-font-mono: ui-monospace, SFMono-Regular, monospace;
+  --lk-font-display: 'Oswald', system-ui, sans-serif;
+  --lk-font-size: 13px;
+  --lk-font-size-sm: 11px;
+  --lk-font-weight-light: 300;
+  --lk-font-weight-medium: 500;
+  --lk-font-weight-bold: 700;
+  --lk-z-toolbar: 10;
+  --lk-z-overlay: 20;
+  --lk-z-modal: 30;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --lk-bg: #fafaf7;
+    --lk-bg-elevated: #ffffff;
+    --lk-bg-canvas: #f0ebe2;
+    --lk-border: #c9bba5;
+    --lk-divider: rgba(0, 0, 0, 0.08);
+    --lk-text: #2a2018;
+    --lk-text-muted: #6b5c4a;
+    --lk-text-disabled: #a89b85;
+    --lk-accent: #a86f3c;
+    --lk-accent-hover: #c2854f;
+    --lk-focus-ring: rgba(168, 111, 60, 0.35);
+  }
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+.lk-root {
+  font-family: var(--lk-font);
+  font-size: var(--lk-font-size);
+  font-weight: var(--lk-font-weight-light, 300);
+  color: var(--lk-text);
+  background: var(--lk-bg);
+  line-height: 1.4;
+}
+.lk-root *,
+.lk-root *::before,
+.lk-root *::after {
+  box-sizing: border-box;
+}
+.lk-root button {
+  font: inherit;
+  color: inherit;
+  background: var(--lk-bg-elevated);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius);
+  height: var(--lk-control-height);
+  padding: 0 var(--lk-spacing-md);
+  cursor: pointer;
+  backdrop-filter: blur(var(--lk-glass-blur, 0));
+  -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+}
+.lk-root button:hover {
+  border-color: var(--lk-accent);
+  color: var(--lk-accent);
+}
+.lk-root button:focus-visible {
+  outline: 2px solid var(--lk-focus-ring);
+  outline-offset: 1px;
+}
+.lk-root button:disabled {
+  color: var(--lk-text-disabled);
+  cursor: not-allowed;
+}
+.lk-root input[type="range"] {
+  accent-color: var(--lk-accent);
+}
+.lk-lab {
+  position: relative;
+  isolation: isolate;
+  background: var(--lk-space-nebula, var(--lk-bg));
+  background-attachment: fixed;
+}
+.lk-lab::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: radial-gradient(1.2px 1.2px at 4% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 9% 64%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 14% 36%, #fff, transparent 60%), radial-gradient(1px 1px at 19% 82%, #cce, transparent 60%), radial-gradient(0.8px 0.8px at 23% 28%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 28% 55%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 12%, #ffe, transparent 60%), radial-gradient(1.2px 1.2px at 37% 70%, #fff, transparent 60%), radial-gradient(0.7px 0.7px at 42% 40%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 47% 88%, #fff, transparent 60%), radial-gradient(1px 1px at 52% 22%, #cef, transparent 60%), radial-gradient(1.3px 1.3px at 57% 60%, #fff, transparent 60%), radial-gradient(0.9px 0.9px at 62% 35%, #fff, transparent 60%), radial-gradient(1.1px 1.1px at 66% 75%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 71% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 50%, #fff, transparent 60%), radial-gradient(0.8px 0.8px at 81% 80%, #ffe, transparent 60%), radial-gradient(1.3px 1.3px at 85% 25%, #fff, transparent 60%), radial-gradient(1px 1px at 89% 62%, #cce, transparent 60%), radial-gradient(1.5px 1.5px at 93% 38%, #fff, transparent 60%), radial-gradient(0.9px 0.9px at 97% 78%, #fff, transparent 60%);
+  background-repeat: no-repeat;
+}
+.lk-theme-light.lk-lab {
+  background: var(--lk-bg);
+  background-attachment: scroll;
+}
+.lk-theme-light.lk-lab::before {
+  display: none;
+}
+.lk-lab h1,
+.lk-lab h2,
+.lk-lab h3 {
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+}
+.lk-workspace-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--lk-grid-cols, 1), 1fr);
+  grid-template-rows: repeat(var(--lk-grid-rows, 1), 1fr);
+  gap: var(--lk-spacing-md);
+  width: 100%;
+  height: 100%;
+}
+.lk-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background: var(--lk-bg);
+}
+.lk-shell-header {
+  display: flex;
+  align-items: center;
+  gap: var(--lk-spacing-md);
+  padding: var(--lk-spacing-sm) var(--lk-spacing-md);
+  background: var(--lk-bg-elevated);
+  border-bottom: 1px solid var(--lk-border);
+  z-index: var(--lk-z-toolbar);
+}
+.lk-shell-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--lk-text);
+}
+.lk-shell-header-actions {
+  margin-left: auto;
+  display: flex;
+  gap: var(--lk-spacing-sm);
+}
+.lk-shell-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--lk-spacing-md);
+}
+.lk-shell-footer {
+  border-top: 1px solid var(--lk-border);
+  padding: var(--lk-spacing-xs) var(--lk-spacing-md);
+  background: var(--lk-bg-elevated);
+  color: var(--lk-text-muted);
+  font-size: var(--lk-font-size-sm);
+}
+.lk-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--lk-spacing-sm);
+  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
+  background: var(--lk-bg-elevated);
+  border-bottom: 1px solid var(--lk-border);
+  min-height: calc(var(--lk-control-height) + 2 * var(--lk-spacing-xs));
+}
+.lk-toolbar-title {
+  font-weight: 600;
+  color: var(--lk-text);
+  margin-right: var(--lk-spacing-sm);
+}
+.lk-toolbar-spacer {
+  flex: 1;
+}
+.lk-toolbar-button {
+  height: var(--lk-control-height);
+  padding: 0 var(--lk-spacing-sm);
+  font-size: var(--lk-font-size);
+  color: var(--lk-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--lk-radius);
+  cursor: pointer;
+}
+.lk-toolbar-button:hover:not(:disabled) {
+  background: var(--lk-bg);
+  border-color: var(--lk-border);
+}
+.lk-toolbar-button:focus-visible {
+  outline: 2px solid var(--lk-focus-ring);
+  outline-offset: 1px;
+}
+.lk-toolbar-button:disabled {
+  color: var(--lk-text-disabled);
+  cursor: not-allowed;
+}
+.lk-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  background: var(--lk-bg-elevated);
+  border-left: 1px solid var(--lk-border);
+  transition: width 150ms ease;
+}
+.lk-sidebar--collapsed {
+  width: 32px;
+}
+.lk-sidebar-header {
+  display: flex;
+  align-items: center;
+  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
+  border-bottom: 1px solid var(--lk-divider);
+  min-height: var(--lk-control-height);
+}
+.lk-sidebar-title {
+  flex: 1;
+  font-weight: 600;
+  color: var(--lk-text);
+  font-size: var(--lk-font-size);
+}
+.lk-sidebar--collapsed .lk-sidebar-title {
+  display: none;
+}
+.lk-sidebar-toggle {
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--lk-radius-sm);
+  color: var(--lk-text-muted);
+  cursor: pointer;
+}
+.lk-sidebar-toggle:hover {
+  background: var(--lk-bg);
+  color: var(--lk-text);
+}
+.lk-sidebar-body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--lk-spacing-sm);
+}
+.lk-sidebar--collapsed .lk-sidebar-body {
+  display: none;
+}
+.lk-status-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--lk-spacing-md);
+  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
+  background: var(--lk-bg-elevated);
+  border-top: 1px solid var(--lk-border);
+  font-size: var(--lk-font-size-sm);
+  color: var(--lk-text-muted);
+  font-family: var(--lk-font-mono);
+}
+.lk-status-bar-section {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lk-spacing-xs);
+  padding: 0 var(--lk-spacing-xs);
+  border-right: 1px solid var(--lk-divider);
+}
+.lk-status-bar-section:last-child {
+  border-right: none;
+}
+.lk-fps-meter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lk-spacing-xs);
+  font-family: var(--lk-font-mono);
+  font-size: var(--lk-font-size-sm);
+  color: var(--lk-text-muted);
+}
+.lk-fps-meter-value {
+  color: var(--lk-text);
+  min-width: 2.5ch;
+  text-align: right;
+}
+.lk-scale-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lk-spacing-xs);
+  font-family: var(--lk-font-mono);
+  font-size: var(--lk-font-size-sm);
+  color: var(--lk-text-muted);
+}
+.lk-scale-indicator-bar {
+  height: 6px;
+  border: 1px solid var(--lk-text-muted);
+  border-top: none;
+  background: linear-gradient(to right, var(--lk-text-muted) 1px, transparent 1px, transparent calc(100% - 1px), var(--lk-text-muted) calc(100% - 1px));
+}
+.lk-scale-indicator-label {
+  white-space: nowrap;
+}
+.lk-lab {
+  height: 100%;
+}
+.lk-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--lk-bg);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius);
+  overflow: hidden;
+}
+.lk-workspace__body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.lk-workspace__sidebar {
+  flex-shrink: 0;
+}
+.lk-workspace__content {
+  flex: 1;
+  overflow: auto;
+}
+.lk-workspace__toolbar {
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--lk-divider);
+}
+.lk-workspace__status {
+  flex-shrink: 0;
+  border-top: 1px solid var(--lk-divider);
+}
+.lk-workspace--unknown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lk-text-muted);
+  font-size: var(--lk-font-size-sm);
+}
+.lk-toolbar__zoom-label {
+  font-size: var(--lk-font-size-sm);
+  color: var(--lk-text-muted);
+  padding: 0 var(--lk-space-2);
+}
+.lk-toolbar__load-select {
+  font-size: var(--lk-font-size-sm);
+}
+.lk-sidebar__placeholder {
+  padding: var(--lk-space-2);
+  color: var(--lk-text-muted);
+  font-size: var(--lk-font-size-sm);
+}
+.lk-control-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lk-spacing-sm, 8px);
+  padding: var(--lk-spacing-sm, 8px);
+}
+.lk-control-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lk-spacing-xs, 4px);
+}
+.lk-control-row--inline {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--lk-spacing-sm, 8px);
+}
+.lk-control-label {
+  font-size: var(--lk-font-size-sm, 12px);
+  color: var(--lk-color-text, #222);
+}
+.lk-control-input {
+  width: 100%;
+  background: var(--lk-color-surface, #fff);
+  color: var(--lk-color-text, #222);
+  border: 1px solid var(--lk-color-border, #ccc);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+.lk-control-input--range {
+  padding: 0;
+  border: none;
+}
+.lk-control-input--checkbox {
+  width: auto;
+}
+.lk-control-input--color {
+  width: 40px;
+  height: 24px;
+  padding: 0;
+}
+.lk-control-slider-value {
+  font-size: var(--lk-font-size-sm, 12px);
+  font-variant-numeric: tabular-nums;
+  color: var(--lk-color-text-muted, #666);
+  min-width: 3ch;
+  text-align: right;
+}
+.lk-control-slider-row {
+  display: flex;
+  align-items: center;
+  gap: var(--lk-spacing-sm, 8px);
+}
+.lk-canvas-stack {
+  position: relative;
+  overflow: hidden;
+  background: var(--lk-color-canvas-bg, #f6f6f6);
+  touch-action: none;
+}
+.lk-canvas-stack__canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.lk-canvas-stack__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.lk-canvas-stack__overlay > * {
+  pointer-events: auto;
+}
+.lk-layer-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--lk-spacing-sm, 8px);
+}
+.lk-layer-list__empty {
+  color: var(--lk-color-text-muted, #888);
+  font-size: var(--lk-font-size-sm, 12px);
+  font-style: italic;
+}
+.lk-layer-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--lk-spacing-sm, 8px);
+  padding: 4px 6px;
+  border-radius: 3px;
+  user-select: none;
+}
+.lk-layer-list__row:hover {
+  background: var(--lk-color-hover, rgba(0, 0, 0, 0.04));
+}
+.lk-layer-list__row--dragging {
+  background: var(--lk-color-active, rgba(0, 0, 0, 0.08));
+  opacity: 0.7;
+}
+.lk-layer-list__row--pinned {
+  opacity: 0.7;
+}
+.lk-layer-list__handle {
+  cursor: grab;
+  color: var(--lk-color-text-muted, #888);
+  font-family: monospace;
+}
+.lk-layer-list__handle:active {
+  cursor: grabbing;
+}
+.lk-layer-list__lock {
+  color: var(--lk-color-text-muted, #888);
+}
+.lk-layer-list__label {
+  flex: 1;
+  font-size: var(--lk-font-size-sm, 12px);
+}
+.lk-palette {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--lk-spacing-sm, 8px);
+  padding: var(--lk-spacing-sm, 8px);
+}
+.lk-palette__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: var(--lk-spacing-sm, 8px);
+  background: var(--lk-color-surface, #fff);
+  border: 1px solid var(--lk-color-border, #d0d0d0);
+  border-radius: 4px;
+  cursor: grab;
+  font: inherit;
+  color: inherit;
+  user-select: none;
+  touch-action: none;
+}
+.lk-palette__item:hover {
+  background: var(--lk-color-surface-hover, #f4f4f4);
+}
+.lk-palette__item:active {
+  cursor: grabbing;
+}
+.lk-palette__label {
+  pointer-events: none;
+}
+.lk-drag-ghost {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  padding: 4px 8px;
+  background: var(--lk-color-surface, #fff);
+  border: 1px solid var(--lk-color-border, #999);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  font: inherit;
+  color: inherit;
+  opacity: 0.9;
+}
+.lk-drag-ghost__label {
+  white-space: nowrap;
+}
+.lk-property-panel {
+  background: var(--lk-bg-elevated);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-lg, 14px);
+  padding: 14px 16px;
+  backdrop-filter: blur(var(--lk-glass-blur, 0));
+  -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+}
+.lk-property-panel__title {
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 1.05rem;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  color: var(--lk-text);
+  margin: 0 0 12px;
+}
+.lk-property-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 18px;
+  row-gap: 6px;
+  align-items: stretch;
+}
+.lk-property-list:not(.lk-property-list--pairs) > :not(.lk-property-row--color) {
+  grid-column: 1 / -1;
+}
+.lk-property-list--pairs > * {
+  min-width: 0;
+}
+.lk-property-list--pairs > .lk-property-list__span,
+.lk-property-list--pairs > .lk-subpanel,
+.lk-property-list--pairs > h3 {
+  grid-column: 1 / -1;
+}
+.lk-property-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+.lk-property-row:has(> input[type='range']) {
+  justify-content: flex-end;
+}
+.lk-property-row:has(> input[type='range']) > .lk-property-row__label {
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: -4px;
+}
+.lk-property-row > input[type='range'] {
+  margin-top: auto;
+}
+.lk-property-row__label {
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 0.78rem;
+  line-height: 1.2;
+  color: var(--lk-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.lk-property-row__readout {
+  font-style: normal;
+  font-weight: var(--lk-font-weight-medium, 500);
+  color: var(--lk-accent);
+  margin-left: auto;
+}
+.lk-property-row__readout-input {
+  font: inherit;
+  font-weight: var(--lk-font-weight-medium, 500);
+  line-height: 1;
+  color: var(--lk-accent);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 1px 0;
+  margin: 0;
+  width: calc(5em - 24px);
+  text-align: right;
+  cursor: text;
+  outline: none;
+  transition: background 80ms ease, border-color 80ms ease;
+  -moz-appearance: textfield;
+}
+.lk-property-row__readout-input:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.lk-property-row__readout-input:focus {
+  background: rgba(0, 0, 0, 0.4);
+  border-color: var(--lk-accent);
+}
+.lk-property-row__readout-input::-webkit-inner-spin-button,
+.lk-property-row__readout-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.lk-property-row__readout-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+.lk-property-row__readout-unit {
+  color: var(--lk-text-muted);
+  font-size: 0.78em;
+  line-height: 1;
+  pointer-events: none;
+}
+.lk-property-row__readout-group sup {
+  color: var(--lk-text-muted);
+  font-size: 0.7em;
+  pointer-events: none;
+}
+.lk-property-row input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  width: 100%;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.lk-property-row input[type='range']::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--lk-accent) 18%, transparent);
+}
+.lk-property-row input[type='range']::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--lk-accent) 18%, transparent);
+}
+.lk-property-row input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--lk-accent) 70%, transparent);
+  border: none;
+  margin-top: -2px;
+}
+.lk-property-row input[type='range']::-moz-range-thumb {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--lk-accent) 70%, transparent);
+  border: none;
+}
+.lk-property-row--inline {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.lk-property-row--inline .lk-property-row__label {
+  flex: 0 0 auto;
+}
+.lk-property-row--inline > input,
+.lk-property-row--inline > select,
+.lk-property-row--inline > .lk-property-row__toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.lk-property-row--inline input[type='range'] {
+  width: auto;
+}
+.lk-property-row input[type='text']:not(.lk-property-row__readout-input),
+.lk-property-row input[type='number'] {
+  background: rgba(0, 0, 0, 0.35);
+  color: var(--lk-text);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-sm);
+  padding: 6px 8px;
+  font: 400 0.85rem/1 var(--lk-font);
+}
+.lk-property-row input[type='text']:not(.lk-property-row__readout-input):focus,
+.lk-property-row input[type='number']:focus {
+  outline: 1px solid var(--lk-accent);
+}
+.lk-property-row select {
+  background: transparent;
+  color: var(--lk-text);
+  border: 0;
+  border-radius: 0;
+  padding: 2px 0;
+  font: 400 0.85rem/1 var(--lk-font);
+  cursor: pointer;
+}
+.lk-property-row select:focus {
+  outline: 1px solid var(--lk-accent);
+  outline-offset: 2px;
+}
+.lk-property-row--color {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+  align-content: end;
+  column-gap: 8px;
+  row-gap: 0;
+  min-width: 0;
+}
+.lk-property-row--color .lk-property-row__label {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  flex: initial;
+  min-width: 0;
+}
+.lk-property-row--color input[type='color'] {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+  box-sizing: border-box;
+  width: 36px;
+  height: 18px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--lk-radius-sm);
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.lk-property-row--color input[type='range'].lk-property-row__alpha {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  height: 12px;
+  width: 100%;
+  margin: 0;
+}
+.lk-property-row--color input[type='range'].lk-property-row__alpha::-webkit-slider-runnable-track {
+  background: color-mix(in srgb, var(--lk-accent) 10%, transparent);
+}
+.lk-property-row--color input[type='range'].lk-property-row__alpha::-moz-range-track {
+  background: color-mix(in srgb, var(--lk-accent) 10%, transparent);
+}
+.lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha::-webkit-slider-runnable-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+.lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha::-moz-range-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+.lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha::-webkit-slider-thumb {
+  background: transparent;
+}
+.lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha::-moz-range-thumb {
+  background: transparent;
+}
+.lk-property-row--checkbox {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.lk-property-row--checkbox .lk-property-row__label {
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 0.85rem;
+  color: var(--lk-text);
+  order: 1;
+}
+.lk-property-row--checkbox input[type='checkbox'] {
+  accent-color: var(--lk-accent);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+.lk-property-row__toggle {
+  display: flex;
+  width: 100%;
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-sm);
+  overflow: hidden;
+}
+.lk-property-row__toggle-button {
+  flex: 1;
+  height: 26px;
+  padding: 0 8px;
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--lk-text-muted);
+  border: 0;
+  border-radius: 0;
+  font: 400 0.78rem/1 var(--lk-font);
+  cursor: pointer;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.lk-property-row__toggle-button + .lk-property-row__toggle-button {
+  border-left: 1px solid var(--lk-border);
+}
+.lk-property-row__toggle-button:hover {
+  color: var(--lk-text);
+  border-color: var(--lk-border);
+}
+.lk-property-row__toggle-button--selected {
+  background: var(--lk-accent);
+  color: #0a0a14;
+  font-weight: var(--lk-font-weight-medium, 500);
+}
+.lk-property-row__toggle-button--selected:hover {
+  color: #0a0a14;
+}
+.lk-subpanel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 10px;
+  row-gap: 3px;
+  align-items: stretch;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.lk-subpanel > * {
+  min-width: 0;
+}
+.lk-subpanel > .lk-subpanel__title,
+.lk-subpanel > .lk-property-list__span {
+  grid-column: 1 / -1;
+}
+.lk-subpanel__title {
+  font-family: var(--lk-font-display);
+  font-weight: 400;
+  font-size: 0.72rem;
+  line-height: 1;
+  color: var(--lk-text);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0;
+  padding: 6px 0 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.lk-subpanel__title > span {
+  flex: 0 0 auto;
+}
+.lk-subpanel__title > hr {
+  flex: 1 1 auto;
+  border: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  margin: 0;
+}
+.lk-effect-card {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-sm);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.lk-effect-card.is-dragging {
+  opacity: 0.45;
+}
+.lk-effect-card.is-expanded {
+  background: rgba(0, 0, 0, 0.3);
+}
+.lk-effect-card.has-accent {
+  --lk-accent: var(--lk-panel-accent);
+  background: color-mix(in srgb, var(--lk-panel-accent) 4%, rgba(0, 0, 0, 0.28));
+  border-color: color-mix(in srgb, var(--lk-panel-accent) 28%, var(--lk-border));
+  border-left-width: 4px;
+  border-left-color: var(--lk-panel-accent);
+}
+.lk-effect-card.has-accent.is-expanded {
+  background: color-mix(in srgb, var(--lk-panel-accent) 5%, rgba(0, 0, 0, 0.35));
+}
+.lk-effect-card.has-accent .lk-effect-card__head {
+  background: color-mix(in srgb, var(--lk-panel-accent) 38%, rgba(0, 0, 0, 0.4));
+}
+.lk-effect-card.has-accent .lk-effect-card__head:hover {
+  background: color-mix(in srgb, var(--lk-panel-accent) 48%, rgba(0, 0, 0, 0.35));
+}
+.lk-effect-card__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 10px;
+  cursor: pointer;
+  user-select: none;
+}
+.lk-effect-card__head:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+.lk-effect-card__handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lk-text-muted);
+  cursor: grab;
+  padding: 0 2px;
+}
+.lk-effect-card__handle:active {
+  cursor: grabbing;
+}
+.lk-effect-card__index-badge {
+  appearance: none;
+  border: 0;
+  background: none;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  min-width: 14px;
+  padding: 0 2px;
+  color: var(--lk-panel-accent, var(--lk-text-muted));
+  font-size: 14px;
+  font-weight: 700;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  line-height: 1;
+}
+.lk-effect-card__title {
+  font-family: var(--lk-font-display);
+  font-weight: 500;
+  font-size: 0.9rem;
+  line-height: 1;
+  color: var(--lk-text);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.lk-effect-card__primary {
+  font: 400 0.75rem/1 var(--lk-font);
+  color: var(--lk-text);
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-sm);
+  padding: 2px 6px;
+  margin-left: auto;
+}
+.lk-effect-card__head .lk-effect-card__remove,
+.lk-effect-card__head .lk-effect-card__primary + .lk-effect-card__remove {
+  margin-left: auto;
+}
+.lk-effect-card__head .lk-effect-card__primary ~ .lk-effect-card__remove {
+  margin-left: 4px;
+}
+.lk-effect-card__remove {
+  background: transparent;
+  color: var(--lk-text-muted);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 22px;
+  height: 22px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.lk-effect-card__remove:hover {
+  color: #ffb3a8;
+  border-color: rgba(240, 68, 56, 0.4);
+  background: rgba(240, 68, 56, 0.08);
+}
+.lk-effect-card__body {
+  padding: 4px 12px 12px;
+  border-top: 1px solid var(--lk-border);
+}
+.lk-effect-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.lk-effect-card-list__wrap {
+  position: relative;
+}
+.lk-effect-card-list__drop-hint {
+  height: 0;
+  border-top: 2px solid var(--lk-accent);
+  border-radius: 2px;
+  margin: 2px 0;
+  box-shadow: 0 0 6px color-mix(in srgb, var(--lk-accent) 60%, transparent);
+}
+.lk-effect-card-list__empty {
+  font: var(--lk-font-weight-light, 300) 0.78rem/1.4 var(--lk-font-display);
+  color: var(--lk-text-muted);
+  text-align: center;
+  padding: 16px 12px;
+  border: 1px dashed var(--lk-border);
+  border-radius: var(--lk-radius-sm);
+}
+.lk-property-group {
+  grid-column: 1 / -1;
+  background: var(--lk-bg-sunken, rgba(0, 0, 0, 0.18));
+  border-radius: var(--lk-radius-md, 8px);
+  padding: 10px 12px 12px;
+}
+.lk-property-group__title {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 8px;
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lk-text-dim);
+}
+.lk-property-group__title hr {
+  border: 0;
+  border-top: 1px solid var(--lk-border);
+  margin: 0;
+}
+.lk-property-group__body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 16px;
+  row-gap: 10px;
+  align-items: stretch;
+}
+.lk-property-group:not(.lk-property-group--pairs) .lk-property-group__body > :not(.lk-property-row--color) {
+  grid-column: 1 / -1;
+}
+.lk-property-group--pairs .lk-property-group__body > * {
+  grid-column: auto;
+}
+.lk-property-group--pairs .lk-property-group__body > h3,
+.lk-property-group--pairs .lk-property-group__body > .lk-property-group__span {
+  grid-column: 1 / -1;
+}
+.lk-curve-field {
+  display: grid;
+  gap: 6px;
+  grid-column: 1 / -1;
+}
+.lk-curve-field__plot {
+  position: relative;
+  width: 100%;
+}
+.lk-curve-field__marks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.lk-curve-field__readouts {
+  display: flex;
+  justify-content: space-between;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.85rem;
+  color: var(--lk-text-dim);
+}
+.lk-curve-field__readout {
+  font-style: normal;
+}
+.lk-curve-field__actions {
+  display: flex;
+  gap: 6px;
+  justify-self: start;
+}
+.lk-curve-field__action {
+  background: transparent;
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-sm, 6px);
+  color: var(--lk-text);
+  padding: 4px 10px;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.lk-curve-field__action:hover {
+  background: var(--lk-bg-elevated);
+}
+.lk-layer-stack {
+  display: grid;
+  gap: 8px;
+}
+.lk-layer-stack__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.lk-layer-stack__title {
+  margin: 0;
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 1rem;
+  color: var(--lk-text);
+}
+.lk-layer-stack__palette {
+  display: flex;
+  gap: 4px;
+}
+.lk-layer-stack__add {
+  background: transparent;
+  border: 1px dashed var(--lk-border);
+  border-radius: var(--lk-radius-sm, 6px);
+  padding: 2px 8px;
+  font-size: 0.78rem;
+  color: var(--lk-text-dim);
+  cursor: pointer;
+}
+.lk-layer-stack__add:hover {
+  background: var(--lk-bg-elevated);
+  color: var(--lk-text);
+}
+.lk-layer-stack__list {
+  display: grid;
+  gap: 6px;
+}
+.lk-layer-stack__drop-hint {
+  height: 2px;
+  background: var(--lk-accent, #6cf);
+  border-radius: 1px;
+}
+.lk-layer-stack__empty {
+  color: var(--lk-text-dim);
+  font-size: 0.85rem;
+  padding: 8px;
+  text-align: center;
+}
+.lk-layer-card {
+  background: var(--lk-bg-elevated);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-md, 8px);
+  overflow: hidden;
+}
+.lk-layer-card.has-accent {
+  --lk-accent: var(--lk-layer-card-accent);
+  border-left: 3px solid var(--lk-layer-card-accent);
+}
+.lk-layer-card.is-dragging {
+  opacity: 0.5;
+}
+.lk-layer-card__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+}
+.lk-root .lk-layer-card__handle {
+  background: transparent;
+  border: 0;
+  color: var(--lk-text-dim);
+  padding: 2px 4px;
+  cursor: grab;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  border-radius: var(--lk-radius-sm, 6px);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+.lk-layer-card.has-accent .lk-layer-card__handle {
+  background: var(--lk-layer-card-accent);
+  color: white;
+}
+.lk-layer-card__handle:active {
+  cursor: grabbing;
+}
+.lk-layer-card__kind,
+.lk-layer-card__primary {
+  flex: 1;
+  font-size: 0.9rem;
+}
+.lk-layer-card__primary {
+  background: transparent;
+  border: 0;
+  color: var(--lk-text);
+  font: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.lk-root .lk-layer-card__remove {
+  background: transparent;
+  border: 0;
+  color: var(--lk-text-dim);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+.lk-layer-card__remove:hover {
+  color: var(--lk-text);
+}
+.lk-layer-card__body {
+  padding: 8px;
+  border-top: 1px solid var(--lk-border);
+}