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] > [data-prts-section-heading] > 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] > [data-prts-section-heading] 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] :is(
[data-prts-setting-row="sessionGlow"],
[data-prts-setting-row="sessionFlowPalette"],
[data-prts-setting-row="sessionFlowColors"],
[data-prts-setting-row="sessionFlowSpeed"]
) {
grid-column: 1 / -1;
border-right: 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-setting-row="sessionFlowPalette"] > div { flex-wrap: wrap; }
html[data-dsh-prts] [data-prts-setting-row="sessionFlowPalette"] button[data-prts-setting-key] { flex-basis: 98px; }
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-option-sample="sessionFlowPalette"] {
border: 0;
background: linear-gradient(90deg, #f7ddeb 0 33%, #65ddb0 33% 66%, #6eb7f3 66%);
clip-path: polygon(0 40%, 24% 18%, 48% 54%, 72% 24%, 100% 46%, 100% 68%, 72% 46%, 48% 76%, 24% 40%, 0 62%);
}
html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="rhodes"] { background: linear-gradient(90deg, #b9edf4 0 33%, #5ccddb 33% 66%, #5a9ee6 66%); }
html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="amber"] { background: linear-gradient(90deg, #ffe6a3 0 33%, #f0c800 33% 66%, #ee8f42 66%); }
html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="alert"] { background: linear-gradient(90deg, #ffc0b8 0 33%, #ee625a 33% 66%, #db5b8c 66%); }
html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="custom"] { background: linear-gradient(90deg, #d95785 0 33%, #d0a900 33% 66%, #268fbd 66%); }
html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] {
align-items: stretch;
padding-block: 9px;
}
html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
align-items: center;
gap: 10px;
}
html[data-dsh-prts] [data-prts-session-flow-preview] {
--prts-lifeline-pink: #f7ddeb;
--prts-lifeline-green: #65ddb0;
--prts-lifeline-blue: #6eb7f3;
width: 100%;
height: 54px;
display: block;
overflow: visible;
border: 1px solid var(--prts-line);
background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
}
html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="rhodes"] { --prts-lifeline-pink: #b9edf4; --prts-lifeline-green: #5ccddb; --prts-lifeline-blue: #5a9ee6; }
html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="amber"] { --prts-lifeline-pink: #ffe6a3; --prts-lifeline-green: #f0c800; --prts-lifeline-blue: #ee8f42; }
html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="alert"] { --prts-lifeline-pink: #ffc0b8; --prts-lifeline-green: #ee625a; --prts-lifeline-blue: #db5b8c; }
html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="custom"] { --prts-lifeline-pink: var(--prts-session-flow-back); --prts-lifeline-green: var(--prts-session-flow-core); --prts-lifeline-blue: var(--prts-session-flow-front); }
html[data-dsh-prts] [data-prts-session-flow-preview-filament="back"] { --prts-preview-color: var(--prts-lifeline-pink); }
html[data-dsh-prts] [data-prts-session-flow-preview-filament="core"] { --prts-preview-color: var(--prts-lifeline-green); }
html[data-dsh-prts] [data-prts-session-flow-preview-filament="front"] { --prts-preview-color: var(--prts-lifeline-blue); }
html[data-dsh-prts] [data-prts-session-flow-preview-layer] { fill: none; stroke: var(--prts-preview-color); stroke-linecap: round; stroke-linejoin: round; }
html[data-dsh-prts] [data-prts-session-flow-preview-layer="body"] { stroke-width: 1.3; opacity: .92; }
html[data-dsh-prts] [data-prts-session-flow-preview-layer="halo"],
html[data-dsh-prts] [data-prts-session-flow-preview-layer="core"] { opacity: 0; }
html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="halo"] { stroke-width: 5; opacity: .25; filter: blur(1.2px); }
html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="body"] { stroke-width: 2.2; }
html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 18%, #fff); stroke-width: .72; opacity: .98; }
html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="halo"] { stroke: color-mix(in srgb, var(--prts-preview-color) 42%, #fff); stroke-width: 5.5; opacity: .45; filter: blur(1.3px); }
html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 58%, #fff); }
html[data-dsh-prts] [data-prts-session-flow-color-inputs] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
html[data-dsh-prts] [data-prts-session-flow-color-inputs] label { min-width: 0; display: grid; grid-template-columns: 34px minmax(34px, 1fr); gap: 4px; align-items: center; color: var(--prts-muted); font: 700 8px/1 var(--prts-mono); }
html[data-dsh-prts] [data-prts-session-flow-color-inputs] input[type="color"] { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--prts-line); border-radius: 0; background: var(--prts-panel-raised); cursor: pointer; }
html[data-dsh-prts] [data-prts-session-flow-color-inputs] output { grid-column: 1 / -1; color: var(--prts-ink); font: 700 8px/1 var(--prts-mono); text-align: center; text-transform: uppercase; }
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] > [data-prts-section-heading] {
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px;
list-style: none;
}
html[data-dsh-prts] [data-prts-settings-advanced-content] {
display: grid;
grid-template-columns: minmax(0, 1fr);
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-traversal] {
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid var(--prts-line);
}
html[data-dsh-prts] [data-prts-particle-traversal] > span { display: grid; gap: 3px; }
html[data-dsh-prts] [data-prts-particle-traversal] > span strong { font-size: 9px; }
html[data-dsh-prts] [data-prts-particle-traversal] > span small {
color: var(--prts-muted);
font: 600 8px/1.35 var(--prts-mono);
}
html[data-dsh-prts] [data-prts-particle-traversal-output] {
min-width: 132px;
color: var(--prts-cyan);
font: 800 8px/1.2 var(--prts-mono);
text-align: right;
}
html[data-dsh-prts] [data-prts-session-flow-speed-output] {
min-width: 64px;
color: var(--prts-cyan);
font: 800 8px/1.2 var(--prts-mono);
text-align: right;
}
html[data-dsh-prts] [data-prts-session-flow-speed] input[type="range"] { min-width: 120px; }
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-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] [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-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] > [data-prts-section-heading] 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-session-flow-color-workbench] { grid-template-columns: minmax(0, 1fr); }
html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2),
html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(3) { 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; }
}
html[data-dsh-prts] [data-prts-setting-row] > [data-prts-setting-switch] {
justify-self: end;
}
/* Grouped settings: quiet surfaces, consistent rows, one accent. */
html[data-dsh-prts] [data-prts-theme-settings] {
width: min(clamp(56rem, 62vw, 68rem), calc(100vw - 3rem));
height: min(48rem, calc(100dvh - 3rem));
max-height: calc(100dvh - 3rem);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame] {
height: 100%;
clip-path: none;
border-radius: 8px;
background: var(--prts-panel);
border-color: color-mix(in srgb, var(--prts-line) 70%, transparent);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame]::before { content: none; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] {
min-height: 88px;
padding: 20px 72px 20px 28px;
background: transparent;
border-color: color-mix(in srgb, var(--prts-line) 60%, transparent);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] strong {
font-size: 22px;
letter-spacing: 0;
line-height: 1.3;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] small { font-weight: 500; letter-spacing: .08em; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-close] { top: 25px; right: 22px; border-radius: 4px; background: transparent; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-summary] span {
box-shadow: none;
background: transparent;
color: var(--prts-muted);
clip-path: none;
font-weight: 500;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] {
min-height: 0;
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] {
display: flex;
flex-direction: column;
gap: 6px;
padding: 24px 14px;
border-right: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
background: color-mix(in srgb, var(--prts-canvas) 35%, var(--prts-panel));
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump] {
text-align: left;
min-height: 42px;
padding: 10px 14px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--prts-muted);
font: 500 14px/1.4 var(--prts-body);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump]:hover,
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump]:focus-visible {
color: var(--prts-ink);
background: var(--prts-panel-raised);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { padding: 8px 28px 28px; }
html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common], [data-prts-settings-advanced], [data-prts-settings-actions]) {
border: 0;
background: transparent;
overflow: visible;
margin: 0 0 18px;
}
html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common]) > header {
min-height: auto;
padding: 24px 0 12px;
border: 0;
}
html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common]) > header strong,
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-advanced] > [data-prts-section-heading] strong {
font: 650 16px/1.5 var(--prts-body);
letter-spacing: 0;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-presets] > div { gap: 8px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] {
min-height: 94px;
padding: 14px !important;
border: 1px solid var(--prts-line) !important;
border-radius: 5px;
box-shadow: none;
gap: 8px;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card].is-selected {
border-color: var(--prts-yellow) !important;
background: color-mix(in srgb, var(--prts-yellow) 7%, var(--prts-panel)) !important;
box-shadow: none;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] span {
white-space: normal;
color: var(--prts-muted);
font-weight: 400;
line-height: 1.6;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common-grid] { grid-template-columns: minmax(0, 1fr); }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row] {
display: grid;
grid-template-columns: minmax(150px, .85fr) minmax(0, 1.6fr);
min-height: 76px;
gap: 20px;
padding: 16px 0;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
align-items: center;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-note] {
color: var(--prts-muted);
font: 400 12px/1.65 var(--prts-body);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-row] > span > strong { font-weight: 550; line-height: 1.5; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-row] > div { gap: 4px; }
html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key]:not([data-prts-preset-card]) {
border-radius: 4px;
border: 1px solid transparent;
background: var(--prts-panel-raised);
color: var(--prts-muted);
font-weight: 500;
min-height: 40px;
padding: 8px;
box-shadow: none;
}
html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key].is-selected:not([data-prts-preset-card]) {
background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel));
border-color: color-mix(in srgb, var(--prts-yellow) 70%, transparent);
color: var(--prts-ink);
}
html[data-dsh-prts] [data-prts-theme-settings] {
& [data-prts-setting-row="sessionFlowPalette"] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
& [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] { grid-template-columns: minmax(0, 1fr); }
& [data-prts-settings-advanced] { border-top: 1px solid var(--prts-line); }
& [data-prts-settings-advanced] > [data-prts-section-heading] { padding: 22px 0; }
& [data-prts-settings-section][hidden] { display: none !important; }
& [data-prts-settings-advanced-content] { border: 0; }
& [data-prts-settings-advanced-content] > section { padding: 0 0 20px; }
& :is([data-prts-advanced-summary], [data-prts-session-flow-speed-output], [data-prts-particle-traversal-output]) { color: var(--prts-muted); font-size: 12px; font-weight: 400; }
& [data-prts-settings-sidebar] { display:flex; flex-direction:column; min-height:0; position:relative; border-right:1px solid var(--prts-line); }
& [data-prts-settings-nav] { border:0; background:none; }
& [data-prts-settings-actions] { margin:auto 0 0; padding:14px; border:0; min-height:0; }
& [data-prts-reset-zone] { min-height:0; }
& [data-prts-reset-visual] { color:var(--prts-muted); box-shadow:none; background:none; font-size:12px; }
& [data-prts-reset-confirm], & [data-prts-persistence-error] { display:flex; gap:8px; align-items:center; position:absolute; left:12px; bottom:52px; width:270px; padding:16px; border:1px solid var(--prts-line); border-radius:6px; background:var(--prts-panel-raised); box-shadow:0 8px 24px #0004; z-index:5; flex-wrap:wrap; font:400 12px/1.6 var(--prts-body); }
& [data-prts-reset-confirm] > span { flex-basis:100%; }
@media(max-width:720px) {
& [data-prts-settings-sidebar] { flex-direction:row; border:0; border-bottom:1px solid var(--prts-line); }
& [data-prts-settings-nav] { flex:1; min-width:0; overflow-x:auto; padding:8px 4px; border:0; }
& [data-prts-settings-jump] { padding:10px 8px; }
& [data-prts-settings-actions] { flex:0 0 auto; white-space:nowrap; margin:0; padding:8px 4px; align-self:center; }
& [data-prts-reset-confirm], & [data-prts-persistence-error] { left:auto; right:8px; top:100%; bottom:auto; max-width:calc(100vw - 32px); }
}
& [data-prts-reset-zone] { padding: 0; }
}
@media (max-width: 720px) {
html[data-dsh-prts] [data-prts-theme-settings] { width: 100vw; height: 100dvh; max-height: none; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame] { border-radius: 0; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] { min-height: 76px; padding: 16px 58px 16px 20px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-close] { top: 20px; right: 14px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { flex-direction: row; padding: 8px 12px; gap: 0; border: 0; border-bottom: 1px solid var(--prts-line); }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump] { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; white-space: nowrap; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { padding: 0 20px 24px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] { min-height: 70px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row]:has(> [data-prts-setting-switch]) { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
}
html[data-dsh-prts] [data-prts-theme-settings] {
& [data-prts-theme-settings-scroll] {
padding: 20px 24px 28px;
background: var(--prts-canvas);
}
& [data-prts-settings-section] {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
scroll-margin-top: 16px;
}
& [data-prts-settings-section="appearance"] > section {
margin-bottom: 8px;
}
& [data-prts-settings-section="appearance"] > section > header {
padding: 16px 0 10px;
}
& [data-prts-settings-section="appearance"] > section > header strong {
font-size: 13px;
color: var(--prts-muted);
}
& [data-prts-settings-jump][aria-selected="true"] {
color: var(--prts-ink);
background: var(--prts-panel-raised);
box-shadow: inset 3px 0 var(--prts-yellow);
}
@media (max-width: 720px) {
& [data-prts-theme-settings-scroll] { padding: 16px 12px 24px; }
& [data-prts-settings-section] { padding: 0; margin: 0; }
& [data-prts-settings-jump][aria-selected="true"] { box-shadow: inset 0 -3px var(--prts-yellow); }
}
& [data-prts-custom-emblem] {
display: grid;
gap: 14px;
padding-block: 16px 24px;
border-bottom: 1px solid var(--prts-line);
margin-bottom: 20px;
}
& [data-prts-custom-emblem] header { display: grid; gap: 6px; }
& [data-prts-custom-emblem] :is(small, p) { font: 400 12px/1.6 var(--prts-body); color: var(--prts-muted); margin: 0; }
& [data-prts-custom-emblem] label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; }
& [data-prts-emblem-editor]{display:grid;gap:14px;}& [data-prts-custom-emblem] :is(input,select){min-width:0;max-width:100%;}& [data-prts-custom-emblem] select{padding:8px;background:var(--prts-panel-raised);color:var(--prts-ink);border:1px solid var(--prts-line);}& [data-prts-emblem-preview]{touch-action:none;cursor:grab;width:min(100%,280px);height:auto;justify-self:center;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-actions]{display:flex;flex-wrap:wrap;gap:10px;}& [data-prts-emblem-actions] button{padding:10px 14px;border:1px solid var(--prts-line);border-radius:4px;color:var(--prts-ink);background:var(--prts-panel-raised);}& [data-prts-emblem-actions] button:disabled{opacity:.45;}& [data-prts-custom-emblem] h4{margin:8px 0 12px;font:600 14px/1.5 var(--prts-body);}& [data-prts-emblem-list]{display:grid;gap:10px;list-style:none;padding:0;margin:14px 0;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]){display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& :is([data-prts-emblem-list],[data-prts-emblem-hero-row]) canvas{width:48px;height:48px;flex:none;border-radius:3px;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]) > span{flex:1;min-width:100px;overflow-wrap:anywhere;font-size:13px;}& [data-emblem-action]{padding:7px 10px;border:1px solid var(--prts-line);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);}& [data-emblem-action]:disabled{opacity:.4;}& [data-prts-emblem-reorder]{padding:0;border:0;background:transparent;cursor:grab;}& [data-emblem-key]{touch-action:none;cursor:grab;user-select:none;-webkit-touch-callout:none}& [data-prts-emblem-reorder]:focus-visible{outline:2px solid var(--prts-ink);outline-offset:3px;}& [data-prts-emblem-sorting]{user-select:none;}& [data-prts-emblem-dragging]{opacity:.35;border-style:dashed !important;}& [data-prts-emblem-drag-ghost]{background:var(--prts-panel-raised);box-shadow:0 8px 28px #0005;opacity:.95;}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard]){position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--prts-line);border-radius:8px;background:var(--prts-panel-raised);color:var(--prts-ink);box-shadow:0 16px 64px #0008;font:13px/1.7 var(--prts-body);}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard])::backdrop{background:#0008;}& [data-prts-emblem-reset-confirm]{& > strong{display:block;font-size:16px;}& > p{margin:12px 0 18px;}& > [data-prts-emblem-actions]{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--prts-line);}& [data-prts-emblem-reset-cancel]{border:0;background:transparent;}& [data-emblem-action]{display:flex;gap:6px;padding:5px 10px;font-size:12px;background:transparent;}& [data-prts-emblem-reset-status]:empty{display:none;}}& [data-prts-emblem-reset-exports]{display:grid;gap:8px;margin:18px 0;}& [data-prts-emblem-reset-asset]{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-reset-asset] > span{overflow-wrap:anywhere;line-height:1.5;}& [data-prts-emblem-reset-asset] canvas{width:36px;height:36px;border-radius:3px;}& [data-prts-emblem-workspace]{width:min(820px,calc(100vw - 24px));padding:0;max-height:90dvh;}
& [data-prts-emblem-edit-header],& [data-prts-emblem-edit-bar]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;}
& [data-prts-emblem-edit-header]{border-bottom:1px solid var(--prts-line);}
& [data-prts-emblem-edit-header] button{border:0;background:none;color:inherit;font-size:22px;}
& [data-prts-emblem-edit-body]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:22px;overflow:auto;max-height:60dvh;}
& [data-prts-emblem-edit-preview]{display:grid;align-content:center;justify-items:center;background:var(--prts-canvas);border-radius:4px;min-height:240px;}
& [data-prts-emblem-edit-controls]{display:grid;gap:12px;min-width:0;}
& [data-prts-emblem-edit-bar]{border-top:1px solid var(--prts-line);flex-wrap:wrap;}
& [data-prts-emblem-edit-bar] [data-prts-emblem-actions]{margin-left:auto;}
@media(max-width:640px){& [data-prts-emblem-edit-body]{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;}& [data-prts-emblem-edit-preview]{min-height:180px;}& [data-prts-emblem-preview]{max-width:220px;}}
@media (max-width:720px){& [data-prts-emblem-list] [data-prts-emblem-actions]{flex-basis:100%;gap:5px;}}}

