@ash-qw/dsh-theme-prts 0.1.91

package/src/styles/theme-settings-workbench.css

@@ -0,0 +1,803 @@
+/* Simplified P.R.T.S. theme settings workbench. */
+html[data-dsh-prts] [data-prts-theme-settings] {
+  --prts-settings-text: .875rem;
+  --prts-settings-small: .75rem;
+  --prts-settings-heading: .875rem;
+  position: fixed;
+  z-index: 10000;
+  inset: 50% auto auto 50%;
+  width: min(clamp(50rem, 55vw, 65rem), calc(100vw - 2rem));
+  height: auto;
+  max-width: none;
+  max-height: min(60rem, calc(100dvh - 2rem));
+  container: prts-settings / inline-size;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--prts-ink);
+  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
+  clip-path: none;
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 8px)) scale(.992);
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 220ms var(--prts-ease-spring);
+}
+
+html[data-dsh-prts] [data-prts-theme-settings][open] {
+  display: block;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings][data-prts-settings-visible] {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+  pointer-events: auto;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing] {
+  transition: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing]::backdrop,
+html[data-dsh-prts] [data-prts-settings-backdrop][data-prts-resizing] {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing]
+  [data-prts-option-sample="glass"]::after {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  transition: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings]::before {
+  content: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings]::backdrop {
+  background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
+  backdrop-filter: blur(5px) saturate(.82);
+  -webkit-backdrop-filter: blur(5px) saturate(.82);
+}
+
+html[data-dsh-prts] [data-prts-settings-backdrop] {
+  z-index: 9999;
+  inset: 0;
+  background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
+  backdrop-filter: blur(5px) saturate(.82);
+  -webkit-backdrop-filter: blur(5px) saturate(.82);
+}
+
+html[data-dsh-prts] [data-prts-settings-frame] {
+  position: relative;
+  height: auto;
+  max-height: inherit;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  isolation: isolate;
+  border: 1px solid var(--prts-line-strong);
+  background:
+    linear-gradient(125deg, color-mix(in srgb, var(--prts-cyan) 4%, transparent), transparent 34%),
+    var(--prts-panel);
+  clip-path: polygon(4px 0, calc(100% - 38px) 0, 100% 38px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
+}
+
+html[data-dsh-prts] [data-prts-settings-frame]::before {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 37px;
+  width: 118px;
+  height: 2px;
+  background: var(--prts-cyan);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-header] {
+  display: grid;
+  align-items: center;
+  min-height: 68px;
+  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
+  gap: 14px;
+  padding: 13px 48px 12px 16px;
+  border-bottom: 1px solid var(--prts-line-strong);
+  background: color-mix(in srgb, var(--prts-canvas-elevated) 92%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-header] > span {
+  display: grid;
+  gap: 4px;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-header] small,
+html[data-dsh-prts] [data-prts-theme-settings] section > header small,
+html[data-dsh-prts] [data-prts-theme-settings] summary small,
+html[data-dsh-prts] [data-prts-settings-actions] small {
+  color: var(--prts-muted);
+  font: 700 8px/1.3 var(--prts-mono);
+  letter-spacing: .08em;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-header] strong {
+  font: 800 19px/1 var(--prts-display);
+  letter-spacing: .07em;
+}
+html[data-dsh-prts] [data-prts-settings-summary] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+html[data-dsh-prts] [data-prts-settings-summary] span {
+  min-height: 22px;
+  padding: 4px 7px;
+  box-shadow: inset 0 0 0 1px var(--prts-line);
+  background: color-mix(in srgb, var(--prts-panel-raised) 86%, transparent);
+  color: var(--prts-cyan);
+  font: 700 8px/1 var(--prts-mono);
+  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-close] {
+  position: absolute;
+  z-index: 5;
+  top: 13px;
+  right: 13px;
+  width: 36px;
+  height: 36px;
+  color: var(--prts-ink);
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-scroll] {
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+  scrollbar-gutter: stable;
+}
+
+html[data-dsh-prts] [data-prts-settings-presets],
+html[data-dsh-prts] [data-prts-settings-common],
+html[data-dsh-prts] [data-prts-settings-advanced],
+html[data-dsh-prts] [data-prts-settings-actions] {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  border: 0;
+  border-bottom: 1px solid var(--prts-line-strong);
+  background: color-mix(in srgb, var(--prts-canvas-elevated) 82%, transparent);
+  clip-path: none;
+}
+
+html[data-dsh-prts] [data-prts-settings-presets] > header,
+html[data-dsh-prts] [data-prts-settings-common] > header {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 11px;
+  border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 72%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-settings-presets] > header span,
+html[data-dsh-prts] [data-prts-settings-common] > header span,
+html[data-dsh-prts] [data-prts-settings-advanced] summary > span {
+  display: flex;
+  align-items: baseline;
+  gap: 9px;
+}
+
+html[data-dsh-prts] [data-prts-settings-presets] > header strong,
+html[data-dsh-prts] [data-prts-settings-common] > header strong,
+html[data-dsh-prts] [data-prts-settings-advanced] summary strong {
+  font: 800 13px/1 var(--prts-display);
+  letter-spacing: .05em;
+}
+
+html[data-dsh-prts] [data-prts-advanced-summary] {
+  pointer-events: none;
+  color: var(--prts-cyan);
+  font: 800 8px/1 var(--prts-mono);
+  letter-spacing: .06em;
+}
+html[data-dsh-prts] [data-prts-settings-presets],
+html[data-dsh-prts] [data-prts-settings-common],
+html[data-dsh-prts] [data-prts-settings-advanced],
+html[data-dsh-prts] [data-prts-settings-actions] {
+  border-inline: 1px solid var(--prts-line-strong);
+}
+html[data-dsh-prts] [data-prts-settings-presets] { border-top: 1px solid var(--prts-line-strong); }
+
+html[data-dsh-prts] [data-prts-settings-presets] > div {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 0;
+}
+
+html[data-dsh-prts] [data-prts-preset-card] {
+  display: grid;
+  text-align: left;
+  min-height: 66px;
+  align-content: center;
+  gap: 6px;
+  padding: 11px 12px !important;
+  border-right: 1px solid var(--prts-line) !important;
+  position: relative;
+  overflow: hidden;
+  box-shadow: none;
+  background: transparent !important;
+  clip-path: none;
+}
+
+html[data-dsh-prts] [data-prts-preset-card]:last-child { border-right: 0 !important; }
+html[data-dsh-prts] [data-prts-preset-card] strong { font-size: 12px; }
+html[data-dsh-prts] [data-prts-preset-card] span { overflow: hidden; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+html[data-dsh-prts] [data-prts-preset-card].is-selected {
+  box-shadow: inset 0 -2px 0 var(--prts-yellow);
+  background: color-mix(in srgb, var(--prts-yellow) 9%, transparent) !important;
+}
+
+html[data-dsh-prts] [data-prts-settings-common-grid] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
+  min-height: 50px;
+  grid-template-columns: 94px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-right: 1px solid var(--prts-line);
+  border-bottom: 1px solid var(--prts-line);
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-child(2n) { border-right: 0; }
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(-n + 2) { border-bottom: 0; }
+
+html[data-dsh-prts] [data-prts-setting-row] > div {
+  min-width: 0;
+  display: flex;
+  gap: 4px;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] > span {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] > span > strong {
+  font: 700 9px/1.1 var(--prts-display);
+}
+
+html[data-dsh-prts] [data-prts-setting-note] {
+  color: var(--prts-yellow);
+  font: 700 7px/1.25 var(--prts-mono);
+  letter-spacing: 0;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] {
+  min-width: 0;
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+html[data-dsh-prts] [data-prts-option-sample] {
+  position: relative;
+  width: 22px;
+  height: 14px;
+  flex: 0 0 22px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, currentColor 45%, var(--prts-line));
+  background: var(--prts-canvas);
+}
+
+html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="off"] {
+  background: linear-gradient(var(--prts-line), var(--prts-line)) 50% 50% / 12px 1px no-repeat, var(--prts-canvas);
+}
+html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="restrained"] {
+  background: repeating-linear-gradient(115deg, var(--prts-canvas) 0 6px, color-mix(in srgb, var(--prts-cyan) 38%, var(--prts-canvas)) 6px 7px);
+}
+html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="full"] {
+  background:
+    repeating-linear-gradient(115deg, transparent 0 4px, color-mix(in srgb, var(--prts-cyan) 62%, transparent) 4px 5px),
+    repeating-linear-gradient(25deg, var(--prts-canvas) 0 7px, color-mix(in srgb, var(--prts-line-strong) 72%, var(--prts-canvas)) 7px 8px);
+}
+
+html[data-dsh-prts] [data-prts-option-sample="glass"] {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--prts-cyan) 54%, transparent) 25%, transparent 25%) 0 0 / 8px 8px,
+    linear-gradient(315deg, color-mix(in srgb, var(--prts-yellow) 38%, transparent) 25%, transparent 25%) 4px 4px / 8px 8px,
+    var(--prts-canvas);
+}
+html[data-dsh-prts] [data-prts-option-sample="glass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--prts-panel-raised) 64%, transparent);
+  backdrop-filter: blur(2px) saturate(1.15);
+  -webkit-backdrop-filter: blur(2px) saturate(1.15);
+}
+html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="off"]::after { background: var(--prts-panel-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
+html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="soft"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 82%, transparent); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
+html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="standard"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 62%, transparent); }
+html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="clear"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 34%, transparent); backdrop-filter: blur(4px) saturate(1.35); -webkit-backdrop-filter: blur(4px) saturate(1.35); }
+
+html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key],
+html[data-dsh-prts] [data-prts-retry-save],
+html[data-dsh-prts] [data-prts-reset-visual],
+html[data-dsh-prts] [data-prts-reset-confirm-action],
+html[data-dsh-prts] [data-prts-reset-cancel] {
+  position: relative;
+  overflow: hidden;
+  min-height: 30px;
+  padding: 6px 8px;
+  border: 0 !important;
+  box-shadow: inset 0 0 0 1px var(--prts-line);
+  background: var(--prts-panel-raised);
+  color: var(--prts-muted);
+  font: 700 8px/1 var(--prts-mono);
+  white-space: nowrap;
+  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
+}
+
+html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key].is-selected {
+  box-shadow: inset 0 0 0 1px var(--prts-yellow);
+  background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel-raised));
+  color: var(--prts-ink);
+
+html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key]::after {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  opacity: 0;
+  box-shadow: inset 0 0 0 1px var(--prts-yellow);
+  background: color-mix(in srgb, var(--prts-yellow) 18%, transparent);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key][data-prts-setting-feedback]::after {
+  opacity: 1;
+}
+
+}
+
+html[data-dsh-prts] [data-prts-theme-settings] button:focus-visible,
+html[data-dsh-prts] [data-prts-theme-settings] summary:focus-visible,
+html[data-dsh-prts] [data-prts-theme-settings] input:focus-visible {
+  outline: 2px solid var(--prts-cyan);
+  outline-offset: 2px;
+}
+
+html[data-dsh-prts] [data-prts-settings-advanced] summary {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 11px;
+  cursor: pointer;
+  list-style: none;
+}
+
+html[data-dsh-prts] [data-prts-settings-advanced] summary::-webkit-details-marker { display: none; }
+html[data-dsh-prts] [data-prts-settings-advanced] summary::after {
+  content: "+";
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  margin-left: 2px;
+  border: 1px solid var(--prts-line);
+  color: var(--prts-cyan);
+  font: 800 13px/1 var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-settings-advanced][open] summary::after { content: "−"; }
+html[data-dsh-prts] [data-prts-settings-advanced-content] {
+  display: grid;
+  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
+  border-top: 1px solid var(--prts-line-strong);
+}
+
+html[data-dsh-prts] [data-prts-settings-advanced-content] > section { padding: 11px; }
+html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 1px solid var(--prts-line); }
+html[data-dsh-prts] [data-prts-settings-advanced-content] section > header { min-height: 30px; display: grid; gap: 4px; }
+html[data-dsh-prts] [data-prts-settings-advanced-content] section > header strong { font-size: 10px; }
+html[data-dsh-prts] [data-prts-settings-advanced-content] section > header span { color: var(--prts-muted); font-size: 8px; }
+
+html[data-dsh-prts] [data-prts-particle-detail] > div {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 5px;
+  margin-top: 8px;
+}
+
+html[data-dsh-prts] [data-prts-particle-detail] button[role="radio"] {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+html[data-dsh-prts] [data-prts-particle-detail-preview] {
+  height: 32px;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
+}
+html[data-dsh-prts] [data-prts-particle-detail-preview] b { width: 2px; height: 2px; background: currentColor; }
+html[data-dsh-prts] [data-prts-particle-error] { margin: 8px 0 0; color: var(--prts-yellow); font: 700 8px/1.4 var(--prts-mono); }
+
+html[data-dsh-prts] [data-prts-scale-calibration] {
+  --prts-calibration-distance: 96px;
+  margin: 8px 0 0;
+  padding: 8px;
+  overflow: hidden;
+  border: 1px solid var(--prts-line);
+  background: color-mix(in srgb, var(--prts-panel-raised) 84%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-viewport] {
+  position: relative;
+  width: 100%;
+  height: 94px;
+  overflow: hidden;
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-canvas] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 360px;
+  height: 94px;
+  transform-origin: top left;
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-sidebar] {
+  position: absolute;
+  inset: 8px auto 8px 0;
+  width: 4px;
+  background: var(--prts-line-strong);
+  box-shadow: 8px 0 0 color-mix(in srgb, var(--prts-line) 45%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-measure] {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  width: var(--prts-calibration-distance);
+  height: 18px;
+  border-top: 1px solid var(--prts-cyan);
+  color: var(--prts-cyan);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-measure]::before,
+html[data-dsh-prts] [data-prts-scale-calibration-measure]::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  width: 1px;
+  height: 7px;
+  background: currentColor;
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-measure]::before { left: 0; }
+html[data-dsh-prts] [data-prts-scale-calibration-measure]::after { right: 0; }
+
+html[data-dsh-prts] [data-prts-scale-calibration-value] {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  padding-left: 4px;
+  background: var(--prts-panel-raised);
+  color: currentColor;
+  font: 800 8px/1 var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-rail] {
+  position: absolute;
+  top: 29px;
+  left: var(--prts-calibration-distance);
+  width: 32px;
+  height: 58px;
+  border: 1px solid var(--prts-line-strong);
+  background: color-mix(in srgb, var(--prts-canvas) 62%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-rail] i {
+  position: absolute;
+  top: calc(5px + var(--prts-calibration-tick) * 6px);
+  left: 2px;
+  width: 9px;
+  height: 1px;
+  background: var(--prts-muted);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-rail] i:nth-child(4n + 1) { width: 24px; }
+html[data-dsh-prts] [data-prts-scale-calibration-rail] i:nth-child(4n + 2) { width: 18px; }
+html[data-dsh-prts] [data-prts-scale-calibration-rail] i:last-child { width: 24px; background: var(--prts-yellow); }
+
+html[data-dsh-prts] [data-prts-scale-calibration-gap] {
+  position: absolute;
+  top: 29px;
+  left: calc(var(--prts-calibration-distance) + 32px);
+  width: 12px;
+  height: 58px;
+  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--prts-line) 42%, transparent) 3px 4px);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-content] {
+  position: absolute;
+  inset: 29px 0 7px calc(var(--prts-calibration-distance) + 44px);
+  min-width: 16px;
+  overflow: hidden;
+  border-left: 1px solid var(--prts-cyan);
+  background: color-mix(in srgb, var(--prts-panel) 84%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-content] i {
+  display: block;
+  width: min(78%, 138px);
+  height: 1px;
+  margin: 18px 10px 9px;
+  background: var(--prts-line-strong);
+  box-shadow: 0 8px 0 var(--prts-line);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-content] small {
+  margin-left: 10px;
+  color: var(--prts-dim);
+  font: 700 7px/1 var(--prts-mono);
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-meta] {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 7px;
+  border-top: 1px solid var(--prts-line);
+  font: 700 8px/1.3 var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration-status] {
+  margin-left: auto;
+  color: var(--prts-muted);
+  text-align: right;
+}
+
+html[data-dsh-prts] [data-prts-scale-calibration][data-prts-calibration-mode="configured"] [data-prts-scale-calibration-status],
+html[data-dsh-prts] [data-prts-scale-calibration][data-prts-calibration-mode="simulated"] [data-prts-scale-calibration-status] { color: var(--prts-cyan); }
+html[data-dsh-prts] [data-prts-scale-calibration][data-prts-calibration-mode="centered"] [data-prts-scale-calibration-status],
+html[data-dsh-prts] [data-prts-scale-calibration-scale] { color: var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-setting-range-row] {
+  display: grid;
+  gap: 7px;
+  padding: 8px 0 0;
+  border: 0;
+}
+html[data-dsh-prts] [data-prts-setting-range-row] > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+html[data-dsh-prts] [data-prts-setting-range-row] input[type="range"] {
+  min-width: 0;
+  flex: 1;
+}
+html[data-dsh-prts] [data-prts-setting-range] { accent-color: var(--prts-cyan); }
+html[data-dsh-prts] :is([data-prts-scale-distance-output], [data-prts-scale-focus-output]) {
+  min-width: 42px;
+  color: var(--prts-cyan);
+  font: 800 8px/1 var(--prts-mono);
+  text-align: right;
+}
+
+html[data-dsh-prts] [data-prts-scale-focus-preview] {
+  width: 34px;
+  min-width: 34px;
+  height: 30px;
+  display: grid;
+  align-content: center;
+  gap: 4px;
+}
+
+html[data-dsh-prts] [data-prts-scale-focus-preview] i {
+  display: block;
+  height: 1px;
+  max-width: 30px;
+  background: var(--prts-yellow);
+  transition: width 100ms ease;
+}
+
+html[data-dsh-prts] [data-prts-settings-actions] {
+  min-height: 58px;
+  display: block;
+  padding: 0;
+  border-bottom: 1px solid var(--prts-line-strong);
+}
+
+html[data-dsh-prts] [data-prts-persistence-error],
+html[data-dsh-prts] [data-prts-reset-zone] {
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 11px;
+}
+
+html[data-dsh-prts] [data-prts-persistence-error] { border-bottom: 1px solid var(--prts-yellow); background: color-mix(in srgb, var(--prts-yellow) 7%, transparent); }
+html[data-dsh-prts] [data-prts-persistence-error] > span,
+html[data-dsh-prts] [data-prts-reset-zone] > span { display: grid; gap: 4px; }
+html[data-dsh-prts] [data-prts-persistence-error] strong { color: var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-reset-visual],
+html[data-dsh-prts] [data-prts-reset-confirm-action] { color: var(--prts-yellow); box-shadow: inset 0 0 0 1px var(--prts-yellow); }
+
+html[data-dsh-prts] [data-prts-reset-confirm] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 5px;
+  color: var(--prts-yellow);
+  font: 700 8px/1.3 var(--prts-mono);
+}
+
+html[data-dsh-prts] [hidden] { display: none !important; }
+
+/* Readable settings typography: information never drops below 12px. */
+html[data-dsh-prts] :is(
+  [data-prts-theme-settings-header] small,
+  [data-prts-theme-settings] section > header small,
+  [data-prts-theme-settings] summary small,
+  [data-prts-settings-actions] small,
+  [data-prts-settings-summary] span,
+  [data-prts-advanced-summary],
+  [data-prts-preset-card] span,
+  [data-prts-setting-note],
+  [data-prts-settings-advanced-content] section > header span,
+  [data-prts-particle-error],
+  [data-prts-scale-calibration-value],
+  [data-prts-scale-calibration-content] small,
+  [data-prts-scale-calibration-meta],
+  [data-prts-scale-distance-output],
+  [data-prts-reset-confirm]
+) {
+  font-size: var(--prts-settings-small);
+  line-height: 1.4;
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-settings-presets] > header strong,
+  [data-prts-settings-common] > header strong,
+  [data-prts-settings-advanced] summary strong,
+  [data-prts-preset-card] strong,
+  [data-prts-settings-common] [data-prts-setting-row] > span > strong,
+  [data-prts-settings-advanced-content] section > header strong,
+  [data-prts-theme-settings] button[data-prts-setting-key],
+  [data-prts-retry-save],
+  [data-prts-reset-visual],
+  [data-prts-reset-confirm-action],
+  [data-prts-reset-cancel]
+) {
+  font-size: var(--prts-settings-text);
+  line-height: 1.25;
+}
+
+html[data-dsh-prts] [data-prts-theme-settings-header] strong {
+  font-size: 1.375rem;
+  line-height: 1.1;
+}
+
+html[data-dsh-prts] [data-prts-settings-summary] span {
+  min-height: 28px;
+  padding: 6px 9px;
+}
+
+html[data-dsh-prts] [data-prts-preset-card] {
+  min-height: 84px;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
+  min-height: 72px;
+  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-theme-settings] button[data-prts-setting-key],
+  [data-prts-retry-save],
+  [data-prts-reset-visual],
+  [data-prts-reset-confirm-action],
+  [data-prts-reset-cancel]
+) {
+  min-height: 40px;
+  padding: 8px 10px;
+}
+
+@container prts-settings (max-width: 52rem) {
+  html[data-dsh-prts] [data-prts-settings-common-grid],
+  html[data-dsh-prts] [data-prts-settings-advanced-content] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
+    border-right: 0;
+  }
+
+  html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section {
+    border-left: 0;
+    border-top: 1px solid var(--prts-line);
+  }
+}
+
+@media (max-height: 820px) and (min-width: 721px) {
+  html[data-dsh-prts] [data-prts-theme-settings-header] { min-height: 60px; padding-block: 10px; }
+  html[data-dsh-prts] [data-prts-theme-settings-close] { top: 10px; }
+}
+
+@media (max-width: 720px) {
+  html[data-dsh-prts] [data-prts-theme-settings] {
+    inset: 0;
+    width: 100vw;
+    height: 100dvh;
+    max-height: none;
+    margin: 0;
+    transform: translateY(10px);
+  }
+
+  html[data-dsh-prts] [data-prts-theme-settings][data-prts-settings-visible] { transform: translateY(0); }
+  html[data-dsh-prts] [data-prts-settings-frame] { height: 100%; max-height: none; clip-path: none; border: 0; }
+  html[data-dsh-prts] [data-prts-settings-frame]::before { right: 0; }
+  html[data-dsh-prts] [data-prts-theme-settings-header] { grid-template-columns: minmax(0, 1fr); padding: 12px 48px 11px 13px; }
+  html[data-dsh-prts] [data-prts-settings-summary] { display: none; }
+  html[data-dsh-prts] [data-prts-theme-settings-scroll] { padding: 8px; scrollbar-gutter: auto; }
+  html[data-dsh-prts] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
+  html[data-dsh-prts] [data-prts-preset-card] { min-height: 54px; border-right: 0 !important; border-bottom: 1px solid var(--prts-line) !important; }
+  html[data-dsh-prts] [data-prts-preset-card]:last-child { border-bottom: 0 !important; }
+  html[data-dsh-prts] [data-prts-settings-common-grid] { grid-template-columns: minmax(0, 1fr); }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { min-height: 62px; }
+  html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] { min-height: 40px; }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { border-right: 0; border-bottom: 1px solid var(--prts-line); }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2) { border-bottom: 1px solid var(--prts-line); }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
+  html[data-dsh-prts] [data-prts-settings-advanced-content] { grid-template-columns: minmax(0, 1fr); }
+  html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 0; border-top: 1px solid var(--prts-line); }
+  html[data-dsh-prts] [data-prts-reset-zone] { align-items: flex-start; flex-direction: column; }
+  html[data-dsh-prts] [data-prts-reset-confirm] { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key][data-prts-setting-feedback]::after {
+    animation: prts-setting-feedback 300ms ease-out both;
+  }
+}
+
+@keyframes prts-setting-feedback {
+  0% { opacity: .82; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-dsh-prts] [data-prts-theme-settings] { transition-duration: 1ms; }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html[data-dsh-prts] [data-prts-theme-settings]::backdrop,
+  html[data-dsh-prts] [data-prts-settings-backdrop] { background: color-mix(in srgb, var(--prts-canvas) 94%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
+}