:root {
  --bg: #1e1e1e;
  --panel: #2c2c2c;
  --widget: #383838;
  --widget-hi: #4a4a4a;
  --widget-down: #2a2a2a;
  --accent: #3b435e;
  --accent-hi: #4b5474;
  --text: #ebebeb;
  --dim: #b3b3b3;
  --row: 19px;
  --radius: 4px;
  --left-width: 196px;
  --right-width: 232px;
  --viewport-top: #2a2a2a;
  --viewport-bottom: #161616;
  --grid-minor: #363636;
  --grid-major: #474747;
  --axis-x: #a35252;
  --axis-z: #4f7fb5;
  --water-glow: #a7e6e6;
  --water-deep: #101c24;
  --water-sand: #00aee2;
  --water-sand-light: #ddf1cb;
  --water-murky: #43645c;
  --water-stone: #6b6459;
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 11px/1.3 system-ui, sans-serif; }
html.resizing, html.resizing * { cursor: col-resize !important; user-select: none; }

.shell { height: 100dvh; padding: 4px; display: grid; grid-template-columns: var(--left-width) 4px minmax(0, 1fr) 4px var(--right-width); gap: 0; }
.panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; overflow: hidden; background: var(--panel); border-radius: var(--radius); }
.panel-head { padding: 4px 6px; color: var(--dim); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.dirty { margin-left: 3px; color: var(--text); }
.dirty:empty { display: none; }
.panel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 5px 5px; }
.splitter { position: relative; cursor: col-resize; }
.splitter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: transparent; }
.splitter:hover::after, .splitter.active::after { background: var(--accent); }
.viewport { position: relative; min-height: 0; min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: default; }

button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--row); padding: 0 8px; border: 0; border-radius: var(--radius); background: var(--widget); color: var(--text); font: inherit; cursor: pointer; }
button:hover { background: var(--widget-hi); }
button:active { background: var(--widget-down); }
button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.overlay { position: absolute; top: 5px; right: 5px; width: 24px; height: 22px; padding: 0; z-index: 3; background: var(--widget); }
button.overlay:hover { background: var(--widget-hi); }
button.overlay:active { background: var(--widget-down); }
button.overlay[aria-pressed="true"] { background: var(--accent); }
button.overlay[aria-pressed="true"]:hover { background: var(--accent-hi); }

.object { display: flex; align-items: center; gap: 5px; height: 21px; padding: 0 5px; border-radius: 3px; cursor: pointer; }
.object:hover { background: var(--widget); }
.object[aria-selected="true"], .object[aria-selected="true"]:hover { background: var(--accent); }
.object-icon { display: flex; flex-shrink: 0; color: var(--dim); }
.object-icon svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.object[aria-selected="true"] .object-icon { color: var(--text); }
.object-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-actions { display: flex; flex: none; gap: 1px; visibility: hidden; }
.object:hover .object-actions, .object:has(.object-actions button:focus-visible) .object-actions,
.object-isolate[aria-pressed="true"], .object-eye[aria-pressed="false"] { visibility: visible; }
.object-actions button { width: 16px; height: 16px; padding: 0; background: transparent; color: var(--dim); }
.object-actions button:hover { background: rgba(255, 255, 255, .14); color: var(--text); }
.object-actions button svg { width: 11px; height: 11px; stroke-width: 1.3; }
.object-isolate[aria-pressed="true"] { color: var(--text); }
.object-eye .eye-off { display: none; }
.object-eye[aria-pressed="false"] .eye-on { display: none; }
.object-eye[aria-pressed="false"] .eye-off { display: block; }