html[data-dsh-prts]{
[data-prts-avatars]{grid-column:1/-1;display:grid;gap:12px}
[data-prts-avatars][hidden]{display:none}
[data-prts-avatars] header{display:grid;gap:6px}
[data-prts-avatars] :is(small,p){font-size:12px;color:var(--prts-muted)}
[data-prts-avatar-row]{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
[data-prts-avatar-preview]{display:grid;place-items:center;box-sizing:border-box;flex:0 0 44px;width:44px;height:44px;min-width:44px;max-width:44px;aspect-ratio:1;padding:5px;border:0;border-radius:50%;corner-shape:round;background-color:transparent;background-position:center;background-size:100% 100%,cover,auto;background-repeat:no-repeat;background-origin:border-box,content-box,content-box;background-clip:border-box,content-box,content-box}
[data-prts-avatar-preview="user"]{background-image:var(--prts-avatar-ring-image),var(--prts-custom-user-avatar,none),linear-gradient(var(--prts-chat-avatar-surface),var(--prts-chat-avatar-surface))}
[data-prts-avatar-preview="user"]::after{content:var(--prts-user-avatar-label,"我")}
[data-prts-avatar-preview="assistant"]{background-image:var(--prts-avatar-ring-image),var(--prts-custom-assistant-avatar,var(--prts-assistant-avatar-image,none)),linear-gradient(var(--prts-chat-avatar-surface),var(--prts-chat-avatar-surface))}
[data-prts-avatar-upload]{position:relative;padding:8px;border:1px solid var(--prts-line);cursor:pointer}
[data-prts-avatar-upload] input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
[data-prts-avatar-upload]:focus-within{outline:2px solid var(--prts-cyan)}
[data-prts-avatar-upload]:has(input:disabled){opacity:.4}

}

html[data-dsh-prts] [data-prts-avatar-crop]{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(420px,calc(100vw - 24px));max-height:90dvh;overflow:auto;padding:24px;background:var(--prts-panel);color:var(--prts-ink);border:1px solid var(--prts-line);font:14px/1.5 var(--prts-body);
 &::backdrop{background:#0009}
 & canvas{display:block;width:100%;height:auto;aspect-ratio:1;margin:16px auto;border-radius:4px;corner-shape:round;outline:1px solid var(--prts-line-strong);touch-action:none;cursor:grab;background:var(--prts-canvas)}
 & canvas:active{cursor:grabbing}
 & label{display:flex;align-items:center;gap:12px}
 & input{flex:1;min-width:0}
 & p{font-size:12px;color:var(--prts-muted)}
 & header,& [data-crop-tools]{display:flex;align-items:center;justify-content:space-between;gap:12px}
 & [data-crop-tools] label{flex:1;min-width:0;gap:8px}
 & [data-crop-tools] button{padding:6px;font-size:12px}
 & footer{display:grid;grid-template-columns:1fr auto auto;gap:4px;border-top:1px solid var(--prts-line);padding-top:16px}
 & footer span{display:none}
 & footer button{padding:8px;font-size:12px}
 & [data-crop-reset]{justify-self:start}
 & [data-crop-reset],& [data-crop-cancel]{border-color:transparent;background:transparent}
 & [data-crop-save]{background:var(--prts-yellow);color:#151a1d;border-color:var(--prts-yellow)}
 & button{padding:8px 12px;background:var(--prts-panel-raised);color:var(--prts-ink);border:1px solid var(--prts-line)}
 & button:disabled{opacity:.5}
}

html[data-dsh-prts]{
[data-prts-conversation-settings]{display:grid;gap:16px;padding:18px;border:1px solid var(--prts-line);background:var(--prts-panel)}
& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 8px 0; }
& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] > span { display: grid; gap: 4px; min-width: 0; }
& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] > [data-prts-setting-switch] { justify-self: start; }
[data-prts-conversation-settings] header{display:grid;gap:5px}
[data-prts-conversation-settings] small{display:block;color:var(--prts-muted);font-size:12px;line-height:1.6}
[data-prts-conversation-cards]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
[data-prts-conversation-cards] button{display:grid;gap:6px;text-align:left;padding:14px;min-width:0;color:var(--prts-ink);background:var(--prts-canvas);border:1px solid var(--prts-line);cursor:pointer;font:inherit}
[data-prts-conversation-cards] button[aria-pressed="true"]{border-color:var(--prts-cyan);background:color-mix(in srgb,var(--prts-cyan) 7%,var(--prts-canvas))}
[data-prts-conversation-sample]{display:grid;gap:8px;height:48px;padding:8px;opacity:.7}
[data-prts-conversation-sample] i{width:70%;height:10px;background:var(--prts-muted)}
[data-prts-conversation-sample] i:first-child{justify-self:end;width:45%}
[data-prts-conversation-sample="baker"] i{height:16px;border-radius:5px;corner-shape:round}
[data-prts-avatar-choices]{display:flex;flex-wrap:wrap;gap:24px}
[data-prts-avatar-preview]{cursor:pointer;color:var(--prts-ink);font:inherit;box-shadow:none}
[data-prts-avatar-preview]:focus-visible{outline:2px solid var(--prts-cyan);outline-offset:3px}
[data-prts-avatar-preview]::before{display:none}
[data-prts-avatars]{padding-top:16px;border-top:1px solid var(--prts-line)}
[data-prts-avatar-crop] [data-prts-avatar-upload]{padding:6px 10px;font-size:12px}
}
@media(max-width:480px){html[data-dsh-prts] [data-prts-conversation-cards]{grid-template-columns:1fr}}
html[data-dsh-prts] [data-prts-preview-settings] {
& { border:1px solid var(--prts-line);border-radius:8px;overflow:hidden;background:var(--prts-panel); }
& [data-prts-setting-row] { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border:0;background:none; }
& [data-prts-setting-row] > span { display:grid;gap:5px;min-width:0; }
& [data-prts-setting-row] strong { font:600 12px/1.5 var(--prts-body); }
& [data-prts-setting-row="previewReplyLimit"] { padding:0 0 14px;gap:12px; }
& [data-prts-setting-row="previewReplyLimit"] strong { color:var(--prts-muted);font-size:11px; }
& [data-prts-preview-reply-limit] { min-width:112px;padding:7px 10px;border:1px solid var(--prts-line);border-radius:5px;background:var(--prts-panel-raised);color:var(--prts-ink);font:400 11px/1.5 var(--prts-body); }
& [data-prts-preview-reply-limit]:focus-visible { outline:2px solid var(--prts-ink);outline-offset:2px; }
& [data-prts-preview-details] { padding:0 12px;margin:0 -12px 8px 0;border-radius:5px;background:color-mix(in srgb,var(--prts-ink) 3%,transparent); }
& [data-prts-preview-details] [data-prts-setting-row] { padding:10px 0; }
& [data-prts-preview-details] [data-prts-setting-row] strong { font-size:11px; }
& [data-prts-preview-setting-description] { color:var(--prts-muted);font:400 11px/1.6 var(--prts-body); }
& [data-prts-preview-master] { padding:8px 20px;background:color-mix(in srgb,var(--prts-yellow) 5%,transparent); }
& [data-prts-preview-master] [data-prts-setting-row] strong { font-size:14px; }
& [data-prts-preview-options] { padding:0 20px 6px;border-top:1px solid var(--prts-line); }
& [data-prts-preview-setting-group] { padding:18px 0 4px; }
& [data-prts-preview-setting-group] + [data-prts-preview-setting-group] { border-top:1px solid var(--prts-line); }
& [data-prts-preview-setting-group] > header { display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:3px; }
& [data-prts-preview-setting-group] > header strong { color:var(--prts-muted);font:600 11px/1.5 var(--prts-body); }
& [data-prts-preview-setting-group] > header small { color:var(--prts-muted);font:400 10px/1.5 var(--prts-body); }
@media(max-width:640px) {
  & [data-prts-preview-master] { padding-inline:14px; }
  & [data-prts-preview-options] { padding-inline:14px; }
  & [data-prts-setting-row] { gap:12px; }
}
}

