konpeki 0.3.1 → 0.4.0

package/src/styles/right-panel.css

@@ -1,1298 +0,0 @@
-.inspector-content,
-.layers-panel {
-  flex: 1;
-  min-height: 0;
-  padding: 18px 16px;
-  overflow-y: auto;
-}
-
-.inspector-content h2 {
-  margin-bottom: 16px;
-}
-
-.inspector-content:has(> .page-number-picker) legend {
-  margin-bottom: 7px;
-}
-
-.overflow-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: 48px;
-  height: 40px;
-  padding: 0;
-  color: #8a5409;
-  border: 0;
-  background: #fff5dd;
-  font-size: 12px;
-}
-.overflow-trigger:disabled {
-  visibility: hidden;
-}
-.overflow-trigger svg {
-  width: 18px;
-  height: 18px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.overflow-popover {
-  position: fixed;
-  inset: calc(var(--panel-top) + var(--panel-header-height) + 6px) 20px auto auto;
-  margin: 0;
-  width: min(328px, calc(100vw - 40px));
-  max-height: calc(100dvh - var(--panel-top) - 100px);
-  overflow: auto;
-  padding: 16px;
-  border: 1px solid var(--ui-border);
-  border-radius: 10px;
-  background: var(--ui-surface);
-  color: var(--ui-text);
-  box-shadow: 0 8px 32px #0000001a;
-  font-size: 13px;
-  line-height: 1.5;
-}
-.overflow-popover p {
-  margin: 8px 0 12px;
-  color: var(--ui-muted);
-  font-size: 12px;
-}
-.overflow-popover ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.overflow-popover button {
-  display: grid;
-  gap: 4px;
-  width: 100%;
-  padding: 10px;
-  text-align: left;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  font-size: 12px;
-}
-.overflow-popover li + li {
-  margin-top: 8px;
-}
-
-.custom-visual-summary p {
-  margin: 0 0 10px;
-  color: var(--ui-text);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.custom-visual-summary dl {
-  display: grid;
-  gap: 6px;
-  margin: 0 0 12px;
-}
-
-.custom-visual-summary dl > div {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.custom-visual-summary dt,
-.custom-visual-summary dd {
-  margin: 0;
-  font-size: 11px;
-}
-
-.custom-visual-summary dt {
-  color: var(--ui-muted);
-}
-
-.custom-visual-summary .field-help {
-  margin: 0;
-  color: var(--ui-muted);
-  font-size: 11px;
-}
-
-.custom-visual-summary .field {
-  margin-top: 14px;
-  margin-bottom: 0;
-}
-
-.vector-element-editor {
-  display: grid;
-  gap: 10px;
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--ui-line);
-}
-
-.vector-element-editor > strong {
-  font-size: 11px;
-}
-
-.vector-actions {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.vector-actions button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-  min-height: 40px;
-  padding: 7px 6px;
-  border-color: transparent;
-  border-radius: 8px;
-  background: #f4f4f5;
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.vector-actions button:hover:not(:disabled) {
-  border-color: transparent;
-  background: #e9e9eb;
-}
-
-.vector-action-icon {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.5;
-}
-
-.vector-actions .vector-delete-action {
-  background: #fff1f1;
-  color: #9d2020;
-}
-
-.vector-actions .vector-delete-action:hover:not(:disabled) {
-  background: #ffe3e3;
-  color: #841919;
-}
-
-.vector-attributes {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0 10px;
-}
-
-.vector-attributes .field {
-  min-width: 0;
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-.theme-picker {
-  margin-top: 0;
-}
-
-.theme-picker + .choice-picker {
-  margin-top: 20px;
-}
-
-.segmented-options {
-  display: grid;
-  gap: 3px;
-  padding: 3px;
-  background: #f4f4f5;
-  border-radius: 8px;
-}
-
-.segmented-options button {
-  min-width: 0;
-  min-height: 40px;
-  padding: 5px 7px;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--ui-muted);
-  font-size: 12px;
-}
-
-.segmented-options button:hover:not(:disabled) {
-  background: #e9e9eb;
-  border-color: transparent;
-}
-
-.segmented-options button.selected {
-  background: var(--ui-selected);
-  border-color: color-mix(in srgb, var(--accent) 45%, white);
-  box-shadow: none;
-  color: #006aa1;
-}
-
-.inspector-content .slide-settings-heading {
-  margin-top: 24px;
-  padding-top: 20px;
-  border-top: 1px solid var(--ui-border);
-}
-
-.page-number-picker,
-.page-number-picker > .choice-picker:first-of-type {
-  margin-top: 0;
-}
-
-.theme-options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 7px;
-}
-
-.theme-options button {
-  display: grid;
-  min-width: 0;
-  gap: 7px;
-  padding: 9px;
-  text-align: left;
-}
-
-.theme-options button.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, white);
-  background: var(--ui-selected);
-  box-shadow: none;
-}
-
-.theme-options button > span:first-child {
-  overflow: hidden;
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.theme-swatches {
-  display: flex;
-  gap: 3px;
-}
-
-.theme-swatches i {
-  display: block;
-  flex: 1;
-  height: 7px;
-  border-radius: 1px;
-}
-
-.layers-heading-row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.layers-heading-row h2 {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.layers-heading-row > span,
-.layers-empty {
-  color: var(--ui-muted);
-  font-size: 10px;
-}
-
-.layers-empty {
-  margin: 12px 2px;
-}
-
-.layer-list {
-  display: grid;
-  gap: 4px;
-  padding-block: 3px;
-}
-
-.layer-row {
-  position: relative;
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr) auto;
-  align-items: center;
-  min-height: 48px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: #fafafa;
-}
-
-.layer-row.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, white);
-  background: var(--ui-selected);
-}
-
-.layer-row.dragging {
-  opacity: 0.45;
-}
-
-.layer-row[data-drop-edge]::after {
-  position: absolute;
-  z-index: 1;
-  left: -1px;
-  right: -1px;
-  height: 2px;
-  border-radius: 1px;
-  background: var(--accent);
-  pointer-events: none;
-  content: "";
-}
-
-.layer-row[data-drop-edge="before"]::after {
-  top: -4px;
-}
-
-.layer-row[data-drop-edge="after"]::after {
-  bottom: -4px;
-}
-
-.layer-drag {
-  color: var(--ui-muted);
-  font-size: 13px;
-  cursor: grab;
-}
-
-.layer-select {
-  display: grid;
-  min-width: 0;
-  padding: 5px 3px;
-  border: 0;
-  background: transparent;
-  text-align: left;
-}
-
-.layer-select:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-}
-
-.layer-select strong,
-.layer-select span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.layer-select strong {
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.layer-select span {
-  color: var(--ui-muted);
-  font-size: 10px;
-}
-
-.layer-actions {
-  display: flex;
-  padding-right: 3px;
-}
-
-.layer-actions button {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--ui-muted);
-  font-size: 11px;
-}
-
-.field {
-  display: grid;
-  gap: 7px;
-  margin-bottom: 17px;
-  font-size: 12px;
-}
-
-.inspector-context {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.inspector-context button {
-  display: inline-flex;
-  align-items: center;
-  min-width: 40px;
-  min-height: 40px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--ui-muted);
-  font-weight: 500;
-}
-
-.inspector-context button:hover {
-  background: transparent;
-  color: var(--accent);
-}
-
-.field > span {
-  color: #565656;
-}
-
-.field:has(> select[name="Font"]) > span {
-  color: var(--ui-text);
-  font-weight: 500;
-}
-
-.field textarea {
-  resize: none;
-  overflow-y: auto;
-}
-
-.native-text-inspector > .field {
-  margin-bottom: 12px;
-  gap: 5px;
-}
-
-.native-text-inspector > .field textarea {
-  height: 64px;
-  min-height: 64px;
-  resize: vertical;
-}
-
-.text-typography-fields {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-  margin-bottom: 12px;
-}
-
-.text-typography-fields .field {
-  min-width: 0;
-  margin: 0;
-  gap: 5px;
-}
-
-.appearance-options {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.appearance-options button {
-  display: grid;
-  grid-template-columns: 38px minmax(0, 1fr);
-  align-items: center;
-  min-height: 42px;
-  gap: 7px;
-  padding: 6px;
-  text-align: left;
-}
-
-.appearance-options button.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, white);
-  background: var(--ui-selected);
-  box-shadow: none;
-}
-
-.appearance-options button:disabled {
-  opacity: 0.48;
-}
-
-.appearance-options button > span:last-child {
-  overflow: hidden;
-  font-size: 10px;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-}
-
-.appearance-preview {
-  position: relative;
-  display: grid;
-  width: 36px;
-  height: 24px;
-  gap: 2px;
-  padding: 3px;
-  overflow: hidden;
-  border: 1px solid #dedede;
-  background: #fff;
-}
-
-.appearance-preview i {
-  display: block;
-  min-width: 2px;
-  min-height: 2px;
-  background: var(--preview-muted);
-}
-
-.appearance-preview[data-property="alignment"],
-.appearance-preview[data-property="titleStyle"],
-.appearance-preview[data-property="purpose"] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.appearance-preview[data-property="alignment"] i,
-.appearance-preview[data-property="titleStyle"] i,
-.appearance-preview[data-property="purpose"] i {
-  width: 72%;
-  height: 2px;
-  min-height: 2px;
-}
-
-.appearance-preview[data-property="alignment"] i:nth-child(n + 4),
-.appearance-preview[data-property="titleStyle"] i:nth-child(n + 3),
-.appearance-preview[data-property="purpose"] i:nth-child(n + 4) {
-  display: none;
-}
-
-.appearance-preview[data-property="logicalOrder"] {
-  grid-template-columns: repeat(4, 1fr);
-  align-items: center;
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="parallel"] {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="progressive"] {
-  align-items: end;
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="progressive"] i:nth-child(1) { height: 4px; }
-.appearance-preview[data-property="logicalOrder"][data-value="progressive"] i:nth-child(2) { height: 8px; }
-.appearance-preview[data-property="logicalOrder"][data-value="progressive"] i:nth-child(3) { height: 12px; }
-.appearance-preview[data-property="logicalOrder"][data-value="progressive"] i:nth-child(4) { height: 16px; }
-
-.appearance-preview[data-property="tableStyle"] {
-  gap: 0;
-  padding: 2px;
-  grid-template: repeat(2, 1fr) / repeat(3, 1fr);
-}
-
-.appearance-preview[data-property="tableStyle"] i {
-  background: transparent;
-  border-radius: 0;
-}
-
-.appearance-preview[data-property="tableStyle"] i:nth-child(-n + 3) {
-  border-bottom: 2px solid var(--preview-ink);
-}
-.appearance-preview[data-property="tableStyle"][data-value="top-header-bottom"] {
-  border-block: 1px solid var(--preview-muted);
-}
-.appearance-preview[data-property="tableStyle"][data-value="row-rules"] i {
-  border-bottom: 1px solid var(--preview-muted);
-}
-.appearance-preview[data-property="tableStyle"][data-value="full-grid"] {
-  border-top: 1px solid var(--preview-muted);
-  border-left: 1px solid var(--preview-muted);
-}
-.appearance-preview[data-property="tableStyle"][data-value="full-grid"] i {
-  border-right: 1px solid var(--preview-muted);
-  border-bottom: 1px solid var(--preview-muted);
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="cyclical"] {
-  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
-  border-radius: 50%;
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="general-to-specific"],
-.appearance-preview[data-property="logicalOrder"][data-value="hierarchical"] {
-  grid-template: repeat(2, 1fr) / repeat(3, 1fr);
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="general-to-specific"] i:first-child {
-  grid-column: 1 / -1;
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="hierarchical"] i:first-child {
-  grid-column: 2;
-}
-
-.appearance-preview[data-property="logicalOrder"][data-value="hierarchical"] i:nth-child(n + 2) {
-  grid-row: 2;
-}
-
-.appearance-preview[data-property="alignment"][data-value="center"] i {
-  margin-inline: auto;
-}
-
-.appearance-preview[data-property="alignment"][data-value="end"] i {
-  margin-left: auto;
-}
-
-.appearance-preview[data-property="border"] i {
-  grid-area: 1 / 1 / -1 / -1;
-  background:
-    linear-gradient(var(--preview-muted) 0 0) 5px 6px / 18px 2px no-repeat,
-    linear-gradient(var(--preview-muted) 0 0) 5px 11px / 13px 2px no-repeat;
-}
-
-.appearance-preview[data-property="border"][data-value="outline"] i {
-  border: 1px solid var(--preview-ink);
-}
-
-.appearance-preview[data-property="border"][data-value="filled"] i {
-  background:
-    linear-gradient(#fff 0 0) 5px 6px / 18px 2px no-repeat,
-    linear-gradient(#fff 0 0) 5px 11px / 13px 2px no-repeat,
-    var(--preview-ink);
-}
-
-.appearance-preview[data-property="layout"] {
-  align-items: stretch;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}
-
-.appearance-preview[data-property="layout"][data-value="two-plus-two"] {
-  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
-}
-
-.appearance-preview[data-property="layout"][data-value="one-plus-three"],
-.appearance-preview[data-property="layout"][data-value="three-plus-one"] {
-  grid-template: repeat(3, 1fr) / repeat(2, 1fr);
-}
-
-.appearance-preview[data-property="layout"][data-value="one-plus-three"] i:first-child,
-.appearance-preview[data-property="layout"][data-value="three-plus-one"] i:last-child {
-  grid-row: 1 / -1;
-}
-
-.appearance-preview[data-property="layout"][data-value="three-plus-one"] i:last-child {
-  grid-column: 2;
-}
-
-.appearance-preview[data-property="orientation"][data-value="horizontal"] {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.appearance-preview[data-property="orientation"][data-value="vertical"] {
-  grid-template-rows: repeat(4, 1fr);
-}
-
-.appearance-preview[data-property="purpose"][data-value="comparison"] {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.appearance-preview[data-property="purpose"][data-value="comparison"] i {
-  display: block;
-  width: auto;
-  height: auto;
-}
-
-.appearance-preview[data-property="purpose"][data-value="emphasis"] i:first-child {
-  width: 100%;
-  height: 5px;
-  background: var(--preview-accent);
-}
-
-.appearance-preview[data-property="purpose"][data-value="emphasis"] i:nth-child(n + 2) {
-  display: none;
-}
-
-.appearance-preview[data-property="treatment"] i {
-  grid-area: 1 / 1 / -1 / -1;
-  margin: 5px;
-}
-
-.appearance-preview[data-property="treatment"][data-value="subtle"] {
-  background: color-mix(in srgb, var(--preview-accent) 10%, white);
-}
-
-.appearance-preview[data-property="treatment"][data-value="strong"] {
-  background: var(--preview-ink);
-}
-
-.appearance-preview[data-property="treatment"][data-value="strong"] i {
-  background: #fff;
-}
-
-.appearance-preview[data-property="titleStyle"][data-value="prominent"] i:first-child {
-  width: 90%;
-  height: 5px;
-  background: var(--preview-ink);
-}
-
-.appearance-preview[data-property="rule"]::after {
-  position: absolute;
-  right: 3px;
-  left: 3px;
-  border-top: 2px solid var(--preview-accent);
-  content: "";
-}
-
-.appearance-preview[data-property="rule"][data-value="none"]::after {
-  display: none;
-}
-
-.appearance-preview[data-property="rule"][data-value="top"]::after {
-  top: 4px;
-}
-
-.appearance-preview[data-property="rule"][data-value="bottom"]::after {
-  bottom: 4px;
-}
-
-.appearance-preview[data-property="density"][data-value="sparse"] i:nth-child(n + 3),
-.appearance-preview[data-property="legend"] i {
-  display: none;
-}
-
-.appearance-preview[data-property="density"] {
-  grid-template-columns: repeat(4, 1fr);
-  align-items: end;
-}
-
-.appearance-preview[data-property="density"] i:nth-child(odd) {
-  height: 8px;
-}
-
-.appearance-preview[data-property="density"] i:nth-child(even) {
-  height: 15px;
-}
-
-.appearance-preview[data-property="density"][data-value="sparse"] i:nth-child(n + 3) {
-  display: none;
-}
-
-.appearance-preview[data-property="legend"]::after {
-  position: absolute;
-  width: 16px;
-  height: 3px;
-  background:
-    linear-gradient(90deg, var(--preview-accent) 0 6px, transparent 6px 9px, var(--preview-muted) 9px);
-  content: "";
-}
-
-.appearance-preview[data-property="legend"][data-value="none"]::after {
-  display: none;
-}
-
-.appearance-preview[data-property="legend"][data-value="top"]::after {
-  top: 4px;
-  left: 4px;
-}
-
-.appearance-preview[data-property="legend"][data-value="right"]::after {
-  top: 5px;
-  right: 3px;
-  width: 3px;
-  height: 14px;
-  background: linear-gradient(var(--preview-accent) 0 6px, transparent 6px 9px, var(--preview-muted) 9px);
-}
-
-.appearance-preview[data-property="legend"][data-value="bottom"]::after {
-  bottom: 4px;
-  left: 4px;
-}
-
-.appearance-preview[data-property="color"] i,
-.appearance-preview[data-property="colorScheme"] i,
-.appearance-preview[data-property="emphasis"] i {
-  border-radius: 50%;
-}
-
-.appearance-preview[data-property="color"][data-value="ink"] i {
-  background: var(--preview-ink);
-}
-
-.appearance-preview[data-property="color"][data-value="accent"] i,
-.appearance-preview[data-property="colorScheme"][data-value="accent-with-muted-context"] i:first-child,
-.appearance-preview[data-property="emphasis"][data-value="primary"] i:first-child,
-.appearance-preview[data-property="emphasis"][data-value="latest-series"] i:last-child {
-  background: var(--preview-accent);
-}
-
-.appearance-preview[data-property="colorScheme"],
-.appearance-preview[data-property="emphasis"] {
-  grid-template-columns: repeat(4, 1fr);
-  align-items: center;
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="monochrome"] i {
-  background: var(--preview-ink);
-  opacity: 0.35;
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="monochrome"] i:nth-child(n + 3) {
-  opacity: 0.75;
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="categorical"] i:nth-child(1) {
-  background: var(--preview-accent);
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="categorical"] i:nth-child(2) {
-  background: var(--preview-secondary);
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="categorical"] i:nth-child(3) {
-  background: var(--preview-tertiary);
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="sequential"] i {
-  background: var(--preview-accent);
-}
-
-.appearance-preview[data-property="colorScheme"][data-value="sequential"] i:nth-child(1) { opacity: 0.2; }
-.appearance-preview[data-property="colorScheme"][data-value="sequential"] i:nth-child(2) { opacity: 0.4; }
-.appearance-preview[data-property="colorScheme"][data-value="sequential"] i:nth-child(3) { opacity: 0.65; }
-
-.appearance-preview[data-property="colorScheme"][data-value="status"] i:nth-child(1) { background: var(--preview-complete); }
-.appearance-preview[data-property="colorScheme"][data-value="status"] i:nth-child(2) { background: var(--preview-attention); }
-.appearance-preview[data-property="colorScheme"][data-value="status"] i:nth-child(n + 3) { background: var(--preview-blocked); }
-
-.appearance-preview[data-property="emphasis"] i {
-  background: var(--preview-muted);
-}
-
-.appearance-preview[data-property="emphasis"][data-value="exception"] i:nth-child(2) {
-  background: var(--preview-blocked);
-}
-
-.appearance-preview[data-property="type"] {
-  grid-template-columns: repeat(4, 1fr);
-  align-items: center;
-}
-
-.appearance-preview[data-property="type"]::before {
-  position: absolute;
-  right: 5px;
-  left: 5px;
-  top: 11px;
-  border-top: 1px solid var(--preview-muted);
-  content: "";
-}
-
-.appearance-preview[data-property="type"] i {
-  z-index: 1;
-  height: 6px;
-  border-radius: 1px;
-}
-
-.appearance-preview[data-property="type"][data-value="system"] i:first-child {
-  grid-column: 2 / 4;
-}
-
-.appearance-preview[data-property="type"][data-value="system"] i:nth-child(n + 2) {
-  align-self: end;
-}
-
-.appearance-preview[data-property="template"] {
-  display: block;
-}
-
-.appearance-preview[data-property="template"] svg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.appearance-preview[data-property="template"] i {
-  position: absolute;
-  z-index: 1;
-  width: 5px;
-  height: 5px;
-  border-radius: 1px;
-}
-
-.appearance-preview[data-property="template"][data-value="grouped-bar"] {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  align-items: end;
-}
-
-.appearance-preview[data-property="template"][data-value="grouped-bar"] i {
-  position: static;
-  width: auto;
-  height: 9px;
-  border-radius: 0;
-}
-
-.appearance-preview[data-property="template"][data-value="grouped-bar"] i:nth-child(even) { height: 15px; background: var(--preview-accent); }
-
-.appearance-preview[data-property="template"][data-value="line"]::before {
-  position: absolute;
-  left: 5px;
-  top: 12px;
-  width: 25px;
-  height: 9px;
-  border-top: 2px solid var(--preview-accent);
-  transform: skewY(-18deg);
-  content: "";
-}
-
-.appearance-preview[data-property="template"][data-value="line"] i:nth-child(1) { left: 5px; top: 13px; }
-.appearance-preview[data-property="template"][data-value="line"] i:nth-child(2) { left: 14px; top: 9px; }
-.appearance-preview[data-property="template"][data-value="line"] i:nth-child(3) { left: 23px; top: 11px; }
-.appearance-preview[data-property="template"][data-value="line"] i:nth-child(4) { left: 29px; top: 6px; }
-
-.appearance-preview[data-property="template"][data-value="pie"]::before {
-  position: absolute;
-  inset: 4px 9px;
-  border-radius: 50%;
-  background: conic-gradient(var(--preview-accent) 0 34%, var(--preview-secondary) 34% 67%, var(--preview-muted) 67%);
-  content: "";
-}
-
-.appearance-preview[data-property="template"][data-value="pie"] i {
-  display: none;
-}
-
-.appearance-preview[data-property="template"][data-value="annotated-detail"] i:first-child {
-  inset: 4px 12px 4px 4px;
-  width: auto;
-  height: auto;
-  border: 1px solid var(--preview-muted);
-  background: transparent;
-}
-
-.appearance-preview[data-property="template"][data-value="annotated-detail"] i:nth-child(2) { right: 5px; top: 5px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="annotated-detail"] i:nth-child(3) { right: 4px; top: 13px; width: 9px; height: 2px; }
-.appearance-preview[data-property="template"][data-value="annotated-detail"] i:nth-child(4) { display: none; }
-
-.appearance-preview[data-property="template"][data-value="radar"]::before {
-  position: absolute;
-  inset: 3px 7px;
-  background: color-mix(in srgb, var(--preview-accent) 35%, transparent);
-  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
-  content: "";
-}
-
-.appearance-preview[data-property="template"][data-value="radar"] i { display: none; }
-
-.appearance-preview[data-property="template"][data-value="treemap"] i {
-  border-radius: 0;
-}
-.appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(1) { inset: 3px 15px 3px 3px; width: auto; height: auto; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(2) { right: 3px; top: 3px; width: 10px; height: 8px; }
-.appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(3) { right: 8px; bottom: 3px; width: 5px; height: 7px; }
-.appearance-preview[data-property="template"][data-value="treemap"] i:nth-child(4) { right: 3px; bottom: 3px; width: 3px; height: 7px; background: var(--preview-secondary); }
-
-.appearance-preview[data-property="template"][data-value="linear"]::before,
-.appearance-preview[data-property="template"][data-value="request-flow"]::before {
-  position: absolute;
-  top: 11px;
-  right: 5px;
-  left: 5px;
-  border-top: 1px solid var(--preview-ink);
-  content: "";
-}
-
-.appearance-preview[data-property="template"][data-value="linear"] i,
-.appearance-preview[data-property="template"][data-value="request-flow"] i {
-  top: 9px;
-}
-.appearance-preview[data-property="template"][data-value="linear"] i:nth-child(1),
-.appearance-preview[data-property="template"][data-value="request-flow"] i:nth-child(1) { left: 4px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="linear"] i:nth-child(2),
-.appearance-preview[data-property="template"][data-value="request-flow"] i:nth-child(2) { left: 13px; }
-.appearance-preview[data-property="template"][data-value="linear"] i:nth-child(3),
-.appearance-preview[data-property="template"][data-value="request-flow"] i:nth-child(3) { left: 22px; }
-.appearance-preview[data-property="template"][data-value="linear"] i:nth-child(4),
-.appearance-preview[data-property="template"][data-value="request-flow"] i:nth-child(4) { right: 4px; }
-
-.appearance-preview[data-property="template"][data-value="request-flow"]::before {
-  border-top-style: dashed;
-}
-
-.appearance-preview[data-property="template"][data-value="request-flow"] i:nth-child(3) {
-  background: var(--preview-accent);
-}
-
-.appearance-preview[data-property="template"][data-value="branching"]::before {
-  position: absolute;
-  left: 8px;
-  top: 6px;
-  width: 19px;
-  height: 12px;
-  border: solid var(--preview-ink);
-  border-width: 1px 1px 1px 0;
-  content: "";
-}
-.appearance-preview[data-property="template"][data-value="branching"] i:first-child { left: 4px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="branching"] i:nth-child(2) { right: 4px; top: 4px; }
-.appearance-preview[data-property="template"][data-value="branching"] i:nth-child(3) { right: 4px; bottom: 4px; }
-.appearance-preview[data-property="template"][data-value="branching"] i:nth-child(4) { display: none; }
-
-.appearance-preview[data-property="template"][data-value="cyclical"]::before {
-  position: absolute;
-  inset: 4px 8px;
-  border: 1px solid var(--preview-ink);
-  border-radius: 50%;
-  content: "";
-}
-.appearance-preview[data-property="template"][data-value="cyclical"] i:nth-child(1) { left: 5px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="cyclical"] i:nth-child(2) { left: 15px; top: 3px; }
-.appearance-preview[data-property="template"][data-value="cyclical"] i:nth-child(3) { right: 5px; top: 9px; }
-.appearance-preview[data-property="template"][data-value="cyclical"] i:nth-child(4) { left: 15px; bottom: 3px; }
-
-.appearance-preview[data-property="template"][data-value="layered"] i:nth-child(1) { left: 5px; top: 4px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="layered"] i:nth-child(2) { left: 13px; top: 8px; }
-.appearance-preview[data-property="template"][data-value="layered"] i:nth-child(3) { left: 21px; top: 12px; }
-.appearance-preview[data-property="template"][data-value="layered"] i:nth-child(4) { left: 29px; top: 16px; }
-
-.appearance-preview[data-property="template"][data-value="hub-and-spoke"]::before {
-  position: absolute;
-  inset: 5px 8px;
-  background: linear-gradient(25deg, transparent 48%, var(--preview-ink) 49% 52%, transparent 53%), linear-gradient(-25deg, transparent 48%, var(--preview-ink) 49% 52%, transparent 53%);
-  content: "";
-}
-.appearance-preview[data-property="template"][data-value="hub-and-spoke"] i:first-child { left: 15px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="template"][data-value="hub-and-spoke"] i:nth-child(2) { left: 4px; top: 3px; }
-.appearance-preview[data-property="template"][data-value="hub-and-spoke"] i:nth-child(3) { right: 4px; top: 3px; }
-.appearance-preview[data-property="template"][data-value="hub-and-spoke"] i:nth-child(4) { right: 4px; bottom: 3px; }
-
-.appearance-preview[data-property="layout"] {
-  display: block;
-}
-
-.appearance-preview[data-property="layout"] i {
-  position: absolute;
-  z-index: 1;
-  width: 5px;
-  height: 5px;
-  border-radius: 1px;
-}
-
-.appearance-preview[data-property="layout"][data-value="linear"]::before,
-.appearance-preview[data-property="layout"][data-value="request-flow"]::before {
-  position: absolute;
-  top: 11px;
-  right: 5px;
-  left: 5px;
-  border-top: 1px solid var(--preview-ink);
-  content: "";
-}
-
-.appearance-preview[data-property="layout"][data-value="request-flow"]::before {
-  border-top-style: dashed;
-}
-
-.appearance-preview[data-property="layout"][data-value="linear"] i,
-.appearance-preview[data-property="layout"][data-value="request-flow"] i { top: 9px; }
-.appearance-preview[data-property="layout"][data-value="linear"] i:nth-child(1),
-.appearance-preview[data-property="layout"][data-value="request-flow"] i:nth-child(1) { left: 4px; background: var(--preview-accent); }
-.appearance-preview[data-property="layout"][data-value="linear"] i:nth-child(2),
-.appearance-preview[data-property="layout"][data-value="request-flow"] i:nth-child(2) { left: 13px; }
-.appearance-preview[data-property="layout"][data-value="linear"] i:nth-child(3),
-.appearance-preview[data-property="layout"][data-value="request-flow"] i:nth-child(3) { left: 22px; }
-.appearance-preview[data-property="layout"][data-value="linear"] i:nth-child(4),
-.appearance-preview[data-property="layout"][data-value="request-flow"] i:nth-child(4) { right: 4px; }
-
-.appearance-preview[data-property="layout"][data-value="branching"]::before {
-  position: absolute;
-  left: 8px;
-  top: 6px;
-  width: 19px;
-  height: 12px;
-  border: solid var(--preview-ink);
-  border-width: 1px 1px 1px 0;
-  content: "";
-}
-.appearance-preview[data-property="layout"][data-value="branching"] i:first-child { left: 4px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="layout"][data-value="branching"] i:nth-child(2) { right: 4px; top: 4px; }
-.appearance-preview[data-property="layout"][data-value="branching"] i:nth-child(3) { right: 4px; bottom: 4px; }
-.appearance-preview[data-property="layout"][data-value="branching"] i:nth-child(4) { display: none; }
-
-.appearance-preview[data-property="layout"][data-value="cyclical"]::before {
-  position: absolute;
-  inset: 4px 8px;
-  border: 1px solid var(--preview-ink);
-  border-radius: 50%;
-  content: "";
-}
-.appearance-preview[data-property="layout"][data-value="cyclical"] i:nth-child(1) { left: 5px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="layout"][data-value="cyclical"] i:nth-child(2) { left: 15px; top: 3px; }
-.appearance-preview[data-property="layout"][data-value="cyclical"] i:nth-child(3) { right: 5px; top: 9px; }
-.appearance-preview[data-property="layout"][data-value="cyclical"] i:nth-child(4) { left: 15px; bottom: 3px; }
-
-.appearance-preview[data-property="layout"][data-value="layered"] i:nth-child(1) { left: 5px; top: 4px; background: var(--preview-accent); }
-.appearance-preview[data-property="layout"][data-value="layered"] i:nth-child(2) { left: 13px; top: 8px; }
-.appearance-preview[data-property="layout"][data-value="layered"] i:nth-child(3) { left: 21px; top: 12px; }
-.appearance-preview[data-property="layout"][data-value="layered"] i:nth-child(4) { left: 29px; top: 16px; }
-
-.appearance-preview[data-property="layout"][data-value="hub-and-spoke"]::before {
-  position: absolute;
-  inset: 5px 8px;
-  background: linear-gradient(25deg, transparent 48%, var(--preview-ink) 49% 52%, transparent 53%), linear-gradient(-25deg, transparent 48%, var(--preview-ink) 49% 52%, transparent 53%);
-  content: "";
-}
-.appearance-preview[data-property="layout"][data-value="hub-and-spoke"] i:first-child { left: 15px; top: 9px; background: var(--preview-accent); }
-.appearance-preview[data-property="layout"][data-value="hub-and-spoke"] i:nth-child(2) { left: 4px; top: 3px; }
-.appearance-preview[data-property="layout"][data-value="hub-and-spoke"] i:nth-child(3) { right: 4px; top: 3px; }
-.appearance-preview[data-property="layout"][data-value="hub-and-spoke"] i:nth-child(4) { right: 4px; bottom: 3px; }
-
-fieldset {
-  min-width: 0;
-  margin: 25px 0 0;
-  padding: 0;
-  border: 0;
-}
-
-legend {
-  margin-bottom: 14px;
-  padding: 0;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.diagram-type-field {
-  display: block;
-}
-
-.diagram-type-field > summary {
-  cursor: pointer;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.diagram-type-field[open] > summary {
-  margin-bottom: 8px;
-}
-
-.diagram-type-options {
-  display: grid;
-  margin-top: 8px;
-  gap: 16px;
-}
-
-.diagram-type-category > span {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--muted);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-.diagram-type-category > div {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 7px;
-}
-
-.diagram-type-category button {
-  display: grid;
-  min-width: 0;
-  min-height: 70px;
-  padding: 8px;
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  background: var(--panel);
-  color: var(--ink);
-  place-items: center;
-}
-
-.diagram-type-category button:hover:not(:disabled) {
-  background: var(--ui-hover);
-}
-
-.diagram-type-category button:disabled {
-  opacity: 0.48;
-}
-
-.diagram-type-category button.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, white);
-  background: var(--ui-selected);
-}
-
-.diagram-type-category button > span {
-  overflow: hidden;
-  max-width: 100%;
-  font-size: 10px;
-  line-height: 1.2;
-  text-align: center;
-  text-overflow: ellipsis;
-}
-
-.diagram-type-icon {
-  width: 48px;
-  height: 32px;
-  color: var(--muted);
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.35;
-}
-
-.diagram-type-category button.selected .diagram-type-icon {
-  color: var(--ui-text);
-}
-
-.diagram-type-icon .filled {
-  fill: currentColor;
-  stroke: none;
-}
-
-.chart-type-options .appearance-preview {
-  margin: 4px 0;
-  border: 0;
-  background: transparent;
-  transform: scale(1.333333);
-}
-
-.visualization-description {
-  display: block;
-  margin-top: 8px;
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.geometry {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0 12px;
-}
-
-.geometry .field {
-  margin-bottom: 12px;
-}
-
-.right-panel :is(input, select, textarea) {
-  min-height: 40px;
-  border-color: transparent;
-  border-radius: 6px;
-  background: #f4f4f5;
-  font-size: 12px;
-}
-
-.right-panel :is(input, select, textarea):hover {
-  border-color: #d4d4d8;
-}
-
-.parameter-input {
-  position: relative;
-  display: block;
-}
-
-.parameter-input input {
-  min-height: 40px;
-  padding-right: 32px;
-  appearance: textfield;
-}
-
-.parameter-input input::-webkit-inner-spin-button {
-  appearance: none;
-}
-
-.parameter-unit {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--ui-muted);
-  font-size: 11px;
-}
-
-@media (max-width: 1150px) {
-  .inspector-content {
-    padding: 20px 16px;
-  }
-}