.object-title { margin: 0 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.group { display: grid; gap: 2px; }
.group + .group { margin-top: 7px; }

#handles { display: none; }
.group-head { display: flex; align-items: center; justify-content: space-between; height: 16px; margin: 0 2px; color: var(--dim); }
.group-tools { display: flex; align-items: center; gap: 1px; }
.group-head .lock, .group-head .reset { width: 16px; height: 16px; padding: 0; background: transparent; color: var(--dim); font-size: 10px; visibility: hidden; }
.group:hover .lock, .group:hover .reset, .group:has(.field:focus-within) .lock, .group:has(.field:focus-within) .reset { visibility: visible; }
.group-head .lock:hover, .group-head .reset:hover { background: var(--widget-hi); color: var(--text); }
.group-head .lock svg { width: 11px; height: 11px; stroke-width: 1.3; }

.vector { position: relative; --gap: 2px; --waist: 5px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.link { position: absolute; inset: 0; pointer-events: none; }
.link .neck { position: absolute; top: var(--waist); bottom: var(--waist); width: 6px; margin-left: -3px; border-radius: 3px; background: var(--widget); transform: scaleY(0); transition: transform .16s cubic-bezier(.4, 0, .2, 1); }
.link .neck:nth-child(1) { left: calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2); }
.link .neck:nth-child(2) { left: calc(2 * (100% - 2 * var(--gap)) / 3 + 3 * var(--gap) / 2); }
.vector.linked .link .neck { transform: scaleY(1); }

.field { position: relative; display: flex; align-items: center; height: var(--row); border-radius: 3px; overflow: hidden; background: var(--widget); cursor: ew-resize; touch-action: none; }
.field.bounded { background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--widget) var(--fill, 0%)); }
.field:hover { filter: brightness(1.12); }
.field:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.field .axis { padding-left: 4px; color: var(--dim); font-size: 9px; }
.field .step { display: flex; align-items: center; justify-content: center; flex: none; width: 9px; align-self: stretch; opacity: 0; transition: opacity .1s; cursor: default; }
.field:hover .step { opacity: .85; }
.field .step:hover { opacity: 1; background: rgba(0, 0, 0, .22); }
.field .step svg { width: 7px; height: 7px; fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.field:focus-within .step { opacity: 0; }
.field output { flex: 1; padding: 0 2px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.field input { position: absolute; inset: 0; width: 100%; border: 0; border-radius: 3px; background: var(--widget); color: var(--text); text-align: center; padding: 0 3px; font: inherit; }
.field.plain output { padding-left: 4px; }
.field.color { cursor: pointer; }
.field.color .chip { flex: none; width: 11px; height: 11px; margin-left: 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.field.color output { pointer-events: auto; cursor: text; font-size: 9px; letter-spacing: .02em; }
.field.color input[type="text"] { left: 21px; width: auto; font-size: 9px; letter-spacing: .02em; text-transform: lowercase; }
.field.color.wide { overflow: visible; cursor: default; background: transparent; }
.strips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; gap: 2px; height: var(--row); }
.strips .strip { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); cursor: ew-resize; touch-action: none; }
.strips .strip::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: var(--at, 0%); width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 2px rgba(0, 0, 0, .9); pointer-events: none; }
.strips .strip span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, .95); font-variant-numeric: tabular-nums; pointer-events: none; }
.strips .strip:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.parameter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) 16px; gap: 3px; align-items: center; }
.parameter.colour { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) 16px 15px; }
.parameter .expand { width: 15px; height: var(--row); padding: 0; background: transparent; color: var(--dim); visibility: hidden; }
.parameter:hover .expand, .parameter:focus-within .expand, .parameter .expand[aria-pressed="true"] { visibility: visible; }
.parameter .expand[aria-pressed="true"] { color: var(--text); }
.parameter .expand:hover { background: var(--widget-hi); color: var(--text); }
.parameter .expand svg { width: 11px; height: 11px; stroke-width: 1.3; }
.parameter > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--dim); }
.parameter .reset { width: 16px; height: var(--row); padding: 0; background: transparent; color: var(--dim); font-size: 10px; visibility: hidden; }
.parameter:hover .reset, .parameter:focus-within .reset { visibility: visible; }
.parameter .reset:hover { background: var(--widget-hi); color: var(--text); }
.object[data-hidden="true"] { opacity: .35; }
.object[aria-isolated="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
#hint { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); margin: 0; padding: 4px 7px; border-radius: var(--radius); background: #123047; color: #9fd0ff; }

#drop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; margin: 0; background: rgba(0, 0, 0, .55); color: var(--text); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.shell.dropping { outline: 2px dashed var(--accent-hi); outline-offset: -6px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.menu { position: fixed; z-index: 20; display: grid; gap: 1px; min-width: 170px; padding: 4px; border: 1px solid #444444; border-radius: 6px; background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.menu-item { justify-content: flex-start; height: 21px; padding: 0 8px; border-radius: 3px; background: transparent; }
.menu-item:hover, .menu-item:focus-visible { background: var(--accent); outline: none; }
.menu-item:disabled { opacity: .35; }
.picker { position: fixed; z-index: 30; display: grid; gap: 5px; padding: 9px; border: 1px solid #444444; border-radius: 6px; background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); --wheel: 132px; --bar: 18px; width: calc(var(--wheel) + var(--bar) + 23px); }
.picker-top { display: grid; grid-template-columns: var(--wheel) var(--bar); gap: 5px; }
.picker .wheel { position: relative; width: var(--wheel); height: var(--wheel); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); cursor: crosshair; touch-action: none; }
.picker .wheel .dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(0, 0, 0, .6); }
.picker .value { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); cursor: ns-resize; touch-action: none; }
.picker .value .mark { position: absolute; left: -2px; right: -2px; height: 2px; margin-bottom: -1px; background: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, .95); }
.picker-strip { position: relative; height: 15px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); cursor: ew-resize; touch-action: none; }
.picker-strip .tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, .95); pointer-events: none; }
.picker-strip .read { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .95); font-variant-numeric: tabular-nums; pointer-events: none; }
.picker-strip:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.picker-hex-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; height: 22px; padding: 0 6px; border-radius: 3px; background: var(--widget-down); }
.picker-hash { color: var(--dim); font-size: 10px; }
.picker-hex { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; outline: none; }

#status { position: absolute; left: 6px; right: 6px; bottom: 6px; margin: 0; padding: 4px 7px; border-radius: var(--radius); background: #3a1f1f; color: #ff8a80; white-space: pre-wrap; }
[hidden] { display: none !important; }

@media (max-width: 680px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 4px; }
  .splitter { display: none; }
}