html[data-dsh-prts] [data-prts-theme-settings] [data-prts-ai-tools] { padding:0 20px 20px;font:12px/1.75 var(--prts-body);overflow-wrap:anywhere; }
html[data-dsh-prts] [data-prts-ai-tools] > section { padding:16px 0;border-top:1px solid var(--prts-line); }
html[data-dsh-prts] [data-prts-ai-tools] h3 { margin:0 0 8px;font-size:14px; }
html[data-dsh-prts] [data-prts-ai-tools] :is(p,dd,small) { color:var(--prts-muted); }
html[data-dsh-prts] [data-prts-ai-tools] h3 small { margin-left:8px;font-size:11px;font-weight:400; }
html[data-dsh-prts] [data-prts-ai-tools] blockquote { margin:12px 0;padding:8px 12px;border-left:2px solid var(--prts-cyan);background:color-mix(in srgb,var(--prts-cyan) 5%,transparent); }
html[data-dsh-prts] [data-prts-ai-tools] summary { cursor:pointer; }
html[data-dsh-prts] [data-prts-ai-tools] dt { margin-top:12px; }
html[data-dsh-prts] [data-prts-ai-tools] dd { margin:3px 0 0; }

html[data-dsh-prts] [data-prts-transfer] {
  display: grid;
  gap: 16px;
  padding-block: 16px;
  & header { display: grid; gap: 8px; }
  & p, & small { margin: 0; color: var(--prts-muted); line-height: 1.7; overflow-wrap: anywhere; }
  & label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  & input[type="file"] { max-width: 100%; min-width: 0; }
  & input[type="checkbox"] { accent-color: var(--prts-yellow); }
  & button { justify-self: start; padding: 8px 14px; border: 1px solid var(--prts-line-strong); border-radius: 0; background: var(--prts-panel-raised); color: var(--prts-ink); font: inherit; cursor: pointer; }
  & button:hover:not(:disabled) { border-color: var(--prts-yellow); }
  & button:focus-visible { outline: 2px solid var(--prts-yellow); outline-offset: 3px; }
  & button:disabled { opacity: .55; cursor: wait; }
  & [data-prts-transfer-export], & [data-prts-transfer-apply] { border-color: var(--prts-yellow); }
  & hr { width: 100%; border: 0; border-top: 1px solid var(--prts-line); }
  & [data-prts-transfer-preview], & [data-prts-transfer-recovery] { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--prts-line); }
  & [hidden] { display: none !important; }
}

html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
html[data-dsh-prts] [data-prts-transfer-open] { display:flex; align-items:center; gap:8px; width:100%; padding:10px 8px; background:none; border:1px solid var(--prts-line); border-radius:4px; color:var(--prts-ink); font:500 12px/1.4 var(--prts-body); cursor:pointer; }
html[data-dsh-prts] [data-prts-transfer-open]:hover { border-color:var(--prts-yellow); }
html[data-dsh-prts] [data-prts-transfer-dialog] { box-sizing:border-box; width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--prts-line-strong); border-radius:8px; background:var(--prts-canvas); color:var(--prts-ink); box-shadow:0 24px 80px #0006; font:13px/1.6 var(--prts-body); overflow:auto; }
html[data-dsh-prts] [data-prts-transfer-dialog]::backdrop { background:#0007; }
html[data-dsh-prts] [data-prts-transfer] {
  padding:24px; gap:20px;
  & [data-prts-transfer-heading] { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  & h2 { margin:4px 0 0; font-size:20px; line-height:1.4; }
  & h3 { margin:0; font-size:14px; }
  & [data-prts-transfer-close] { padding:2px 10px; font-size:24px; border:0; background:none; }
  & [data-prts-transfer-columns] { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  & [data-prts-transfer-card] { display:flex; flex-direction:column; gap:12px; min-width:0; }
  & [data-prts-transfer-card] + section { padding-left:24px; border-left:1px solid var(--prts-line); }
  & [data-prts-transfer-card] > button { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
  & [data-prts-transfer-option] { align-items:flex-start; flex-wrap:nowrap; padding:12px 0 0; }
  & [data-prts-transfer-option] input { margin:5px 0 0; }
  & [data-prts-transfer-option] small { display:block; margin-top:4px; }
  & [data-prts-transfer-file-hint] { display:grid; place-items:center; flex:1; gap:6px; padding:12px; border:1px dashed var(--prts-line-strong); }
  & [data-prts-transfer-file-hint] > span { font-size:24px; color:var(--prts-muted); }
  & [data-prts-transfer-buttons] { display:flex; gap:8px; }
  & [data-prts-transfer-compatibility] { margin:0; padding:10px 12px; border:1px solid var(--prts-yellow); overflow-wrap:anywhere; }
  & [data-prts-transfer-recovery] { border:0; border-top:1px solid var(--prts-line); padding:16px 0 0; }
  & [data-prts-transfer-status]:empty { display:none; }
}
@media(max-width:720px) {
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-rows:auto minmax(0,1fr) auto; }
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-sidebar] { display:contents; }
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { grid-row:1; }
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { grid-row:2; }
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { grid-row:3; position:relative; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--prts-line); background:var(--prts-canvas); }
  html[data-dsh-prts] [data-prts-transfer-open] { width:auto; }
  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-reset-confirm],[data-prts-persistence-error]) { top:auto; bottom:100%; }
}
@media(max-width:540px) {
  html[data-dsh-prts] [data-prts-transfer] { padding:20px; }
  html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-columns] { grid-template-columns:1fr; gap:20px; }
  html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-card] + section { padding:20px 0 0; border-left:0; border-top:1px solid var(--prts-line); }
}

/* Shared quiet actions below the settings categories. */
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] {
  padding:12px 10px; gap:2px; border-top:1px solid var(--prts-line);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action] {
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  width:100%; min-height:40px; padding:10px; margin:0;
  border:0; border-radius:5px; clip-path:none; box-shadow:none;
  background:transparent; color:var(--prts-muted);
  font:500 12px/1.4 var(--prts-body); text-align:left; cursor:pointer;
}
html[data-dsh-prts] [data-prts-footer-action] svg {
  width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:hover {
  background:var(--prts-panel-raised); color:var(--prts-ink);
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:focus-visible {
  outline:2px solid var(--prts-yellow); outline-offset:-2px;
}
html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action][hidden] { display:none; }
@media(max-width:720px) {
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 12px; }
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-reset-zone] { width:100%; }
}