:root {
  color-scheme: light; --desk: oklch(95% .003 250); --sheet: #fff; --ink: oklch(27% .009 250);
  --muted: oklch(47% .009 250); --line: oklch(90% .005 250); --accent: oklch(40% .045 165); --wash: oklch(95% .012 165);
  --field: oklch(97% .003 250); --error: oklch(42% .14 25); --focus: oklch(47% .1 180);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px; color: var(--ink); background: var(--desk); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .open-button { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--sheet); padding: 8px 13px; cursor: pointer; transition: background-color 140ms, border-color 140ms, color 140ms; }
button:hover, .open-button:hover { background: var(--wash); }
button:active { background-color: var(--wash); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input:not([type='range']):not([type='checkbox']):not([type='file']):not([type='color']), select, textarea { width: 100%; min-width: 0; min-height: 36px; border: 1px solid transparent; border-radius: 6px; background: var(--field); padding: 8px 10px; }
input:not([type=range]):hover, select:hover, textarea:hover { border-color: var(--line); }
textarea { resize: vertical; line-height: 1.6; }
input[aria-invalid='true'] { border-color: var(--error) !important; }
input[type='checkbox'], input[type='range'] { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { line-height: 1.7; text-wrap: pretty; }
small { font-size: 12px; }
.app-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 30px; background: var(--sheet); border-bottom: 1px solid var(--line); }
.identity { display: flex; gap: 13px; align-items: center; }
.brand-mark { font-family: 'Songti SC', serif; font-size: 25px; color: var(--sheet); background: var(--accent); width: 45px; height: 45px; display: grid; place-items: center; border-radius: 4px; }
.identity h1 { font-size: 22px; font-weight: 600; letter-spacing: .08em; }
.identity p { font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: .06em; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.offline-label { font-size: 12px; color: var(--accent); margin-right: 10px; }
.primary-action { background: var(--accent); color: white; border-color: var(--accent); }
.primary-action:hover { background: oklch(34% .065 150); }
.open-button { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.file-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.open-button:focus-within, .dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.workbench { display: grid; grid-template-columns: 316px minmax(400px, 1fr) 248px; max-width: 1840px; margin: auto; min-height: calc(100dvh - 133px); }
.editor { background: var(--sheet); border-right: 1px solid var(--line); min-width: 0; }
.editor-heading { padding: 24px 22px 17px; display: flex; flex-direction: column; gap: 18px; }
.segmented { display: inline-flex; background: var(--field); padding: 3px; gap: 2px; border-radius: 7px; }
.segmented button { border: 0; background: transparent; min-height: 31px; padding: 6px 13px; font-size: 12px; }
.segmented button[aria-pressed='true'] { background: var(--sheet); color: var(--accent); box-shadow: 0 1px 3px #172a1d18; }
.editor-heading .segmented { align-self: flex-start; }
.editor-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 15px; }
.editor-tabs button { flex: 1; white-space: nowrap; border: 0; border-radius: 0; padding: 12px 4px; min-height: 44px; background: transparent; color: var(--muted); }
.editor-tabs button[aria-selected='true'] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); font-weight: 600; }
.editor-panel { max-height: calc(100dvh - 305px); overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 24px; }
.form-group { padding-top: 23px; }
.form-group + .form-group { margin-top: 24px; border-top: 1px solid var(--line); }
.form-group > h3 { margin-bottom: 16px; }
.form-group > .hint { margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-top: 15px; }
.field label, .field > span { font-size: 12px; font-weight: 500; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.templates { display: flex; flex-direction: column; gap: 4px; }
.template { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; padding: 10px 5px; background: transparent; }
.template strong { font-size: 13px; font-weight: 500; }
.template small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }
.swatches { display: flex; flex-shrink: 0; }
.swatches i { width: 16px; height: 32px; border: 1px solid #00000010; }
.swatches i:first-child { border-radius: 4px 0 0 4px; }
.swatches i:last-child { border-radius: 0 4px 4px 0; }
.check-label { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.check-label input { margin: 3px 0 0; }
.color-control { display: flex; gap: 9px; }
.color-control input[type='color'] { height: 38px; width: 42px; padding: 2px; border: 1px solid var(--line); background: white; border-radius: 5px; flex-shrink: 0; cursor: pointer; }
.color-control input[type='text'] { font-family: ui-monospace, monospace; font-size: 12px; }
.range-control { display: flex; align-items: center; gap: 12px; }
.range-control input { flex: 1; min-width: 0; }
.range-control output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 7px 0; text-align: left; font-size: 12px; }
.dropzone { margin-top: 18px; position: relative; min-height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; border: 1px dashed oklch(68% .035 150); border-radius: 8px; background: oklch(96.7% .009 150); padding: 14px; }
.dropzone.dragging { outline: 2px solid var(--accent); background: var(--wash); }
.upload-symbol { font-size: 25px; color: var(--accent); }
.dropzone strong { font-size: 12px; font-weight: 500; }
.image-thumb { width: 100%; max-height: 125px; object-fit: contain; }
.asset-caption { display: flex; flex-direction: column; align-items: flex-start; margin: 7px 0; }
.asset-caption code { font-size: 10px; overflow-wrap: anywhere; color: var(--muted); }
details { margin-top: 20px; }
summary { cursor: pointer; font-size: 12px; padding: 8px 0; }
.focal-pad { display: block; position: relative; margin-top: 18px; width: 100%; padding: 0; border: 0; border-radius: 4px; overflow: hidden; line-height: 0; }
.focal-pad img { width: 100%; max-height: 350px; object-fit: fill; }
.focal-marker { position: absolute; width: 18px; height: 18px; border: 2px solid white; outline: 1px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.preview-workspace { min-width: 0; padding: 24px 26px 20px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; margin: 23px 0 8px; color: var(--muted); font-size: 11px; }
.preview-heading .check-label { margin: 0; font-size: 11px; }
.preview-sheet { display: flex; justify-content: center; align-items: flex-start; padding: 16px 4px 20px; min-height: 620px; }
.button-sampler { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 13px; padding: 12px; border-radius: 8px; }
.preview-caption { max-width: 62ch; margin: auto; color: var(--muted); font-size: 11px; text-align: center; line-height: 1.7; }
.preview-stale { color: var(--error); }
.validation-panel { background: oklch(97.8% .005 150); border-left: 1px solid var(--line); padding: 27px 21px; }
.validation-panel h2 { font-size: 15px; margin-bottom: 20px; }
.validation-panel h3 { font-size: 12px; margin: 28px 0 9px; }
.validation-state { font-size: 12px; padding: 10px 12px; border-radius: 5px; margin-bottom: 10px; }
.valid { background: var(--wash); color: var(--accent); }
.invalid { background: oklch(94% .03 25); color: var(--error); }
.validation-error { margin-top: 12px; color: var(--error); font-size: 11px; overflow-wrap: anywhere; }
.error-path { display: block; border: 0; padding: 4px 0; min-height: 0; color: var(--error); font: 10px/1.6 ui-monospace, monospace; text-align: left; overflow-wrap: anywhere; background: transparent; }
.contrast-list { display: grid; grid-template-columns: 1fr auto; gap: 14px 6px; margin: 18px 0; font-size: 11px; }
.contrast-list dt { color: var(--muted); }
.contrast-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.protection-note { padding: 16px 0; border-block: 1px solid var(--line); }
.protection-note strong { display: block; font-size: 11px; margin-bottom: 7px; }
.limits { white-space: pre-line; font-size: 10px; margin-top: 22px; color: var(--muted); }
.app-footer { padding: 11px 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font-size: 11px; background: var(--sheet); color: var(--muted); }
.status-message { overflow-wrap: anywhere; }
.status-message.error { color: var(--error); }
.replace-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 26px; max-width: min(430px, calc(100vw - 32px)); background: var(--sheet); color: var(--ink); }
.replace-dialog::backdrop { background: #15251bc0; }
.replace-dialog p { margin: 16px 0 24px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (min-width: 1550px) { .workbench { grid-template-columns: 345px minmax(400px, 1fr) 280px; } .editor-panel { padding-inline: 28px; } }
@media (max-width: 1120px) { .workbench { grid-template-columns: 300px minmax(350px, 1fr); } .validation-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .validation-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 35px; } .validation-panel h3 { margin-top: 12px; } .editor-panel { max-height: 750px; } }
@media (max-width: 720px) { .app-header { align-items: flex-start; flex-direction: column; padding: 18px; gap: 18px; } .header-actions { width: 100%; justify-content: flex-end; } .offline-label { margin-right: auto; } .workbench { grid-template-columns: 1fr; } .editor { border-right: 0; } .editor-heading { flex-direction: row; align-items: center; justify-content: space-between; } .editor-panel { max-height: 430px; } .preview-workspace { padding: 22px 14px; } .validation-panel > div { display: block; } .app-footer { flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.device { position: relative; isolation: isolate; overflow: hidden; background: var(--theme-background); color: var(--theme-textPrimary); border: 6px solid #37483d; border-radius: 30px; width: 342px; min-height: 630px; flex-shrink: 0; font-size: 12px; }
.device.tablet { width: 100%; max-width: 790px; border-radius: 22px; min-height: 525px; }
.device-content { position: relative; z-index: 1; padding: 0 18px; }
.scene-background, .protected-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.theme-image { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.theme-image img { position: absolute; max-width: none; pointer-events: none; }
.theme-image[data-motion='drift'] { animation: theme-drift var(--motion-duration) ease-in-out infinite; }
@keyframes theme-drift {
  0%, 50%, 100% { transform: translateX(0) scale(var(--drift-scale)); }
  25% { transform: translateX(var(--drift)) scale(var(--drift-scale)); }
  75% { transform: translateX(var(--drift-negative)) scale(var(--drift-scale)); }
}
.breathing-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 64% 64% at 34% 30%, #ffffff 0%, #ffffff66 45%, #ffffff00 100%); opacity: 0; animation: theme-breathe var(--motion-duration) ease-in-out infinite; pointer-events: none; }
@keyframes theme-breathe { 0%, 100% { opacity: 0; } 50% { opacity: var(--breath-high); } }
[data-page-hidden='true'] .theme-image, [data-page-hidden='true'] .breathing-spot { animation: none !important; transform: none !important; }
[data-page-hidden='true'] .breathing-spot { opacity: 0; }
.status-bar { display: flex; justify-content: space-between; padding: 13px 1px 17px; font-size: 10px; }
.home-greeting > span { font-size: 10px; color: var(--theme-textSecondary); }
.home-greeting h2 { font-size: 18px; font-weight: 600; margin: 7px 0 16px; }
.sample-component { position: relative; border-style: solid; overflow: hidden; font: inherit; padding: 10px 13px; }
.sample-content { position: relative; z-index: 1; display: block; }
button.sample-component { border: 0; border-radius: 0; background: transparent; overflow: visible; box-shadow: none; min-height: 38px; transition: none; }
button.sample-component:hover, button.sample-component:active { background: transparent; transform: none; }
button.sample-component:active { opacity: var(--pressed-opacity); }
button.sample-component:disabled { opacity: var(--disabled-opacity); }
.button-visual { position: absolute; inset: 0; border-style: solid; overflow: hidden; transition: transform 180ms ease-out; }
.button-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 180ms ease-out; }
button.sample-component[data-effect='scale']:active > .button-visual { transform: scale(var(--pressed-scale)); }
button.sample-component[data-effect='glow']:active > .button-visual > .button-glow { opacity: var(--glow-opacity); }
.sample-iconButton { min-width: 36px; padding: 7px; }
.sample-input { margin-bottom: 18px; color: var(--theme-textSecondary); }
.search-sample .sample-content { display: flex; gap: 10px; align-items: center; font-size: 11px; }
.hero-sample { position: relative; height: 160px; border-radius: 12px; overflow: hidden; background: var(--theme-accentSurface); }
.hero-copy { position: relative; z-index: 1; padding: 19px 17px; color: var(--theme-textPrimary); background: var(--theme-surface); width: fit-content; max-width: 88%; min-height: 100%; }
.hero-copy small { font-size: 9px; color: var(--theme-textSecondary); }
.hero-copy h3 { font-size: 20px; font-weight: 500; margin: 9px 0 6px; }
.hero-copy p { font-size: 9px; color: var(--theme-textSecondary); margin-bottom: 10px; }
.hero-copy .sample-primaryButton { padding: 7px 12px; min-height: 28px; font-size: 10px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.section-title h3 { font-size: 12px; }
.section-title > span { font-size: 9px; color: var(--theme-textSecondary); }
.section-title .sample-chip { padding: 4px 8px; font-size: 8px; }
.moods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.moods .sample-card { min-height: 81px; padding: 11px; }
.moods .sample-content { min-height: 60px; display: flex; flex-direction: column; justify-content: flex-end; position: static; }
.moods strong, .moods small { position: relative; z-index: 1; background: var(--theme-surface); align-self: flex-start; padding: 3px 5px; }
.moods strong { font-size: 11px; }
.moods small { font-size: 8px; color: var(--theme-textSecondary); }
.track-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--theme-divider); }
.track-number { color: var(--theme-textSecondary); font-size: 10px; }
.track-row > span:nth-child(2) { flex: 1; }
.track-row strong { font-size: 11px; font-weight: 500; display: block; }
.track-row small { font-size: 8px; color: var(--theme-textSecondary); display: block; margin-top: 4px; }
.track-row .sample-iconButton { min-height: 26px; }
.sample-miniPlayer { margin: 14px 0 7px; padding: 8px; }
.sample-miniPlayer > .sample-content { display: flex; align-items: center; gap: 10px; }
.sample-miniPlayer > .sample-content > span { flex: 1; }
.sample-miniPlayer strong { font-size: 10px; display: block; }
.sample-miniPlayer small { font-size: 8px; display: block; margin-top: 4px; color: var(--theme-textSecondary); }
.mini-album { height: 31px; width: 31px; background: var(--theme-accentSurface); color: var(--theme-accent); display: grid; place-items: center; border-radius: 4px; }
.sample-bottomBar { margin: 0 -18px; padding: 15px 20px 18px; border-radius: 0 !important; }
.sample-bottomBar > .sample-content { display: flex; justify-content: space-around; font-size: 9px; }
.active-tab { color: var(--theme-accent); font-weight: 600; }
.player-top { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.player-content { min-height: 554px; }
.record { position: relative; width: 235px; height: 235px; margin: 25px auto; border-radius: 50%; background: #273c30; overflow: hidden; border: 12px solid #27362d; display: grid; place-items: center; }
.record-label { position: relative; height: 84px; width: 84px; border-radius: 50%; background: var(--theme-accentSurface); color: var(--theme-accent); display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 17px; }
.record-label small { font-size: 8px; letter-spacing: 3px; margin-top: 6px; }
.record-hole { position: absolute; inset: calc(50% - 3px); border-radius: 50%; background: var(--theme-background); }
.player-scene-stage { position: relative; isolation: isolate; width: calc(100% + 36px); margin: 8px -18px 6px; aspect-ratio: 390 / 350; overflow: hidden; background: var(--theme-background); }
.player-scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-cover { position: absolute; height: 40%; aspect-ratio: 1; left: 50%; top: 30%; transform: translateX(-50%); border-radius: 50%; overflow: hidden; box-shadow: 0 16px 30px -12px #00000085, 0 1px 0 #FFFFFF55 inset; }
.scene-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-focused .scene-cover { height:68%;top:16%; }
.suite-square-cover { width:82%;aspect-ratio:1;margin:24px auto;border-radius:18px;overflow:hidden; }
.suite-square-cover img { width:100%;height:100%;object-fit:cover; }
.suite-inline-lyrics { text-align:center;margin:16px 0;color:var(--theme-textSecondary);font-size:12px; }
.suite-inline-lyrics p { margin:8px 0; }
.scene-cover::after { content: ''; position: absolute; inset: 0; border: 1px solid #FFFFFF40; border-radius: inherit; background: linear-gradient(135deg, #FFFFFF10, transparent 50%); pointer-events: none; }
.scene-signal-label { position: absolute; right: 10px; bottom: 9px; padding: 3px 7px; font-size: 9px; color: var(--theme-textSecondary); background: var(--theme-surface); border-radius: 4px; }
.tablet .player-scene-stage { grid-row: 2 / 5; width: 100%; margin: auto; }
[data-page-hidden='true'] .player-scene-canvas { display: none; }
@media (prefers-reduced-motion: reduce) { .player-scene-canvas { display: none; } }
.track-title { display: flex; justify-content: space-between; align-items: center; margin: 22px 0; }
.track-title h2 { font-size: 20px; font-weight: 500; }
.track-title p { color: var(--theme-textSecondary); font-size: 10px; margin-top: 7px; }
.sample-progress { position: relative; border-radius: 3px; min-width: 160px; }
.sample-progress > span { display: block; height: 100%; width: 36%; border-radius: inherit; }
.sample-progress > i { position: absolute; left: 36%; top: -2px; height: 9px; width: 9px; border-radius: 50%; }
.player-timeline > div:last-child { display: flex; justify-content: space-between; font-size: 8px; color: var(--theme-textSecondary); margin: 11px 0; }
.transport { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 18px; }
.transport .sample-secondaryButton { font-size: 9px; padding: 7px; }
.play-button { min-width: 53px; min-height: 49px !important; font-size: 19px; }
.player-note { font-size: 9px; text-align: center; color: var(--theme-textSecondary); margin: 19px 0; }
.lyrics-lines { min-height: 293px; display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: flex-start; padding: 25px 7px; color: var(--theme-lyricText); }
.lyrics-lines p { font-size: 14px; }
.lyrics-lines .active-line { font-size: 21px; font-weight: 500; padding: 5px 0; }
.tablet .home-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.tablet .home-greeting, .tablet .search-sample, .tablet .hero-sample { grid-column: 1 / -1; }
.tablet .hero-sample { height: 175px; }
.tablet .home-content > .section-title { grid-column: 1 / -1; }
.tablet .moods { grid-column: 1 / -1; }
.tablet .player-content { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: center; min-height: 415px; }
.tablet .player-top { grid-column: 1 / -1; }
.tablet .record, .tablet .lyrics-lines { grid-row: 2 / 5; margin: auto; width: min(100%, 235px); }
.tablet .track-title, .tablet .player-timeline, .tablet .transport { grid-column: 2; }
.tablet .player-note { grid-column: 1 / -1; }
.button-sampler .sample-component { color: var(--theme-textPrimary, #263629); }
@media (max-width: 720px) { .device { max-width: 100%; } .device.tablet .player-content { gap: 10px; } .tablet .record { height: 140px; width: 140px; } .tablet .transport { flex-wrap: wrap; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .theme-image, .breathing-spot { animation: none !important; transform: none !important; } .breathing-spot { opacity: 0; } button.sample-component:active > .button-visual { transform: none !important; } }

/* Point geometry from mobile ui-styles and platform/ios/bottom-tab-styles.
   Loaded after preview/styles.css. Device scaling belongs to the studio host. */
.device.app-device { flex: none; min-height: 0; max-width: none; border: 0; border-radius: 0; font-size: 12px; line-height: 1.4; color: var(--theme-textPrimary); }
.app-device *, .app-device *::before, .app-device *::after { box-sizing: border-box; }
.app-device h1, .app-device h2, .app-device h3, .app-device p { margin: 0; letter-spacing: 0; }
.app-device h1 { font-size: 20.6px; line-height: 28px; font-weight: 500; }
.app-device h3 { font-size: 17px; font-weight: 600; }
.app-device small { font-size: 11px; }
.app-device :where(button) { font: inherit; cursor: pointer; letter-spacing: 0; touch-action: manipulation; }
.app-device :where(button:not(.sample-component)) { color: inherit; padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
.app-device :where(button:not(.sample-component)):hover { background: transparent; }
.app-device :where(button:not(.sample-component)):active { transform: none; opacity: .7; }
.app-device button:focus-visible, .app-device input:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -2px; }
.app-device-content { position: relative; height: 100%; overflow: hidden; }
.app-icon { display: inline-block; flex: none; vertical-align: middle; }
.app-status-bar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: var(--app-safe-top); display: flex; align-items: center; justify-content: space-between; padding: 5px 26px 0; font: 600 14px system-ui, sans-serif; pointer-events: none; }
.app-status-bar > span { display: flex; align-items: center; gap: 5px; }
.app-home-indicator { position: absolute; z-index: 21; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: var(--theme-textPrimary); opacity: .85; pointer-events: none; }
.app-device.tablet .app-status-bar { padding: 0 20px; font-size: 12px; }
.app-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app-scroll, .app-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app-scroll::-webkit-scrollbar, .app-panel-scroll::-webkit-scrollbar, .app-horizontal::-webkit-scrollbar { display: none; }
.app-scroll { padding-bottom: calc(130px + var(--app-safe-bottom)); }
.app-gutter { padding-left: max(18px, calc((100% - 960px) / 2 + 18px)); padding-right: max(18px, calc((100% - 960px) / 2 + 18px)); }
.app-action { min-height: 36px; padding: 7px 12px; flex-shrink: 0; font-size: 11.5px; }
.app-action > .sample-content { display: flex; align-items: center; justify-content: center; gap: 6px; }
.app-action.sample-iconButton { width: 44px; height: 44px; padding: 0; }
.app-device .app-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; }
.app-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.app-copy > strong { font-size: 13px; font-weight: 500; line-height: 19px; overflow: hidden; text-overflow: ellipsis; }
.app-copy > small { color: var(--theme-textSecondary); font-size: 10.8px; line-height: 16px; }
.app-artwork { position: relative; display: block; overflow: hidden; background: var(--theme-accentSurface); flex-shrink: 0; }
.app-artwork > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-header-art { position: relative; flex-shrink: 0; overflow: hidden; background: var(--theme-surface); }
.app-header-scrim { position: absolute; inset: 0; pointer-events: none; }
.app-hero-copy, .app-search-header-copy, .app-rankings-header-copy, .app-favorite-count { position: relative; z-index: 1; text-shadow: 0 0 2px var(--theme-surface); }
.app-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 14px; }
.app-section-subtitle { color: var(--theme-textSecondary); font-size: 11.5px; margin-bottom: 12px !important; }
.app-horizontal { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.app-device .app-image-tile { display: flex; flex-direction: column; text-align: left; gap: 7px; border-radius: 10px; }
.app-tile-art { width: 100%; aspect-ratio: 1; border-radius: 10px; }
.app-image-tile .app-copy { gap: 3px; width: 100%; }
.app-image-tile .app-copy > strong { font-size: 12px; line-height: 17px; }
.app-image-tile .app-copy > small { font-size: 10px; }
.app-playlist-tiles .app-image-tile { flex: 0 0 min(119px, calc((100% - 24px) / 3)); }
.app-home-header { padding-top: calc(var(--app-safe-top) + 12px); padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.app-home-header h1 { font-size: 21px; line-height: 27px; }
.app-home .app-scroll { padding-top: 4px; }
.app-home-hero { min-height: 150px; margin-top: 4px; border-radius: 18px; }
.app-hero-copy { padding: 17px 16px 10px; }
.app-hero-copy > small { font-size: 10.5px; letter-spacing: .4px; }
.app-hero-copy h2 { font-size: 25px; font-weight: 600; margin-top: 7px; line-height: 30px; }
.app-hero-copy p { font-size: 12px; line-height: 18px; margin-top: 6px; }
.app-hero-actions { display: flex; min-height: 44px; gap: 8px; justify-content: space-between; align-items: center; margin-top: 10px; }
.app-hero-actions .app-link { min-height: 36px; padding: 0 10px; }
.app-mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-device .app-mood { min-width: 0; text-align: left; }
.app-mood-art { display: block; position: relative; overflow: hidden; aspect-ratio: 1280 / 441; border-radius: 12px; background: var(--theme-accentSurface); }
.app-mood-copy { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 40px; }
.app-mood .app-copy > strong { font-size: 14px; font-weight: 600; }
.app-mood .app-copy > small { font-size: 10.5px; }
.app-device .app-view-all { width: 100%; margin-top: 5px; }
.app-recent .app-image-tile { width: 66px; flex: none; text-align: center; }
.app-recent .app-tile-art { width: 50px; height: 50px; border-radius: 50%; align-self: center; }
.app-recent .app-copy > strong { font-size: 10.8px; }
.app-track-row { min-height: 58px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--theme-divider); }
.app-device .app-track-main { display: flex; min-height: 49px; flex: 1; min-width: 0; align-items: center; text-align: left; gap: 7px; border-radius: 12px; }
.app-track-number { width: 22px; flex: none; color: var(--theme-textSecondary); font: 500 11px system-ui, sans-serif; text-align: center; }
.app-track-art { width: 38px; height: 38px; border-radius: 8px; }
.app-track-row .app-copy > strong { font-size: 12.2px; }
.app-track-row .app-copy > small { font-size: 10.8px; }
.app-device .app-track-row .app-action { min-width: 28px; width: 30px; height: 36px; min-height: 36px; }
.app-track-home { min-height: 62px; padding: 7px 0; }
.app-track-home .app-track-art { width: 43px; height: 43px; border-radius: 9px; }
.app-track-home .app-copy > strong { font-size: 14px; }
.app-track-home .app-copy > small { font-size: 11.5px; }
.app-duration { font: 10.3px system-ui, sans-serif; color: var(--theme-textSecondary); }
.app-favorited svg { fill: var(--theme-accent); stroke: var(--theme-accent); }
.app-device .app-search-input { padding: 0 14px; min-height: 42px; margin: 0; font-size: 12.6px; }
.app-search-input > .sample-content { min-height: 42px; display: flex; align-items: center; gap: 7px; }
/* Outrank the editor's input:not(...):not(...):not(...):not(...) rule. */
.app-device .app-search-input.sample-input > .sample-content > input[type='search'] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; width: 100%; min-height: 0; margin: 0; padding: 6px 0; border: 0; border-radius: 0; outline: none; font: inherit; color: inherit; background: transparent; box-shadow: none; }
.app-device .app-search-input:focus-within { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.app-search-input input::placeholder { color: var(--theme-textSecondary); opacity: 1; }
.app-search-header { height: calc(var(--app-safe-top) + 132px); }
.app-search-header-copy { position: absolute; left: max(22px, calc((100% - 960px) / 2 + 22px)); bottom: 56px; }
.app-search-header-copy p, .app-page-heading p, .app-rankings-header-copy p { font-size: 11.3px; margin-top: 3px; }
.app-search-controls { position: relative; margin-top: -18px; flex-shrink: 0; }
.app-segments { display: flex; margin-top: 12px; min-height: 44px; padding: 3px; border-radius: 22px; background: var(--theme-accentSurface); }
.app-device .app-segment { flex: 1; min-width: 0; padding: 6px 4px; min-height: 38px; border-radius: 18px; font-size: 12px; }
.app-device .app-segment.is-selected { background: var(--theme-surface); font-weight: 600; }
.app-source-filters { gap: 8px; background: transparent; padding: 0; overflow-x: auto; scrollbar-width: none; }
.app-device .app-source-filters .app-segment { flex: none; min-width: 58px; min-height: 44px; padding: 0 13px; border-radius: 22px; background: var(--theme-accentSurface); }
.app-device .app-source-filters .is-selected, .app-device .app-favorite-segments .is-selected { color: var(--theme-onAccent); background: var(--theme-accent); }
.app-track-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; min-height: 44px; margin: 6px 0 2px; }
.app-track-toolbar > span { font-size: 12px; }
.app-artist-art { width: 42px; height: 42px; border-radius: 50%; }
.app-rankings-header { min-height: calc(var(--app-safe-top) + 126px); }
.app-rankings-header-copy { padding: calc(var(--app-safe-top) + 20px) max(20px, calc((100% - 960px) / 2 + 20px)) 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.app-rankings-header-copy p { margin-top: 6px; line-height: 17px; }
.app-ranking-providers { margin: 0 max(18px, calc((100% - 960px) / 2 + 18px)) 2px; min-height: 50px; flex-shrink: 0; }
.app-ranking-providers .app-segment { min-height: 44px; }
.app-ranking-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-ranking-gallery .app-tile-art { border-radius: 8px; }
.app-device .app-catalog-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 78px; padding: 11px 0; border-bottom: 1px solid var(--theme-divider); text-align: left; }
.app-catalog-art { width: 52px; height: 52px; border-radius: 8px; }
.app-favorites-header { padding-top: calc(var(--app-safe-top) + 12px); flex-shrink: 0; }
.app-page-heading { display: flex; min-height: 46px; justify-content: space-between; align-items: flex-start; gap: 8px; }
.app-favorites-hero { height: 132px; margin-top: 10px; border-radius: 15px; }
.app-favorite-count { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; }
.app-favorite-count strong { font-size: 20.5px; line-height: 26px; font-weight: 500; }
.app-favorite-count small { font-size: 11.1px; margin-top: 2px; }
.app-favorite-segments { min-height: 52px; padding: 4px; gap: 5px; }
.app-favorite-segments .app-segment { min-height: 44px; }
.app-device .app-favorite-input { margin-top: 12px; }
.app-playlist-library { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.app-playlist-library .app-image-tile { flex-direction: row; min-height: 58px; padding: 7px; align-items: center; gap: 9px; border-bottom: 1px solid var(--theme-divider); }
.app-playlist-library .app-tile-art { width: 41px; height: 41px; border-radius: 9px; }
.app-mine > .app-scroll { padding-top: calc(var(--app-safe-top) + 12px); }
.app-mine-header { height: 34px; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 5px; }
.app-device .app-mine-header .app-action { width: 36px; height: 34px; min-height: 34px; padding: 0; }
.app-profile-card { padding: 0; margin-bottom: 14px; }
.app-device .app-profile { width: 100%; min-height: 108px; display: flex; align-items: center; gap: 13px; text-align: left; padding: 14px; }
.app-avatar { width: 56px; height: 56px; border-radius: 50%; position: relative; flex-shrink: 0; overflow: hidden; }
.app-avatar > .app-artwork { width: 100%; height: 100%; }
.app-avatar-frame { z-index: 2; }
.app-profile-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-profile-copy > strong { font-size: 17.5px; font-weight: 500; }
.app-profile-detail { font-size: 11.2px; margin-top: 4px; line-height: 16px; }
.app-profile-copy > small { margin-top: 10px; font-size: 10.7px; color: var(--theme-textSecondary); }
.app-device .app-mine-section { color: var(--theme-textSecondary); font-size: 11.2px; margin: 10px 2px 8px; }
.app-mine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-mine-tile-surface { padding: 0; }
.app-device .app-mine-tile { position: relative; text-align: left; width: 100%; min-height: 104px; padding: 13px; overflow: hidden; }
.app-mine-tile > .app-copy { position: relative; max-width: 78%; }
.app-mine-tile .app-copy > strong { font-size: 15.4px; }
.app-mine-tile .app-copy > small { font-size: 11.2px; }
.app-mine-tile > .app-icon { position: absolute; left: 13px; bottom: 13px; }
.app-mine-tile-art { position: absolute; right: -8px; bottom: -6px; width: 72px; height: 72px; border-radius: 18px; opacity: .68; }
.app-mine-tools { padding: 0 12px; }
.app-device .app-mine-tool { display: flex; align-items: center; gap: 10px; min-height: 62px; width: 100%; text-align: left; padding: 9px 0; }
.app-mine-tool + .app-mine-tool { border-top: 1px solid var(--theme-divider); }
.app-mine-tool .app-copy > strong { font-size: 13.7px; font-weight: 600; }
.app-mine-tool-art { width: 36px; height: 36px; border-radius: 10px; opacity: .78; }
.app-mine-about { display: grid; grid-template-columns: 1.34fr .86fr; gap: 9px; }
.app-mine-about .sample-card { min-height: 82px; padding: 12px 13px; }
.app-mine-about .app-copy > strong { font-size: 12.4px; font-weight: 600; }
.app-mine-about .app-copy > small { font-size: 10.6px; line-height: 15px; }
.app-device .app-bottom-bar { position: absolute; z-index: 10; bottom: 0; left: 0; right: 0; margin: 0; height: calc(58px + var(--app-safe-bottom)); padding: 0 max(8px, calc((100% - 960px) / 2 + 8px)) var(--app-safe-bottom); border-radius: 0 !important; border-top: 1px solid var(--theme-divider); }
.app-bottom-bar > .sample-content { display: flex; height: 58px; justify-content: space-around; }
.app-device .app-tab { display: flex; flex: 1; flex-direction: column; height: 58px; min-height: 58px; align-items: center; justify-content: flex-start; padding-top: 5px; gap: 3px; color: var(--theme-textSecondary); font-size: 10.5px; line-height: 13px; }
.app-tab-icon { width: 36px; height: 28px; display: flex; align-items: center; justify-content: center; }
.app-tab-active .app-tab-icon { width: 38px; border-radius: 14px; color: var(--theme-onAccent); background: var(--theme-accent); }
.app-device .app-tab-active { color: var(--theme-textPrimary); font-weight: 600; }
.app-device .app-mini-player { position: absolute; z-index: 11; left: max(16px, calc((100% - 960px) / 2 + 16px)); right: max(16px, calc((100% - 960px) / 2 + 16px)); bottom: calc(62px + var(--app-safe-bottom)); min-height: 56px; padding: 7px 9px; margin: 0; }
.app-mini-player > .sample-content { display: flex; align-items: center; gap: 6px; }
.app-device .app-mini-main { display: flex; flex: 1; min-width: 0; text-align: left; gap: 8px; align-items: center; }
.app-mini-cover { width: 38px; height: 38px; border-radius: 12px; }
.app-mini-copy { display: flex; min-width: 0; flex-direction: column; }
.app-mini-copy strong { font-size: 12px; font-weight: 500; }
.app-mini-copy small { margin-top: 1px; font-size: 10px; color: var(--theme-textSecondary); }
.app-mini-copy .app-mini-time { font: 8.8px system-ui, sans-serif; }
.app-device .app-mini-player .app-action { width: 30px; min-width: 30px; height: 36px; min-height: 36px; padding: 0; }
.app-device .app-mini-player .app-mini-play { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
.app-mini-progress { position: absolute; left: -9px; right: -9px; bottom: -7px; height: 2px; background: var(--theme-progressTrack); }
.app-mini-progress i { display: block; width: 36%; height: 100%; background: var(--theme-progressFill); }
.app-player-host { margin-top: 59px; padding: 0; overflow: hidden; }
/* Keep the panel background above player glyphs (.sample-content z-index: 1),
   at the same overlay level as the song menu and below system chrome/notices. */
.app-panel-host { position: absolute; z-index: 15; inset: 0; padding: calc(var(--app-safe-top) + 12px) 18px calc(var(--app-safe-bottom) + 8px); background: #00000024; display: flex; justify-content: center; }
.app-device .app-panel { width: 100%; max-width: 640px; min-height: 0; padding: 0 14px; }
.app-panel > .sample-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app-panel-header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.app-panel-header h1 { font-size: 18px; font-weight: 600; }
.app-panel-scroll { padding-bottom: 16px; }
.app-sample-note { font: 10px/16px system-ui, sans-serif; color: var(--theme-textSecondary); text-align: center; padding: 18px 0 6px; }
.app-settings-group { margin-top: 13px; }
.app-settings-group h3 { font-size: 12px; color: var(--theme-textSecondary); margin: 0 8px 7px; }
.app-settings-group .sample-card { padding: 0; }
.app-device .app-setting-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; text-align: left; }
.app-setting-row + .app-setting-row { border-top: 1px solid var(--theme-divider); }
.app-setting-row > span { flex: 1; font-size: 12px; }
.app-setting-row small { color: var(--theme-textSecondary); font-size: 10px; max-width: 95px; }
.app-switch { display: block; flex: none; width: 38px; height: 23px; border-radius: 13px; background: var(--theme-divider); padding: 3px; }
.app-switch::after { content: ''; display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--theme-surface); }
.app-switch.is-on { background: var(--theme-accent); }
.app-switch.is-on::after { margin-left: 15px; background: var(--theme-onAccent); }
.app-playlist-panel .app-panel { max-width: 840px; }
.app-playlist-hero { display: flex; align-items: center; gap: 14px; padding: 6px 0 12px; }
.app-playlist-cover { width: 96px; height: 96px; border-radius: 14px; }
.app-playlist-hero .app-copy > strong { font-size: 19px; line-height: 27px; }
.app-account-hero { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.app-account-hero .app-copy > strong { font-size: 17px; }
.app-account-actions { display: flex; gap: 10px; margin-top: 16px; }
.app-account-actions .app-action { flex: 1; }
.app-account-note { margin-top: 14px !important; text-align: center; font-size: 11px; color: var(--theme-textSecondary); }
.app-account-links { display: flex; align-items: center; justify-content: center; gap: 6px; }
.app-panel-scroll > .app-search-input { margin-top: 12px; }
.app-download-meta { width: 77px; font-size: 9px !important; color: var(--theme-textSecondary); text-align: right; }
.app-device .app-server-row { display: flex; width: 100%; align-items: center; text-align: left; gap: 12px; min-height: 52px; }
.app-server-note { margin-top: 16px !important; color: var(--theme-textSecondary); font-size: 11px; line-height: 18px; }
.app-server-sections { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.app-menu-host { position: absolute; z-index: 15; inset: 0; background: #00000014; }
.app-device .app-menu-dismiss { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-device .app-song-menu { position: absolute; top: calc(var(--app-safe-top) + 50px); right: max(24px, calc((100% - 640px) / 2 + 24px)); width: 180px; padding: 6px; }
.app-device .app-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; text-align: left; }
.app-menu-data-note { position: absolute; bottom: calc(var(--app-safe-bottom) + 16px); left: 24px; right: 24px; border-radius: 12px; background: var(--theme-surface); }
.app-menu-data-note .app-sample-note { padding: 8px; }
.app-preview-notice { position: absolute; z-index: 30; bottom: calc(var(--app-safe-bottom) + 170px); left: 26px; right: 26px; padding: 11px 14px; border-radius: 14px; font-size: 11px; line-height: 17px; color: var(--theme-textPrimary); background: var(--theme-surface); box-shadow: 0 4px 18px #00000020; pointer-events: none; }

.effect-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.effect-option { text-align: left; display: grid; gap: 7px; padding: 12px; min-height: 114px; border-radius: 10px; }
.effect-option strong { font-size: 13px; }
.effect-option small { font-size: 11px; line-height: 1.5; color: #52645d; }
.effect-option[aria-pressed='true'] { border-color: #3e6653; background: #edf4ef; }
.effect-option:disabled { opacity: .55; }
.scene-mark { display: block; position: relative; height: 50px; overflow: hidden; border-radius: 5px; background: #152027; }
.scene-mark::before, .scene-mark::after { content: ''; position: absolute; }
/* Static material swatches echo the recipes; actual motion is the Canvas. */
.scene-mark::before { width: 135%; height: 62px; left: -17%; top: 6px; border-radius: 42% 64% 29% 65%; transform: rotate(-19deg); background: linear-gradient(145deg, var(--scene-one) 12%, var(--scene-two) 45%, #FFFFFFBE 48%, var(--scene-three) 57%, transparent 80%); opacity: .85; }
.scene-mark::after { inset: -20% 10% 0; background: radial-gradient(ellipse, var(--scene-two), transparent 70%); opacity: .3; }
.scene-mark-none { background: #EDF2EE; }
.scene-mark-none::before { inset: 18px 35%; width: auto; height: 14px; border-radius: 3px; background: #A9B8AE; transform: none; }
.scene-mark-none::after { display: none; }
.scene-mark-star-warp::before { height: 18px; top: 12px; transform: rotate(-32deg); }
.scene-mark-chromatic-ribbons::before { height: 65px; top: -18px; transform: rotate(22deg); border-radius: 20% 65% 30% 10%; }
.scene-mark-aurora-mist::before { inset: -15%; width: auto; height: auto; border-radius: 0; filter: blur(9px); transform: rotate(-40deg); opacity: .65; }
.scene-mark-glass-orbit::before { width: 59px; height: 64px; left: 20%; top: -8px; border-radius: 37% 65% 43% 66%; background: linear-gradient(135deg, #FFFFFFBB, var(--scene-one), #FFFFFF18 50%, var(--scene-two), #FFFFFFCD); }
.scene-mark-glass-orbit::after { width: 40px; height: 45px; left: 56%; top: 20px; background: linear-gradient(130deg, #FFFFFFC9, var(--scene-three), #FFFFFF17); border-radius: 38% 58% 41% 67%; opacity: .8; }
.scene-mark-ember-drift::before { inset: 0; width: auto; height: auto; background: radial-gradient(ellipse at 30% 90%, var(--scene-one), transparent 64%), radial-gradient(ellipse at 72% 10%, var(--scene-three), transparent 70%); }
.scene-mark-liquid-chrome::before { background: linear-gradient(135deg, #ECF7FF, #1A3547 28%, #E4F8FE 45%, var(--scene-two) 52%, #263B4C 65%, #EDFFFF); transform: rotate(25deg); }
.scene-mark-prism-bloom::before { border-radius: 4% 65% 17% 44%; background: conic-gradient(from 35deg at 60% 45%, var(--scene-one), #FFFFFFAB, var(--scene-two), var(--scene-three), var(--scene-one)); }
.scene-mark-lunar-dust::before { width: 62px; height: 58px; top: -13px; left: 4%; background: radial-gradient(ellipse at 25% 32%, #FFFFFFCC, var(--scene-one) 20%, #212D3D 67%); border-radius: 50%; }
.scene-mark-electric-storm::before { transform: rotate(-62deg); height: 80px; top: -9px; background: linear-gradient(155deg, var(--scene-one), var(--scene-two) 40%, #FFFFFFC9 47%, var(--scene-three) 51%, transparent 75%); }
.scene-mark-ink-bloom { background: #F2F1E8; }
.scene-mark-ink-bloom::before { width: 72px; height: 63px; left: 3%; top: -5px; border-radius: 39% 54% 41% 62%; background: radial-gradient(ellipse at 35% 45%, var(--scene-one), var(--scene-two) 36%, transparent 67%); box-shadow: 52px 24px 22px -15px var(--scene-three); opacity: .72; }
.scene-colors { display: grid; gap: 8px; }
.scene-layer-actions, .scene-layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scene-layer-actions { margin: 12px 0 18px; }
.scene-layer-actions button { padding: 9px 4px; font-size: 11px; }
.scene-layer-actions button:disabled { opacity: .38; cursor: default; }
.scene-preview-note { font-size: 12px; padding: 10px 12px; border-left: 2px solid #4C704E; background: #EFF4F0; color: #354C3D; margin: 12px 0; }
.legacy-effect-note { font-size: 12px; line-height: 1.7; color: #52645d; }
.effect-mark { height: 36px; border-radius: 5px; background: #183229; display: block; overflow: hidden; position: relative; }
.effect-mark::before { content: ''; position: absolute; inset: 0; }
.effect-flow::before { background: linear-gradient(115deg, transparent 20%, #addac690 40%, transparent 55%, #9fc4e980 80%, transparent); }
.effect-aurora::before { background: radial-gradient(ellipse at 20% 70%, #7ad6aaba, transparent 70%), radial-gradient(ellipse at 90% 10%, #84bdebb0, transparent 60%); }
.effect-stars::before, .effect-fireflies::before, .effect-snow::before { background: radial-gradient(circle at 22% 23%, #d6edde 0 1px, transparent 3px), radial-gradient(circle at 63% 70%, #bddfb9 0 2px, transparent 4px), radial-gradient(circle at 84% 31%, #c8e7e1 0 1px, transparent 3px); }
.effect-snow::before { transform: rotate(25deg); }
.effect-fireflies::before { filter: blur(1px); }
.effect-breathe::before { background: radial-gradient(ellipse at 34% 30%, #e4eee58a, transparent 72%); }
.effect-drift::before { background: linear-gradient(165deg, #acc0b47d, transparent 58%); }
.effect-upgrade { padding: 12px 0 18px; display: grid; gap: 10px; font-size: 12px; line-height: 1.6; }
.effect-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.effect-node { position: absolute; display: block; pointer-events: none; }
.effect-node-star::before, .effect-node-star::after { content: ''; position: absolute; background: currentColor; border-radius: 50%; }
.effect-node-star::before { left: 45%; top: 16%; width: 10%; height: 68%; }
.effect-node-star::after { left: 16%; top: 45%; width: 68%; height: 10%; }
button.sample-component[data-effect='ripple'] > .button-visual > .button-glow { inset: 0; border-radius: 50%; transform: scale(.01); }
button.sample-component[data-effect='ripple']:active > .button-visual > .button-glow { animation: press-ripple 420ms linear; }
button.sample-component[data-effect='sheen'] > .button-visual > .button-glow { inset: -50% auto auto -45%; height: 200%; width: 45%; transform: rotate(20deg); }
button.sample-component[data-effect='sheen']:active > .button-visual > .button-glow { animation: press-sheen 420ms linear; }
@keyframes press-ripple { 0% { transform: scale(.01); opacity: 0; } 35% { opacity: var(--glow-opacity); } 100% { transform: scale(2); opacity: 0; } }
@keyframes press-sheen { 0% { left: -45%; opacity: 0; } 35% { opacity: var(--glow-opacity); } 100% { left: 150%; opacity: 0; } }
[data-page-hidden='true'] .effect-layer { display: none; }
@media (prefers-reduced-motion: reduce) { .effect-layer { display: none; } button.sample-component:active > .button-visual > .button-glow { animation: none !important; opacity: 0 !important; } }

.library-target { color: var(--accent); font-size: 12px; font-weight: 600; padding: 13px 0 9px; overflow-wrap: anywhere; }
.library-style-list { display: grid; gap: 5px; }
.library-style { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 10px 8px; text-align: left; border-color: transparent; background: transparent; }
.library-style[aria-pressed='true'] { border-color: var(--accent); background: var(--wash); }
.library-style-copy { min-width: 0; }
.library-style strong, .library-material strong { display: block; font-size: 14px; font-weight: 600; font-family: 'Songti SC', 'STSong', serif; }
.library-style small, .library-material small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.55; color: var(--muted); }
.library-style .library-applied { color: var(--accent); font-size: 10px; }
.library-style .library-applied[hidden] { display: none; }
.library-style-sample { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 0 0 90px; min-height: 62px; padding: 9px 7px; }
.library-sample-row { display: flex; align-items: center; gap: 5px; }
.library-sample-button { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; min-width: 23px; padding: 2px 5px; font-size: 9px; }
.library-sample-button:first-child { flex: 1; }
.library-sample-chip { padding: 1px 4px; font-size: 8px; }
.library-sample-track { display: block; flex: 1; border-radius: 4px; }
.library-sample-track > span { display: block; position: relative; width: 60%; height: 100%; border-radius: inherit; }
.library-sample-track i { position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); }
.library-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 16px; }
.library-material { min-width: 0; padding: 0 0 9px; text-align: left; overflow: hidden; }
.library-material strong, .library-material small { margin-inline: 9px; }
.library-material strong { margin-top: 9px; font-size: 13px; }
.library-material-sample { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid var(--line); }
.library-panel input[type='color'] { width: 100%; height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; background: var(--sheet); }

.workshop-player { width:100%; height:100%; min-height:0; margin:0 auto; padding:0 28px 34px; display:flex; flex-direction:column; box-sizing:border-box; }
.layout-player-top { display:flex; align-items:center; justify-content:space-between; flex:none; height:42px; }
.layout-top-actions { display:flex; gap:4px; }
.layout-player-top .app-action { width:42px; height:42px; padding:0; }
.layout-visual-area { flex:1; min-height:0; display:flex; flex-direction:column; }
.layout-composition { display:flex; flex-direction:column; align-items:center; justify-content:center; flex-grow:1; width:100%; }
.layout-composition.columns { flex-direction:row; }
.layout-visual-column { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.layout-artwork-stage { background:transparent; border:0; padding:0; position:relative; isolation:isolate; display:grid; place-items:center; flex-shrink:0; overflow:hidden; border-radius:0; }
.layout-artwork-stage:hover,.layout-artwork-stage:active { background:transparent; transform:none; }
.layout-artwork { display:block; position:relative; overflow:hidden; border:1px solid var(--theme-divider); background:var(--theme-surface); }
.layout-artwork img { width:100%; height:100%; object-fit:cover; display:block; }
.layout-artwork.vinyl { border:0; background:transparent; }
.layout-song-cover { position:absolute; inset:0; display:block; overflow:hidden; border-radius:inherit; }
.layout-artwork.vinyl .layout-song-cover { width:54%; height:54%; inset:23%; border-radius:50%; }
.layout-artwork .layout-disc { position:absolute; inset:0; }
.layout-disc-hole { position:absolute; width:14px; height:14px; background:var(--theme-surface); border-radius:50%; top:calc(50% - 7px); left:calc(50% - 7px); }
.layout-track-info { width:100%; display:flex; flex-direction:column; justify-content:center; flex-shrink:0; }
.layout-track-info h2 { font-size:17.8px; line-height:24px; font-weight:500; margin:4px 0 0; max-width:92%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.layout-track-info[style*="text-align: left"] h2 { max-width:100%; min-width:0; }
.layout-track-info > p { font-size:12px; margin:2px 0 0; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--theme-accent); }
.layout-quality { display:flex; align-items:center; gap:8px; margin-top:7px; min-height:25px; }
.layout-quality .sample-component { min-height:24px; padding:4px 9px; font-size:10.1px; }
.layout-quality .app-action { min-height:44px; }
.layout-quality .app-action > .button-visual { top:9px; bottom:9px; }
.layout-quality .app-action .sample-content { display:flex; gap:4px; align-items:center; }
.layout-inline-lyrics { display:flex; flex-direction:column; justify-content:center; width:100%; padding:10px 0 14px; flex-shrink:0; border:0; border-radius:0; color:var(--theme-lyricText); background:transparent; font-size:15.1px; }
.layout-inline-lyrics:hover,.layout-inline-lyrics:active { background:transparent; transform:none; }
.layout-inline-lyrics span { height:29px; line-height:29px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.layout-dock { width:100%; max-width:640px; align-self:center; height:168px; flex-shrink:0; padding-bottom:48px; box-sizing:border-box; }
.layout-progress { height:44px; padding-top:0; }
.layout-times { display:flex; justify-content:space-between; font-size:10.4px; line-height:14px; color:var(--theme-textSecondary); padding-bottom:8px; font-variant-numeric:tabular-nums; }
.layout-progress .sample-progress { min-width:0; }
.layout-transport { margin-top:16px; display:flex; align-items:center; height:60px; }
.layout-control-slot { flex:1; min-width:0; min-height:60px; display:flex; align-items:center; justify-content:center; }
.layout-transport .layout-skip { width:50px; height:50px; min-height:50px; padding:0; }
.layout-transport .layout-play { width:60px; height:60px; min-height:60px; padding:0; }
.layout-transport .app-icon { width:26px; height:26px; }
.layout-transport .layout-play .app-icon { width:28px; height:28px; }
.layout-transport > .layout-control-slot:first-child .app-icon, .layout-transport > .layout-control-slot:last-child .app-icon { width:24px; height:24px; }
.workshop-full-lyrics { height:100%; padding:0 28px 34px; display:flex; flex-direction:column; box-sizing:border-box; }
.full-lyrics-title { display:flex; flex:1; min-width:0; padding:0 8px; flex-direction:column; text-align:center; gap:4px; }
.full-lyrics-title > strong, .full-lyrics-title > span { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.full-lyrics-title strong { font-size:15px; font-weight:500; }
.full-lyrics-title span { font-size:11px; color:var(--theme-textSecondary); }
.full-lyrics-scroll { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; justify-content:center; gap:22px; max-width:640px; width:100%; margin:auto; text-align:center; }
.full-lyrics-scroll p { font-size:16px; line-height:24px; color:var(--theme-lyricText); margin:0; }
.full-lyrics-footer { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--theme-textSecondary); height:44px; flex:none; }

.player-layout-editor .player-layout-recipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.player-layout-editor .player-layout-recipe {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sheet);
}
.player-layout-editor .player-layout-recipe:hover { background: var(--wash); }
.player-layout-editor .player-layout-recipe[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--wash);
}
.player-layout-recipe[aria-pressed='true']::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.player-layout-recipe strong { line-height: 1.5; }
.player-layout-recipe small { line-height: 1.6; }
.player-layout-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--layout-spacing) * .22);
  height: 142px;
  padding: 10px 8px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--desk);
  overflow: hidden;
}
.layout-sample-artwork {
  position: relative;
  display: block;
  flex: none;
  width: calc(64px * var(--layout-artwork-scale));
  aspect-ratio: 1;
  border-radius: calc(var(--layout-artwork-radius) / 4);
  background: linear-gradient(145deg, var(--accent), var(--wash));
}
.player-layout-sample[data-artwork='circle'] .layout-sample-artwork { border-radius: 50%; }
.player-layout-sample[data-artwork='vinyl'] .layout-sample-artwork {
  border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--ink) 0 3px, var(--muted) 3px 4px);
}
.player-layout-sample[data-artwork='vinyl'] .layout-sample-artwork::after {
  content: '';
  position: absolute;
  inset: 34%;
  border: 6px solid var(--accent);
  border-radius: 50%;
  background: var(--sheet);
}
.layout-sample-title, .layout-sample-lyrics { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.layout-sample-title i { display: block; width: 74%; height: 5px; border-radius: 2px; background: var(--ink); }
.layout-sample-title i + i { width: 48%; height: 3px; background: var(--muted); }
.layout-sample-lyrics i { display: block; width: 70%; height: 2px; border-radius: 1px; background: var(--muted); opacity: .6; }
.layout-sample-lyrics i:nth-child(even) { width: 56%; }
.layout-sample-lyrics:empty { display: none; }
.player-layout-sample[data-align='left'] .layout-sample-title,
.player-layout-sample[data-align='left'] .layout-sample-lyrics { align-items: flex-start; }
.layout-sample-controls { margin-top: auto; color: var(--accent); font-size: 13px; line-height: 16px; letter-spacing: 2px; }
.player-layout-editor [data-layout-action='reset'] { margin-top: 16px; }
@media (forced-colors: active) {
  .player-layout-recipe[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -3px; }
}

.studio-effects-browser .studio-effect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; margin-top:14px; }
.studio-effects-browser .studio-effect-option { text-align:left; min-width:0; min-height:0; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--sheet); display:flex; flex-direction:column; gap:0; }
.studio-effects-browser .studio-effect-option:hover { border-color:var(--muted); background:var(--wash); }
.studio-effects-browser .studio-effect-option[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--wash); }
.studio-effects-browser .studio-effect-option:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.studio-effect-thumbnail { display:block; width:100%; height:auto; aspect-ratio:5 / 3; object-fit:cover; background:#10151e; border-radius:8px 8px 0 0; }
.studio-effect-caption { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; padding:10px; }
.studio-effect-name { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.studio-effects-browser .studio-effect-option strong { font-size:13px; line-height:1.45; font-weight:600; }
.studio-effects-browser .studio-effect-option small { font-size:11px; line-height:1.5; color:var(--muted); }
.studio-effect-check { visibility:hidden; flex-shrink:0; color:var(--accent); font-size:12px; font-weight:700; }
.studio-effect-option[aria-pressed=true] .studio-effect-check { visibility:visible; }
.studio-effects-browser .studio-effect-none { width:100%; min-height:36px; font-size:12px; background:transparent; color:var(--muted); }
.studio-effects-browser .studio-effect-none[aria-pressed=true] { border-color:var(--accent); color:var(--accent); background:var(--wash); }
.studio-effect-library { border-bottom:1px solid var(--line); }
.studio-effect-library > summary { min-height:44px; padding:13px 0; cursor:pointer; font-size:12px; color:var(--muted); }
.studio-effect-library[open] > summary { color:var(--accent); }
.studio-effect-library .material-preferences { padding:0 0 16px; }
.studio-effect-library .material-preferences h3 { display:none; }
.studio-effect-summary { font-size:12px; line-height:1.65; margin:6px 0 12px; }
.studio-precision { display:grid; grid-template-columns:1fr 72px 30px; align-items:center; gap:7px; }
.studio-precision input[type=range] { min-width:0; width:100%; }
.studio-precision input[type=number] { min-width:0; width:72px; padding:7px 4px; font-variant-numeric:tabular-nums; text-align:right; }
.studio-precision button { padding:0; width:30px; min-height:36px; }
.studio-effect-filter { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.studio-effect-filter button { min-height:36px; padding:6px 10px; font-size:12px; }
.studio-effect-filter button[aria-pressed=true] { background:#294d3d; color:#fff; }
.studio-effect-details { margin-top:12px; border-top:1px solid #78867525; padding-top:8px; }
.studio-effect-details summary { cursor:pointer; min-height:38px; display:flex; align-items:center; font-size:13px; font-weight:550; }
.studio-audition { max-width:780px; width:100%; margin:14px auto 6px; border:1px solid #80917c35; background:#f6f7f2; border-radius:12px; padding:12px 14px; }
.studio-audio-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.studio-audio-heading button { white-space:nowrap; font-size:12px; min-height:36px; }
.studio-audio-status { font-size:12px; line-height:1.6; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-audition > small { color:#677063; font-size:11px; }
.studio-audio-transport { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:10px; }
.studio-audio-transport label { display:flex; gap:8px; align-items:center; font-size:11px; }
.studio-audio-transport input { min-width:0; flex:1; }
.studio-audio-transport output { font-size:11px; font-variant-numeric:tabular-nums; }
.studio-audio-error { color:#ad3931; font-size:12px; }
.studio-audition [hidden] { display:none; }
.studio-gpu-layer { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.studio-gpu-canvas { width:100%; height:100%; display:block; }
.studio-gpu-error { position:absolute; inset:auto 12px 4px; font-size:11px; text-align:center; color:var(--theme-textSecondary); }
.device.has-studio-effect > .app-device-content { z-index:1; }
.has-studio-effect .layout-composition { position:relative; z-index:1; }
.has-studio-effect .layout-artwork-stage { overflow:visible; }
.layout-effect-window { width:100%; flex-shrink:0; pointer-events:none; }
.has-studio-effect .layout-track-info,.has-studio-effect .layout-inline-lyrics { text-shadow:0 1px 3px var(--theme-background); }

.studio-button-skin{--sample-bg:#e6e9e5;--sample-ink:#394842;--btn-bg:#f8fcf8;--btn-ink:#34483e;--btn-edge:#c0cfc4;--btn-radius:14px;--btn-shadow:0 2px 3px #142a251a;--fx-color:#8ec2ae;--studio-button-glyph-color:var(--btn-ink)}
.studio-button-skin .bg-button{appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;display:grid;place-items:center;width:48px;height:48px;min-width:44px;min-height:44px;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:var(--btn-radius);color:var(--btn-ink);background:transparent;box-shadow:none;line-height:1;transform:none;transition:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;overflow:visible}.studio-button-skin .bg-play{width:60px;height:60px}.studio-button-skin .bg-text{width:108px;height:44px;font-size:12px;letter-spacing:.02em}.studio-button-skin .bg-face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid var(--btn-edge);border-radius:inherit;background:var(--btn-bg);box-shadow:var(--btn-shadow);pointer-events:none;transition:filter 100ms ease-out}.studio-button-skin .bg-face::before,.studio-button-skin .bg-face::after{content:'';position:absolute;pointer-events:none}.studio-button-skin .bg-art{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}.studio-button-skin .bg-art i{position:absolute;display:none}.studio-button-skin .bg-glyphs{position:relative;z-index:2;display:block;width:22px;height:22px}.studio-button-skin .bg-text .bg-glyphs{width:auto;height:auto;white-space:nowrap}.studio-button-skin .bg-icon{position:absolute;inset:0;display:block;width:22px;height:22px;min-width:22px;max-width:none;margin:0;opacity:1;transform:none;pointer-events:none}.studio-button-skin .bg-icon-pause{opacity:0}.studio-button-skin [data-bg-playing=true] .bg-icon-play{opacity:0}.studio-button-skin [data-bg-playing=true] .bg-icon-pause{opacity:1}.studio-button-skin .bg-favorite[aria-pressed=true] .bg-icon-favorite{fill:currentColor}.studio-button-skin .bg-button:focus-visible{outline:2px solid var(--sample-ink);outline-offset:5px}

.studio-button-skin .bg-fx{position:absolute;inset:-2px;z-index:3;border-radius:inherit;pointer-events:none;opacity:0}.studio-button-skin .bg-fx i{position:absolute;display:none}.studio-button-skin [data-preview=true] .bg-fx{opacity:var(--fx-strength)}
.studio-button-skin [data-preview=true][data-effect=sheen] .bg-fx{inset:0;overflow:hidden}.studio-button-skin [data-effect=sheen] .bg-fx i:first-child{display:block;inset:-30% auto -30% -100%;width:65%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#fff9,transparent)}.studio-button-skin [data-preview=true][data-effect=sheen] .bg-fx i:first-child{animation:studio-button-bg-sheen var(--fx-time) ease-in-out 1}
.studio-button-skin [data-effect=halo] .bg-fx{box-shadow:0 0 12px 3px var(--fx-color),inset 0 0 5px var(--fx-color)}.studio-button-skin [data-preview=true][data-effect=halo] .bg-fx{animation:studio-button-bg-halo var(--fx-time) ease-in-out 1 alternate}
.studio-button-skin [data-effect=ripple] .bg-fx{inset:0;overflow:hidden}.studio-button-skin [data-effect=ripple] .bg-fx i:first-child{display:block;inset:15%;border:2px solid var(--fx-color);border-radius:50%;background:radial-gradient(transparent,var(--fx-color))}.studio-button-skin [data-preview=true][data-effect=ripple] .bg-fx i:first-child{animation:studio-button-bg-ripple var(--fx-time) cubic-bezier(.2,.6,.2,1) 1}
.studio-button-skin [data-effect=spark] .bg-fx i{display:block;width:4px;height:4px;border-radius:1px;background:var(--fx-color);box-shadow:0 0 5px var(--fx-color);left:50%;top:0}.studio-button-skin [data-effect=spark] .bg-fx i:nth-child(2){left:0;top:60%;animation-delay:-.5s!important}.studio-button-skin [data-effect=spark] .bg-fx i:nth-child(3){left:95%;top:40%;animation-delay:-1s!important}.studio-button-skin [data-preview=true][data-effect=spark] .bg-fx i{animation:studio-button-bg-spark var(--fx-time) ease-out 1}
.studio-button-skin [data-effect=orbit] .bg-fx{padding:2px;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.studio-button-skin [data-effect=orbit] .bg-fx::before{content:"";position:absolute;inset:-100%;background:conic-gradient(transparent 0 60%,var(--fx-color) 82%,#fff 89%,transparent 95%)}.studio-button-skin [data-preview=true][data-effect=orbit] .bg-fx::before{animation:studio-button-bg-orbit calc(var(--fx-time)*1.5) linear 1}
.studio-button-skin [data-effect=breathe] .bg-fx{inset:0;border:2px solid var(--fx-color);box-shadow:0 0 7px var(--fx-color);border-radius:inherit}.studio-button-skin [data-preview=true][data-effect=breathe] .bg-fx{animation:studio-button-bg-breathe calc(var(--fx-time)*1.6) ease-in-out 1}
@keyframes studio-button-bg-sheen{0%,12%{left:-100%}65%,100%{left:150%}}@keyframes studio-button-bg-halo{from{opacity:calc(var(--fx-strength)*.25)}to{opacity:var(--fx-strength)}}@keyframes studio-button-bg-ripple{0%{transform:scale(.1);opacity:0}15%{opacity:.7}100%{transform:scale(2.5);opacity:0}}@keyframes studio-button-bg-spark{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(16px) rotate(110deg);opacity:0}}@keyframes studio-button-bg-orbit{to{transform:rotate(360deg)}}@keyframes studio-button-bg-breathe{0%,100%{opacity:.1}45%{opacity:var(--fx-strength)}}
.studio-button-skin.bg-reduced .bg-fx{display:none}.studio-button-skin.bg-reduced .bg-face{transition:none}

@media(prefers-reduced-motion:reduce){.studio-button-skin .bg-fx{display:none}.studio-button-skin .bg-face{transition:none}}
@media(forced-colors:active){.studio-button-skin .bg-face{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none!important}.studio-button-skin .bg-fx,.studio-button-skin .bg-art,.studio-button-skin .bg-face::before,.studio-button-skin .bg-face::after{display:none!important}}

/*
 * Original geometry; UIverse is a category-level material reference only.
 * No assets, hover, keyframes, state handlers or layout-size overrides.
 * The host owns hit targets, glyph placement, pressed/disabled and .bg-fx.
 * All decorated i elements are explicitly enabled in their own study.
 */
.studio-button-skin:is(
  .bg-style-playful-catnap, .bg-style-playful-bunny-loop,
  .bg-style-playful-cloud-puff, .bg-style-playful-mochi-stack,
  .bg-style-playful-bear-biscuit, .bg-style-playful-little-ghost,
  .bg-style-playful-paw-cushion, .bg-style-playful-jelly-star,
  .bg-style-playful-milk-wrap, .bg-style-playful-custard-cup,
  .bg-style-sweet-berry-seed, .bg-style-sweet-bow-knot,
  .bg-style-sweet-cherry-pair, .bg-style-sweet-macaron-shell,
  .bg-style-sweet-lace-medallion, .bg-style-sweet-satin-ribbon,
  .bg-style-sweet-cream-rosette, .bg-style-sweet-candy-fold,
  .bg-style-sweet-heart-envelope, .bg-style-sweet-pearl-halo,
  .bg-style-fresh-leaf-tip, .bg-style-fresh-dewdrop,
  .bg-style-fresh-lime-slice, .bg-style-fresh-fern-vein,
  .bg-style-fresh-petal-cup, .bg-style-fresh-lake-rings,
  .bg-style-fresh-shell-fan, .bg-style-fresh-rain-window,
  .bg-style-fresh-moss-stone, .bg-style-fresh-celadon-glaze
) :is(.bg-button, .bg-art) {
  border-radius: var(--btn-radius);
  overflow: visible;
}

.studio-button-skin:is(
  .bg-style-playful-catnap, .bg-style-playful-bunny-loop,
  .bg-style-playful-cloud-puff, .bg-style-playful-mochi-stack,
  .bg-style-playful-bear-biscuit, .bg-style-playful-little-ghost,
  .bg-style-playful-paw-cushion, .bg-style-playful-jelly-star,
  .bg-style-playful-milk-wrap, .bg-style-playful-custard-cup,
  .bg-style-sweet-berry-seed, .bg-style-sweet-bow-knot,
  .bg-style-sweet-cherry-pair, .bg-style-sweet-macaron-shell,
  .bg-style-sweet-lace-medallion, .bg-style-sweet-satin-ribbon,
  .bg-style-sweet-cream-rosette, .bg-style-sweet-candy-fold,
  .bg-style-sweet-heart-envelope, .bg-style-sweet-pearl-halo,
  .bg-style-fresh-leaf-tip, .bg-style-fresh-dewdrop,
  .bg-style-fresh-lime-slice, .bg-style-fresh-fern-vein,
  .bg-style-fresh-petal-cup, .bg-style-fresh-lake-rings,
  .bg-style-fresh-shell-fan, .bg-style-fresh-rain-window,
  .bg-style-fresh-moss-stone, .bg-style-fresh-celadon-glaze
) .bg-face {
  isolation: isolate;
  border: 1px solid var(--btn-edge);
  border-radius: inherit;
  color: var(--btn-ink);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
}

/* Q萌 / 01 — ears belong to the outline, never to the glyph. */
.studio-button-skin.bg-style-playful-catnap {
  --sample-bg: #ede5db;
  --sample-ink: #4e3933;
  --fx-color: #d9a690;
  --btn-bg: radial-gradient(ellipse at 35% 0%, #fff9ee, transparent 68%), #f0d7c1;
  --btn-ink: #593a32;
  --btn-edge: #c99e83;
  --btn-radius: 43% 43% 36% 36%;
  --btn-shadow: inset 0 2px 2px #fffdf3, inset 0 -3px 3px #c6927038, 0 3px 0 #bb8c72, 0 5px 8px #49302426;
}
.studio-button-skin.bg-style-playful-catnap .bg-art i:nth-child(-n + 2) {
  display: block; position: absolute; top: -6px; width: 17px; height: 19px;
  border: 1px solid #be947d; border-radius: 4px 9px 2px 7px;
  background: linear-gradient(135deg, #fff0df 28%, #d8a597 30% 51%, #edcfb4 53%);
}
.studio-button-skin.bg-style-playful-catnap .bg-art i:nth-child(1) { left: 1px; transform: rotate(-17deg); }
.studio-button-skin.bg-style-playful-catnap .bg-art i:nth-child(2) { right: 1px; transform: scaleX(-1) rotate(-17deg); }
.studio-button-skin.bg-style-playful-catnap .bg-face::before {
  inset: auto 9px 6px; height: 6px; border-bottom: 1px solid #b67b5c80;
  border-radius: 50%; box-shadow: 0 2px 0 #fff3df;
}
.studio-button-skin.bg-style-playful-catnap .bg-play .bg-face::after {
  inset: 5px 13px auto; height: 6px; border-top: 2px solid #fffaf0b3; border-radius: 50%;
}

/* Q萌 / 02 — asymmetrical rabbit ears, an unrotated egg-shaped face. */
.studio-button-skin.bg-style-playful-bunny-loop {
  --sample-bg: #e8e4ee;
  --sample-ink: #51445e;
  --fx-color: #c8a4ce;
  --btn-bg: linear-gradient(155deg, #fffafa, #f0e1ee 76%, #d7bbd3);
  --btn-ink: #5d3e60;
  --btn-edge: #c7aac9;
  --btn-radius: 48% 48% 38% 38%;
  --btn-shadow: inset 2px 2px 2px #fff, inset -2px -3px 4px #bd94bf40, 0 3px 0 #b29ab8, 0 5px 8px #42304c24;
}
.studio-button-skin.bg-style-playful-bunny-loop .bg-art i:nth-child(-n + 2) {
  display: block; position: absolute; top: -12px; width: 12px; height: 24px;
  border: 1px solid #c2a3c2; border-radius: 70% 70% 35% 35%;
  background: linear-gradient(90deg, #fffbff 0 29%, #d8b2ce 36% 62%, #f6eaf4 70%);
}
.studio-button-skin.bg-style-playful-bunny-loop .bg-art i:nth-child(1) { left: 7px; transform: rotate(-9deg); }
.studio-button-skin.bg-style-playful-bunny-loop .bg-art i:nth-child(2) {
  right: 5px; top: -9px; height: 20px; border-radius: 75% 90% 45% 40%; transform: rotate(26deg);
  box-shadow: inset -2px 3px 1px #fff8;
}
.studio-button-skin.bg-style-playful-bunny-loop .bg-face::before {
  inset: 5px auto 11px 4px; width: 4px; border-left: 2px solid #fffdfce6; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-bunny-loop .bg-face::after {
  inset: auto auto -2px calc(50% - 4px); width: 8px; height: 6px;
  border: 1px solid #d5bdd4; border-radius: 50%; background: #fff7ff; box-shadow: 0 1px 1px #79578330;
}

/* Q萌 / 03 — cloud silhouette with three individually placed lobes. */
.studio-button-skin.bg-style-playful-cloud-puff {
  --sample-bg: #dce9ef;
  --sample-ink: #35515f;
  --fx-color: #94c5df;
  --btn-bg: radial-gradient(ellipse at 40% 16%, #fff, #f0faff 65%, #c3e1ee);
  --btn-ink: #31516c;
  --btn-edge: #acd0df;
  --btn-radius: 43% 46% 38% 42%;
  --btn-shadow: inset 0 2px 2px #fff, inset 0 -3px 4px #9cc9df55, 0 3px 0 #a8c7d8, 0 6px 9px #254b631f;
}
.studio-button-skin.bg-style-playful-cloud-puff .bg-art i {
  display: block; position: absolute; border: 1px solid #afcedc;
  border-radius: 50%; background: linear-gradient(#fff, #d2e9f2); box-shadow: inset 1px 2px 1px #fff;
}
.studio-button-skin.bg-style-playful-cloud-puff .bg-art i:nth-child(1) { width: 23px; height: 24px; left: -4px; top: 8px; }
.studio-button-skin.bg-style-playful-cloud-puff .bg-art i:nth-child(2) { width: 29px; height: 28px; left: 24%; top: -5px; }
.studio-button-skin.bg-style-playful-cloud-puff .bg-art i:nth-child(3) { width: 20px; height: 22px; right: -4px; top: 13px; }
.studio-button-skin.bg-style-playful-cloud-puff .bg-face::before {
  inset: auto 7px 3px; height: 7px; border-bottom: 2px solid #fff9; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-cloud-puff .bg-play .bg-face::after {
  inset: 5px 12px auto; height: 7px; border-top: 2px solid #fff; border-radius: 50%;
}

/* Q萌 / 04 — broad rice-dough cap on a narrow second tier. */
.studio-button-skin.bg-style-playful-mochi-stack {
  --sample-bg: #eae7da;
  --sample-ink: #4f5140;
  --fx-color: #bfbd8c;
  --btn-bg: radial-gradient(ellipse at 48% 0%, #ffffee, transparent 73%), #e7e5ba;
  --btn-ink: #4e5332;
  --btn-edge: #b9ba8d;
  --btn-radius: 49% 49% 38% 38% / 56% 56% 31% 31%;
  --btn-shadow: inset 1px 2px 2px #ffffee, inset 0 -4px 4px #96996432, 0 2px 1px #9b9e76;
}
.studio-button-skin.bg-style-playful-mochi-stack .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: 9px 3px -5px;
  border: 1px solid #b49392; border-radius: 46% 46% 40% 40%;
  background: linear-gradient(#ead6cd, #d7b8b1); box-shadow: 0 3px 5px #5643312b;
}
.studio-button-skin.bg-style-playful-mochi-stack .bg-face::before {
  inset: 4px 9px auto; height: 8px; border-top: 2px solid #fffef09c; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-mochi-stack .bg-face::after {
  inset: auto 10px 6px auto; width: 4px; height: 3px;
  border-radius: 60% 35% 55% 35%; background: #916761; box-shadow: -5px 1px 0 -1px #aa8176;
}

/* Q萌 / 05 — baked rim, round ears and an inset biscuit stamp. */
.studio-button-skin.bg-style-playful-bear-biscuit {
  --sample-bg: #e9dfd0;
  --sample-ink: #59452e;
  --fx-color: #c9965f;
  --btn-bg: linear-gradient(145deg, #fbe2b4, #e7bd85 76%, #d3a069);
  --btn-ink: #573716;
  --btn-edge: #aa7948;
  --btn-radius: 41%;
  --btn-shadow: inset 0 2px 1px #fff0d0, inset 0 -3px 2px #c08b55, 0 3px 0 #a57748, 0 5px 7px #53371c26;
}
.studio-button-skin.bg-style-playful-bear-biscuit .bg-art i:nth-child(-n + 2) {
  display: block; position: absolute; top: -4px; width: 18px; height: 18px;
  border: 1px solid #aa7747; border-radius: 50%;
  background: radial-gradient(circle, #bb8351 0 29%, #e6bb83 34% 65%, #f7d5a0 71%);
}
.studio-button-skin.bg-style-playful-bear-biscuit .bg-art i:nth-child(1) { left: -1px; }
.studio-button-skin.bg-style-playful-bear-biscuit .bg-art i:nth-child(2) { right: -1px; }
.studio-button-skin.bg-style-playful-bear-biscuit .bg-face::before {
  inset: 4px; border: 1px solid #b6814b80; border-radius: inherit;
  box-shadow: 0 1px 0 #fff1d7a1, inset 0 1px 0 #fff1d780;
  background: radial-gradient(circle at 18% 22%, #99673199 0 1px, transparent 1.5px), radial-gradient(circle at 83% 75%, #99673180 0 1px, transparent 1.5px);
}
.studio-button-skin.bg-style-playful-bear-biscuit .bg-play .bg-face::after {
  inset: auto calc(50% - 5px) 4px; height: 3px; border-radius: 3px; background: #aa7446;
}

/* Q萌 / 06 — a porcelain bell with a scalloped, three-foot hem. */
.studio-button-skin.bg-style-playful-little-ghost {
  --sample-bg: #dfe4e7;
  --sample-ink: #3b4c5b;
  --fx-color: #a5c3e0;
  --btn-bg: linear-gradient(115deg, #fff, #f3f7ff 57%, #ccdded);
  --btn-ink: #3b4a69;
  --btn-edge: #acbfd5;
  --btn-radius: 49% 49% 20% 20%;
  --btn-shadow: inset 2px 0 2px #fff, inset -3px 0 4px #a6c0dc40, 0 2px 0 #9daec3, 0 6px 8px #35445c24;
}
.studio-button-skin.bg-style-playful-little-ghost .bg-art i {
  display: block; position: absolute; bottom: -4px; width: 13px; height: 14px;
  border: 1px solid #aebfd2; border-radius: 3px 3px 8px 8px;
  background: #eaf1fb; box-shadow: 0 2px 1px #748ba130;
}
.studio-button-skin.bg-style-playful-little-ghost .bg-art i:nth-child(1) { left: 3px; }
.studio-button-skin.bg-style-playful-little-ghost .bg-art i:nth-child(2) { left: calc(50% - 6px); bottom: -6px; }
.studio-button-skin.bg-style-playful-little-ghost .bg-art i:nth-child(3) { right: 3px; }
.studio-button-skin.bg-style-playful-little-ghost .bg-face::before {
  inset: 7px auto 12px 5px; width: 5px; border-left: 2px solid #fff; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-little-ghost .bg-face::after {
  inset: auto 6px 5px; height: 4px; border-bottom: 1px solid #bdcde580; border-radius: 50%;
}

/* Q萌 / 07 — four toe cushions frame a broad central silicone pad. */
.studio-button-skin.bg-style-playful-paw-cushion {
  --sample-bg: #f0e0d9;
  --sample-ink: #673e35;
  --fx-color: #e3aa9a;
  --btn-bg: radial-gradient(ellipse at 40% 15%, #ffebe2, transparent 65%), #eab8a8;
  --btn-ink: #673c33;
  --btn-edge: #c48675;
  --btn-radius: 47% 47% 39% 39% / 55% 55% 35% 35%;
  --btn-shadow: inset 0 2px 3px #ffede3, inset 0 -4px 4px #c3837040, 0 3px 0 #be8d7c, 0 5px 8px #6a372629;
}
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(1) {
  display: block; position: absolute; top: -7px; left: calc(50% - 12px); width: 10px; height: 14px;
  border: 1px solid #c58e7f; border-radius: 50%; background: #f7d0c4;
  box-shadow: 14px 0 0 -1px #f7d0c4, 14px 0 0 0 #c58e7f, inset 0 2px 1px #ffebdf;
}
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(2),
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(3) {
  display: block; position: absolute; top: 3px; width: 10px; height: 14px;
  border: 1px solid #c58e7f; border-radius: 50%; background: #f5c8b9; box-shadow: inset 0 2px 1px #ffe8dc;
}
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(2) { left: -3px; transform: rotate(-34deg); }
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(3) { right: -3px; transform: rotate(34deg); }
.studio-button-skin.bg-style-playful-paw-cushion .bg-face::before {
  inset: auto 8px 5px; height: 6px; border-bottom: 2px solid #ffe5d6b3; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-paw-cushion .bg-face::after {
  inset: 3px auto auto calc(50% - 3px); width: 6px; height: 4px;
  border-bottom: 1px solid #c88a7780; border-radius: 0 0 50% 50%;
}

/* Q萌 / 08 — star-shaped backing with a clean, rounded jelly centre. */
.studio-button-skin.bg-style-playful-jelly-star {
  --sample-bg: #e8e5f2;
  --sample-ink: #49425f;
  --fx-color: #bba5e1;
  --btn-bg: radial-gradient(ellipse at 35% 10%, #fdf5ff, transparent 66%), linear-gradient(155deg, #dcc9f4, #b6a1d3 75%, #e7d7ff);
  --btn-ink: #473260;
  --btn-edge: #a891c2;
  --btn-radius: 43%;
  --btn-shadow: inset 1px 2px 2px #fff5ff, inset -2px -3px 3px #8f70b24d, 0 2px 1px #856f9c66;
}
.studio-button-skin.bg-style-playful-jelly-star .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: -7px;
  clip-path: polygon(50% 0, 64% 30%, 99% 36%, 74% 60%, 81% 96%, 50% 80%, 19% 96%, 26% 60%, 1% 36%, 36% 30%);
  background: linear-gradient(140deg, #f2e2ff 13%, #b092ce 52%, #dbc7f8 83%);
}
.studio-button-skin.bg-style-playful-jelly-star .bg-face::before {
  inset: 4px 9px auto; height: 7px; border-radius: 50%; background: linear-gradient(#ffffffe6, #ffffff00);
}
.studio-button-skin.bg-style-playful-jelly-star .bg-face::after {
  inset: auto 9px 4px; height: 7px; border-bottom: 2px solid #efe0ff; border-radius: 50%;
}
.studio-button-skin.bg-style-playful-jelly-star .bg-text .bg-art i:nth-child(1) {
  inset: -4px; clip-path: polygon(4% 10%, 23% 0, 49% 8%, 76% 0, 96% 10%, 100% 50%, 96% 90%, 76% 100%, 49% 92%, 23% 100%, 4% 90%, 0 50%);
}

/* Q萌 / 09 — twisted end wrappers and inset paper seams. */
.studio-button-skin.bg-style-playful-milk-wrap {
  --sample-bg: #e7eae1;
  --sample-ink: #39534c;
  --fx-color: #8cb8a9;
  --btn-bg: linear-gradient(105deg, #f5f8e9, #fffff3 44%, #e0e9d7);
  --btn-ink: #31544a;
  --btn-edge: #a5b9a5;
  --btn-radius: 13px;
  --btn-shadow: inset 0 2px 1px #fffef8, inset 0 -2px 1px #bdcbb7, 0 3px 0 #94aa98, 0 5px 7px #294b3524;
}
.studio-button-skin.bg-style-playful-milk-wrap .bg-art i:nth-child(-n + 2) {
  display: block; position: absolute; top: 22%; bottom: 22%; width: 11px;
  clip-path: polygon(0 0, 100% 23%, 100% 77%, 0 100%, 22% 68%, 0 49%, 22% 30%);
  background: repeating-linear-gradient(18deg, #c3d5c3 0 3px, #f0f6e5 4px 6px);
}
.studio-button-skin.bg-style-playful-milk-wrap .bg-art i:nth-child(1) { left: -7px; }
.studio-button-skin.bg-style-playful-milk-wrap .bg-art i:nth-child(2) { right: -7px; transform: scaleX(-1); }
.studio-button-skin.bg-style-playful-milk-wrap .bg-face::before {
  inset: 5px; border-inline: 2px solid #8bb09b70; border-radius: 6px;
}
.studio-button-skin.bg-style-playful-milk-wrap .bg-face::after {
  inset: 3px 9px auto; height: 2px; border-top: 1px solid #fff; border-bottom: 1px solid #c3d3bc;
}

/* Q萌 / 10 — caramel lid, tapered custard and a separate saucer. */
.studio-button-skin.bg-style-playful-custard-cup {
  --sample-bg: #eee3cc;
  --sample-ink: #5b4629;
  --fx-color: #d9aa60;
  --btn-bg: linear-gradient(#c78950 0 8%, #f3c887 9% 14%, #fff0bd 15%, #f2d69a 78%, #dfb77a);
  --btn-ink: #604019;
  --btn-edge: #b8884e;
  --btn-radius: 35% 35% 20% 20% / 28% 28% 17% 17%;
  --btn-shadow: inset 2px 0 2px #fff3c4, inset -2px 0 3px #b98f4940, 0 2px 0 #c19b67;
}
.studio-button-skin.bg-style-playful-custard-cup .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: auto -3px -4px; height: 12px;
  border: 1px solid #c8b393; border-radius: 50%; background: #fff7df; box-shadow: 0 3px 4px #6b542726;
}
.studio-button-skin.bg-style-playful-custard-cup .bg-face::before {
  inset: 3px 10px auto; height: 3px; border-radius: 50%; background: #fbe1b599;
}
.studio-button-skin.bg-style-playful-custard-cup .bg-face::after {
  inset: 12px auto 7px 5px; width: 4px; border-left: 2px solid #fff5d7a6; border-radius: 50%;
}

/* 甜心 / 01 — berry shoulders, seeds confined to the rim and a leaf crown. */
.studio-button-skin.bg-style-sweet-berry-seed {
  --sample-bg: #eee0db;
  --sample-ink: #633f40;
  --fx-color: #d39599;
  --btn-bg: radial-gradient(ellipse at 40% 28%, #ffece5, #f0b9b7 76%, #e49c9b);
  --btn-ink: #702c3b;
  --btn-edge: #c57e84;
  --btn-radius: 43% 43% 48% 48% / 33% 33% 65% 65%;
  --btn-shadow: inset 1px 2px 2px #fff2e7, inset 0 -3px 3px #b55d7740, 0 3px 0 #b57779, 0 5px 8px #64303a24;
}
.studio-button-skin.bg-style-sweet-berry-seed .bg-art i {
  display: block; position: absolute; top: -4px; width: 13px; height: 9px;
  border: 1px solid #6c966e; border-radius: 1px 90% 1px 90%;
  background: linear-gradient(135deg, #c9d9a5, #8fb181);
}
.studio-button-skin.bg-style-sweet-berry-seed .bg-art i:nth-child(1) { left: calc(50% - 15px); transform: rotate(12deg); }
.studio-button-skin.bg-style-sweet-berry-seed .bg-art i:nth-child(2) { left: calc(50% - 6px); top: -6px; transform: rotate(50deg); }
.studio-button-skin.bg-style-sweet-berry-seed .bg-art i:nth-child(3) { right: calc(50% - 15px); transform: rotate(80deg); }
.studio-button-skin.bg-style-sweet-berry-seed .bg-face::before {
  inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 13% 33%, #fff1ba 0 1px, #b7687455 1.2px 1.8px, transparent 2px), radial-gradient(ellipse at 87% 33%, #fff1ba 0 1px, #b7687455 1.2px 1.8px, transparent 2px), radial-gradient(ellipse at 19% 68%, #fff1ba 0 1px, transparent 1.8px), radial-gradient(ellipse at 81% 68%, #fff1ba 0 1px, transparent 1.8px), radial-gradient(ellipse at 50% 88%, #fff1ba 0 1px, transparent 1.8px);
}
.studio-button-skin.bg-style-sweet-berry-seed .bg-face::after {
  inset: 5px 12px auto; height: 5px; border-top: 1px solid #fff8edcc; border-radius: 50%;
}

/* 甜心 / 02 — satin bow tied above a small jewellery-box face. */
.studio-button-skin.bg-style-sweet-bow-knot {
  --sample-bg: #eae0e5;
  --sample-ink: #654557;
  --fx-color: #d5a1bb;
  --btn-bg: linear-gradient(125deg, #fbe9f0, #efd0df 62%, #e1b6cb);
  --btn-ink: #683b58;
  --btn-edge: #bf91a7;
  --btn-radius: 15px;
  --btn-shadow: inset 0 2px 1px #fff6fa, inset 0 -2px 3px #b7819b33, 0 3px 0 #b18a9d, 0 5px 8px #5c304c24;
}
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(-n + 2) {
  display: block; position: absolute; top: -6px; width: 15px; height: 12px;
  border: 1px solid #b67a96; border-radius: 65% 20% 20% 65%;
  background: linear-gradient(30deg, #c782a6, #f7d4e2 50%, #dc9cba 75%); box-shadow: inset 0 1px 1px #fff4;
}
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(1) { left: calc(50% - 16px); transform: rotate(15deg); }
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(2) { right: calc(50% - 16px); transform: scaleX(-1) rotate(15deg); }
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(3) {
  display: block; position: absolute; top: -5px; left: calc(50% - 4px); width: 8px; height: 10px;
  border: 1px solid #b781a0; border-radius: 3px; background: linear-gradient(90deg, #cc8bad, #ffe0ec 50%, #c180a1);
}
.studio-button-skin.bg-style-sweet-bow-knot .bg-face::before {
  inset: 4px; border: 1px solid #d4a3bc; border-radius: 11px; box-shadow: inset 0 1px 0 #fff4f8b3;
}
.studio-button-skin.bg-style-sweet-bow-knot .bg-face::after {
  inset: auto 12px 2px; height: 2px; border-radius: 3px; background: #ffedf5b3;
}

/* 甜心 / 03 — cherries hang off a stem, outside the porcelain disc. */
.studio-button-skin.bg-style-sweet-cherry-pair {
  --sample-bg: #e8e7d9;
  --sample-ink: #564b37;
  --fx-color: #bf7783;
  --btn-bg: radial-gradient(ellipse at 35% 15%, #fffdf0, #f1e8d7 78%, #ded1b5);
  --btn-ink: #7a3643;
  --btn-edge: #b29d80;
  --btn-radius: 50%;
  --btn-shadow: inset 0 1px 2px #fffdf7, inset 0 -2px 2px #c0ad8650, 0 2px 0 #b6a384, 0 4px 7px #4a382824;
}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(1) {
  display: block; position: absolute; top: -9px; right: 3px; width: 12px; height: 14px;
  border: 1px solid #739474; border-bottom: 0; border-radius: 80% 40% 0 0; transform: rotate(18deg);
}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(2),
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(3) {
  display: block; position: absolute; width: 9px; height: 10px;
  border: 1px solid #a85162; border-radius: 47% 47% 50% 50%;
  background: radial-gradient(circle at 30% 25%, #ffded6 0 12%, #d8848a 23%, #b55d70 75%);
}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(2) { right: 11px; top: -3px; }
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(3) { right: -1px; top: -1px; }
.studio-button-skin.bg-style-sweet-cherry-pair .bg-face::before {
  inset: 4px; border: 1px solid #b4707866; border-radius: inherit; box-shadow: 0 0 0 2px #fff6e8;
}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-face::after {
  inset: auto 12px 7px; height: 4px; border-bottom: 1px solid #b8778266; border-radius: 50%;
}

/* 甜心 / 04 — dome, cream seam, then crimped macaron foot. */
.studio-button-skin.bg-style-sweet-macaron-shell {
  --sample-bg: #e9e1e8;
  --sample-ink: #59445f;
  --fx-color: #bba0cc;
  --btn-bg: radial-gradient(ellipse at 40% 10%, #f7eaff, #d7b9e2 74%, #c19dcc);
  --btn-ink: #56335f;
  --btn-edge: #aa88b9;
  --btn-radius: 47% 47% 38% 38%;
  --btn-shadow: inset 1px 2px 2px #fff0ff, inset 0 -2px 1px #b18aba, 0 1px 0 #a27cb0;
}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: 8px 1px -5px; border: 1px solid #ab86b6;
  border-radius: 45% 45% 38% 38%; background: #e4c7e9;
  box-shadow: 0 3px 0 #bb93c4, 0 6px 7px #4b2e5826;
}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-art i:nth-child(2) {
  display: block; position: absolute; inset: auto 3px -3px; height: 9px;
  border: 1px solid #e9cdcc; border-radius: 0 0 45% 45%; background: #fff1dc;
  box-shadow: inset 0 -2px 0 #ecd4bc;
}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-face::before {
  inset: auto 5px 2px; height: 4px; border-bottom: 2px dotted #a174ae; border-radius: 0 0 45% 45%;
}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-face::after {
  inset: 4px 9px auto; height: 7px; border-top: 1px solid #fff1ffc9; border-radius: 50%;
}

/* 甜心 / 05 — scalloped lace outside, fine stitching inside. */
.studio-button-skin.bg-style-sweet-lace-medallion {
  --sample-bg: #e6ddd4;
  --sample-ink: #5a4547;
  --fx-color: #c5a398;
  --btn-bg: linear-gradient(140deg, #fffaf1, #eee0d2);
  --btn-ink: #68464d;
  --btn-edge: #c3a59b;
  --btn-radius: 50%;
  --btn-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px #bfa28f50, 0 2px 2px #7b50452e;
}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: -5px; border: 5px dotted #fff8ed; border-radius: inherit;
  box-shadow: 0 0 0 1px #cbb6a799;
}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-art i:nth-child(2) {
  display: block; position: absolute; inset: -2px; border: 1px dashed #b39187; border-radius: inherit;
}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-face::before {
  inset: 4px; border: 1px dashed #bd9a93; border-radius: inherit;
}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-face::after {
  inset: 7px; border: 1px solid #d7bcb12e; border-radius: inherit;
}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-text { --btn-radius: 15px; }

/* 甜心 / 06 — a side-folded ribbon leaves the central satin unbroken. */
.studio-button-skin.bg-style-sweet-satin-ribbon {
  --sample-bg: #e8dee1;
  --sample-ink: #614750;
  --fx-color: #c593a5;
  --btn-bg: linear-gradient(105deg, #c893a6, #f1d3df 18%, #edc5d4 37%, #e3b6c7 77%, #c895ab);
  --btn-ink: #613447;
  --btn-edge: #ae7b90;
  --btn-radius: 10px 10px 13px 13px;
  --btn-shadow: inset 0 1px 1px #ffe6ee, inset 0 -2px 2px #ad78943b, 0 3px 0 #986d80, 0 5px 7px #5d324826;
}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-art i:nth-child(1) {
  display: block; position: absolute; right: -6px; top: 9px; bottom: 8px; width: 13px;
  clip-path: polygon(0 0, 100% 12%, 70% 50%, 100% 89%, 0 100%);
  background: linear-gradient(90deg, #976079, #cd92ab 67%, #f0bfd2);
}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-art i:nth-child(2) {
  display: block; position: absolute; left: 5px; bottom: -4px; width: 10px; height: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); background: #b27b93;
}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-face::before {
  inset: 3px; border: 1px solid #fff0f06b; border-radius: 7px 7px 10px 10px;
}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-face::after {
  inset: 7px auto 7px 6px; width: 3px; border-left: 1px solid #a96f8699; border-right: 1px solid #ffe9f080;
}

/* 甜心 / 07 — piped cream around a plain porcelain centre. */
.studio-button-skin.bg-style-sweet-cream-rosette {
  --sample-bg: #eee0d3;
  --sample-ink: #675044;
  --fx-color: #d8b085;
  --btn-bg: radial-gradient(ellipse at 40% 25%, #fffdf1, #f5dfc1 90%);
  --btn-ink: #725135;
  --btn-edge: #caa374;
  --btn-radius: 50%;
  --btn-shadow: inset 0 1px 2px #fff, inset 0 -2px 2px #c8a46d30, 0 2px 2px #926e4a40;
}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: -5px; border-radius: 41%;
  background: repeating-conic-gradient(from 8deg, #fff6df 0 12deg, #d6b78b 16deg 19deg, #f9e6c5 25deg 30deg);
  box-shadow: 0 2px 3px #9870493d;
}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-art i:nth-child(2) {
  display: block; position: absolute; inset: auto auto -6px calc(50% - 4px); width: 8px; height: 10px;
  border: 1px solid #d7b98d; border-radius: 35% 35% 60% 60%; background: #fff0d2;
}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-face::before {
  inset: 3px; border: 1px solid #ddbf94; border-radius: inherit; box-shadow: 0 0 0 1px #fff7e5;
}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-face::after {
  inset: 6px 11px auto; height: 4px; border-top: 1px solid #fff; border-radius: 50%;
}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-text { --btn-radius: 18px; }
.studio-button-skin.bg-style-sweet-cream-rosette .bg-text .bg-art i:nth-child(1) {
  border-radius: 21px; background: repeating-linear-gradient(115deg, #fff2d8 0 5px, #d5b387 6px 7px, #fff2d8 9px 12px);
}

/* 甜心 / 08 — two folded corners, no diagonal sheet over the label. */
.studio-button-skin.bg-style-sweet-candy-fold {
  --sample-bg: #e3e4ef;
  --sample-ink: #434b68;
  --fx-color: #a4b0da;
  --btn-bg: linear-gradient(135deg, #eef1ff, #d1daf4 74%, #bbcae8);
  --btn-ink: #3b4a78;
  --btn-edge: #98a9cd;
  --btn-radius: 5px 15px 5px 15px;
  --btn-shadow: inset 1px 1px 0 #faffff, inset -1px -1px 0 #9aadd366, 0 3px 0 #93a3c5, 0 5px 7px #2c3e6424;
}
.studio-button-skin.bg-style-sweet-candy-fold .bg-face::before {
  inset: -1px auto auto -1px; width: 12px; height: 12px;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 4px 0 0 0;
  background: linear-gradient(135deg, #b6c6e4 40%, #fbfdff 44% 64%, #a7b6d6 68%);
}
.studio-button-skin.bg-style-sweet-candy-fold .bg-face::after {
  inset: auto -1px -1px auto; width: 12px; height: 12px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); border-radius: 0 0 4px 0;
  background: linear-gradient(135deg, #a4b4d7 38%, #f5fbff 44% 64%, #bdcdec 69%);
}
.studio-button-skin.bg-style-sweet-candy-fold .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: 4px -3px 4px 3px;
  border: 1px solid #a1b3d58c; border-radius: 3px 13px 4px 13px; background: #dbe7f8;
}

/* 甜心 / 09 — envelope fold lines, with a small heart seal below the face. */
.studio-button-skin.bg-style-sweet-heart-envelope {
  --sample-bg: #eee0d9;
  --sample-ink: #624844;
  --fx-color: #cb938d;
  --btn-bg: linear-gradient(#fff3e8, #efd8c8);
  --btn-ink: #733f43;
  --btn-edge: #c6a08f;
  --btn-radius: 10px;
  --btn-shadow: inset 0 1px 0 #fffaf2, inset 0 -1px 0 #d6b6a4, 0 3px 0 #b99784, 0 5px 7px #60332924;
}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-face::before {
  inset: auto 3px 3px; height: 9px; border-radius: 0 0 5px 5px;
  background: linear-gradient(34deg, transparent 0 21%, #bd8e806b 22% 24%, transparent 25%) left / 50% 100% no-repeat, linear-gradient(-34deg, transparent 0 21%, #bd8e806b 22% 24%, transparent 25%) right / 50% 100% no-repeat;
}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-face::after {
  inset: 3px 5px auto; height: 6px; border-bottom: 1px solid #c092815c; border-radius: 0 0 50% 50%;
}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-art i:nth-child(1) {
  display: block; position: absolute; left: calc(50% - 6px); bottom: -5px; width: 12px; height: 11px;
  clip-path: polygon(50% 100%, 8% 60%, 0 31%, 9% 9%, 31% 0, 50% 19%, 69% 0, 91% 9%, 100% 31%, 92% 60%);
  background: linear-gradient(145deg, #e4adab, #b8757e 70%); box-shadow: inset 0 2px 1px #ffd8cd;
}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-art i:nth-child(2) {
  display: block; position: absolute; inset: 5px 3px -2px; border: 1px solid #e0c5b2;
  border-radius: 8px; background: #fff0d9;
}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-art i:nth-child(1) { z-index: 1; }

/* 甜心 / 10 — pearl clusters and tiny gold claws around a velvet centre. */
.studio-button-skin.bg-style-sweet-pearl-halo {
  --sample-bg: #dedee8;
  --sample-ink: #484762;
  --fx-color: #c7b5d5;
  --btn-bg: radial-gradient(ellipse at 40% 20%, #f4edf8, #ddd0e8 78%, #c4b1d1);
  --btn-ink: #554064;
  --btn-edge: #ad9572;
  --btn-radius: 50%;
  --btn-shadow: inset 0 1px 2px #fff6ff, inset 0 -2px 2px #957fac45, 0 2px 1px #9b875e80, 0 4px 8px #39304724;
}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(1),
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(2) {
  display: block; position: absolute; top: calc(50% - 4px); width: 8px; height: 8px;
  border: 1px solid #cbbda8; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #f2e7d8 54%, #c3b9b0);
  box-shadow: 0 -9px 0 -1px #f7eddf, 0 9px 0 -1px #f7eddf;
}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(1) { left: -5px; }
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(2) { right: -5px; }
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(3) {
  display: block; position: absolute; inset: -4px 15px; border-top: 5px dotted #fff4e6;
  border-bottom: 5px dotted #fff4e6; border-radius: 45%;
}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-face::before {
  inset: 3px; border: 1px solid #c4ae88; border-radius: inherit; box-shadow: 0 0 0 1px #fff6e37a;
}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-face::after {
  inset: auto calc(50% - 4px) -2px; height: 5px; border: 1px solid #a68c64;
  border-radius: 1px 1px 4px 4px; background: linear-gradient(90deg, #be9c63, #fbe1a7, #c4a670);
}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-text { --btn-radius: 18px; }

/* 清新 / 01 — diagonal leaf tips without rotating the actual control. */
.studio-button-skin.bg-style-fresh-leaf-tip {
  --sample-bg: #dfe7d7;
  --sample-ink: #3b5138;
  --fx-color: #9bbc86;
  --btn-bg: linear-gradient(135deg, #e7f1c9, #bdd399 75%, #a7c18a);
  --btn-ink: #35502d;
  --btn-edge: #849f6f;
  --btn-radius: 7px 52% 7px 52%;
  --btn-shadow: inset 1px 2px 1px #f6ffdf, inset -2px -2px 2px #6c8c5840, 0 3px 0 #809567, 0 5px 7px #314b2426;
}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-art i:nth-child(1) {
  display: block; position: absolute; right: -3px; bottom: 0; width: 9px; height: 3px;
  border-radius: 2px; background: #6f8c57; transform: rotate(41deg);
}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-face::before {
  inset: 4px 5px auto auto; width: 14px; height: 12px;
  border-top: 1px solid #f2ffd5cc; border-right: 1px solid #69885380; border-radius: 0 90% 0 0;
}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-face::after {
  inset: auto auto 5px 5px; width: 11px; height: 12px;
  background: linear-gradient(35deg, transparent 43%, #6d8e578c 46% 49%, transparent 52%), linear-gradient(79deg, transparent 55%, #6d8e5766 57% 60%, transparent 63%);
  border-left: 1px solid #d9eeb699; border-radius: 0 0 0 85%;
}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-text { --btn-radius: 8px 24px 8px 24px; }

/* 清新 / 02 — optical droplet with a small leaf supporting its base. */
.studio-button-skin.bg-style-fresh-dewdrop {
  --sample-bg: #dce9e2;
  --sample-ink: #365650;
  --fx-color: #90c4b4;
  --btn-bg: radial-gradient(ellipse at 26% 20%, #f2fff1, transparent 56%), linear-gradient(145deg, #d4eedf, #a7cdbf 70%, #e0f6d9);
  --btn-ink: #28564b;
  --btn-edge: #8bb8a7;
  --btn-radius: 50% 12% 50% 50%;
  --btn-shadow: inset 2px 2px 2px #f3fff2, inset -2px -3px 3px #689d884d, 0 3px 2px #698e7c80, 0 5px 8px #28543c24;
}
.studio-button-skin.bg-style-fresh-dewdrop .bg-art i:nth-child(1) {
  display: block; position: absolute; bottom: -4px; left: 5px; width: 25px; height: 11px;
  border: 1px solid #85a278; border-radius: 1px 90% 1px 90%;
  background: linear-gradient(165deg, #d6e4ba 44%, #84a475 46% 51%, #b9d299 53%); transform: rotate(-12deg);
}
.studio-button-skin.bg-style-fresh-dewdrop .bg-face::before {
  inset: 3px; border: 1px solid #eaffdf96; border-right-color: #60948345; border-radius: inherit;
}
.studio-button-skin.bg-style-fresh-dewdrop .bg-face::after {
  inset: 10px auto 13px 5px; width: 5px; border-left: 2px solid #fffdf1e6; border-radius: 50%;
}

/* 清新 / 03 — six citrus segments stop at a calm, solid central pith. */
.studio-button-skin.bg-style-fresh-lime-slice {
  --sample-bg: #e4e8ce;
  --sample-ink: #4d552f;
  --fx-color: #b9ce75;
  --btn-bg: radial-gradient(ellipse, #f8f3bf 0 53%, transparent 56%), repeating-conic-gradient(from 14deg, #d5df91 0 56deg, #ffface 57deg 60deg);
  --btn-ink: #4b5823;
  --btn-edge: #8caa53;
  --btn-radius: 50%;
  --btn-shadow: inset 0 0 0 2px #aac86e, inset 0 0 0 4px #fbf4bd, 0 3px 0 #8fa451, 0 5px 7px #3b531f24;
}
.studio-button-skin.bg-style-fresh-lime-slice .bg-face::before {
  inset: 5px; border: 1px solid #fffad496; border-radius: inherit;
}
.studio-button-skin.bg-style-fresh-lime-slice .bg-face::after {
  inset: auto auto 6px calc(50% - 2px); width: 4px; height: 6px;
  border-radius: 70% 35% 65% 40%; background: #fffbde; box-shadow: 1px 1px 0 #a8aa5e66; transform: rotate(20deg);
}
.studio-button-skin.bg-style-fresh-lime-slice .bg-text { --btn-radius: 22px; }
.studio-button-skin.bg-style-fresh-lime-slice .bg-text .bg-face {
  --btn-bg: radial-gradient(ellipse, #f8f3bf 0 65%, transparent 69%), repeating-conic-gradient(from 14deg, #d5df91 0 56deg, #ffface 57deg 60deg);
}

/* 清新 / 04 — a dark botanical tab with veins along one edge only. */
.studio-button-skin.bg-style-fresh-fern-vein {
  --sample-bg: #dbe3d8;
  --sample-ink: #344f40;
  --fx-color: #c2dba0;
  --btn-bg: linear-gradient(135deg, #45634c, #2f4a3c 80%);
  --btn-ink: #edf5d6;
  --btn-edge: #769878;
  --btn-radius: 8px 21px 8px 21px;
  --btn-shadow: inset 0 1px 1px #c5db9c59, inset 0 -2px 2px #162c2080, 0 3px 0 #25392c, 0 5px 7px #243e2d33;
}
.studio-button-skin.bg-style-fresh-fern-vein .bg-face::before {
  inset: 7px auto 7px 5px; width: 5px;
  border-left: 1px solid #b9cd947a; border-radius: 30%;
  background: repeating-linear-gradient(145deg, transparent 0 4px, #b4ca8d80 4.5px 5.3px, transparent 6px 8px);
}
.studio-button-skin.bg-style-fresh-fern-vein .bg-face::after {
  inset: 3px 9px auto 12px; height: 4px; border-top: 1px solid #9bb78480; border-radius: 50%;
}
.studio-button-skin.bg-style-fresh-fern-vein .bg-art i:nth-child(1) {
  display: block; position: absolute; right: -2px; bottom: 4px; width: 8px; height: 14px;
  border: 1px solid #6e9468; border-radius: 95% 0 95% 0;
  background: linear-gradient(125deg, #78946b 46%, #b6c995 49% 53%, #527653 56%); transform: rotate(19deg);
}

/* 清新 / 05 — four broad petals cradle a quiet glazed cup. */
.studio-button-skin.bg-style-fresh-petal-cup {
  --sample-bg: #e6e7df;
  --sample-ink: #4e594d;
  --fx-color: #c0c9ae;
  --btn-bg: radial-gradient(ellipse at 45% 20%, #fffff5, #e7eddb 80%);
  --btn-ink: #405845;
  --btn-edge: #a8b6a0;
  --btn-radius: 47%;
  --btn-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #9aab8950, 0 2px 2px #6c7e5b4d;
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: -5px 5px; border: 1px solid #b0bfa4;
  border-radius: 45%; background: linear-gradient(90deg, #c6d4b6, #f4f7e7 48%, #cddcbe);
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(2) {
  display: block; position: absolute; inset: 5px -5px; border: 1px solid #aebe9f;
  border-radius: 45%; background: linear-gradient(#d2dfc0, #fcfae8 48%, #c1d0ae);
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(3) {
  display: block; position: absolute; inset: -2px 12px; border-top: 1px solid #9fb18c;
  border-bottom: 1px solid #9fb18c; border-radius: 40%;
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-face::before {
  inset: 4px; border: 1px solid #b3c0a975; border-radius: inherit; box-shadow: 0 1px 0 #fffdf2;
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-face::after {
  inset: 7px 12px auto; height: 3px; border-top: 1px solid #fff; border-radius: 50%;
}
.studio-button-skin.bg-style-fresh-petal-cup .bg-text { --btn-radius: 22px; }

/* 清新 / 06 — still, offset water lines, not a spinning record. */
.studio-button-skin.bg-style-fresh-lake-rings {
  --sample-bg: #dbe7e7;
  --sample-ink: #36555b;
  --fx-color: #9ec7cf;
  --btn-bg: radial-gradient(ellipse at 32% 25%, #e4f7ef, #bddddd 70%, #a5cacc);
  --btn-ink: #2d5861;
  --btn-edge: #85b0b7;
  --btn-radius: 50%;
  --btn-shadow: inset 0 1px 1px #effff6, inset 0 -2px 2px #689aa254, 0 2px 0 #8db1b3, 0 4px 7px #274c5224;
}
.studio-button-skin.bg-style-fresh-lake-rings .bg-face::before {
  inset: 3px 2px 6px 4px; border: 1px solid #f3fff1a3; border-right-color: #659ba43d;
  border-radius: 49% 46% 48% 45%;
}
.studio-button-skin.bg-style-fresh-lake-rings .bg-face::after {
  inset: 6px 5px 3px 3px; border: 1px solid #7eaeb038; border-bottom-color: #efffecbd;
  border-radius: 45% 48% 46% 49%;
}
.studio-button-skin.bg-style-fresh-lake-rings .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: auto 8px -2px; height: 7px;
  border-bottom: 1px solid #c8ebe6; border-radius: 50%;
}
.studio-button-skin.bg-style-fresh-lake-rings .bg-text { --btn-radius: 22px; }

/* 清新 / 07 — fan-shaped upper rim and a low shell hinge. */
.studio-button-skin.bg-style-fresh-shell-fan {
  --sample-bg: #e9e4da;
  --sample-ink: #585246;
  --fx-color: #c8bda6;
  --btn-bg: radial-gradient(ellipse at 48% 15%, #fffdf0, #e7dfcc 79%, #cfc4ad);
  --btn-ink: #625742;
  --btn-edge: #b5a88e;
  --btn-radius: 50% 50% 32% 32% / 48% 48% 22% 22%;
  --btn-shadow: inset 1px 2px 2px #fffff3, inset 0 -3px 3px #a89b794d, 0 3px 0 #a69c83, 0 5px 7px #51432b26;
}
.studio-button-skin.bg-style-fresh-shell-fan .bg-face::before {
  inset: 3px 4px auto; height: 9px; border-radius: 50% 50% 0 0;
  background: repeating-conic-gradient(from -62deg at 50% 180%, #c3b9a15e 0 3deg, #fffff466 5deg 8deg, transparent 10deg 19deg);
}
.studio-button-skin.bg-style-fresh-shell-fan .bg-face::after {
  inset: auto 8px 5px; height: 5px; border-bottom: 1px solid #fff8d9; border-radius: 0 0 50% 50%;
}
.studio-button-skin.bg-style-fresh-shell-fan .bg-art i:nth-child(1) {
  display: block; position: absolute; bottom: -4px; left: calc(50% - 7px); width: 14px; height: 8px;
  border: 1px solid #b4a78c; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, #cec0a4, #f7eacc 48%, #cbb99a);
}
.studio-button-skin.bg-style-fresh-shell-fan .bg-play .bg-face::before { height: 12px; }

/* 清新 / 08 — frame, narrow edge tracks and three separate raindrops. */
.studio-button-skin.bg-style-fresh-rain-window {
  --sample-bg: #dee6e8;
  --sample-ink: #3d535d;
  --fx-color: #a5c3d2;
  --btn-bg: linear-gradient(135deg, #e6f2f4, #c6dce4 70%, #b0c9d4);
  --btn-ink: #355266;
  --btn-edge: #8faab8;
  --btn-radius: 11px;
  --btn-shadow: inset 0 1px 0 #f9fffc, inset 0 0 0 3px #e5ece9, inset 0 0 0 4px #a8bfc6, 0 3px 0 #92a7af, 0 5px 7px #2d434f24;
}
.studio-button-skin.bg-style-fresh-rain-window .bg-face::before {
  inset: 7px auto 7px 6px; width: 4px; border-left: 1px solid #769caa61;
  background: radial-gradient(ellipse at 55% 28%, #fafff1 0 1px, #9dc0d4 1.5px 2px, transparent 2.5px);
}
.studio-button-skin.bg-style-fresh-rain-window .bg-face::after {
  inset: 7px 5px 7px auto; width: 5px;
  background: radial-gradient(ellipse at 40% 17%, #f5ffff 0 1px, #87aaba 1.5px 2px, transparent 2.5px), radial-gradient(ellipse at 60% 80%, #eafff4 0 1px, #90b6c5 1.5px 2px, transparent 2.5px), linear-gradient(90deg, transparent 65%, #fff9 69% 77%, transparent 81%);
}
.studio-button-skin.bg-style-fresh-rain-window .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: auto 9px -2px; height: 3px;
  border-radius: 2px; background: #c4d5d8; border-bottom: 1px solid #819da6;
}

/* 清新 / 09 — asymmetric river stone, moss gathered along the underside. */
.studio-button-skin.bg-style-fresh-moss-stone {
  --sample-bg: #dde1d5;
  --sample-ink: #434e3d;
  --fx-color: #a8b382;
  --btn-bg: radial-gradient(ellipse at 40% 20%, #e7e8da, #bfc5b0 76%, #a8b098);
  --btn-ink: #3e4b37;
  --btn-edge: #969d84;
  --btn-radius: 43% 57% 39% 54% / 44% 41% 57% 53%;
  --btn-shadow: inset 1px 2px 2px #f4f3e8a6, inset -2px -3px 4px #727f634a, 0 3px 0 #88917b, 0 5px 7px #32422b26;
}
.studio-button-skin.bg-style-fresh-moss-stone .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: auto 4px -4px 0; height: 12px;
  border: 1px solid #81905e; border-radius: 40% 50% 43% 45%;
  background: radial-gradient(circle, #b7c08d 0 .7px, transparent 1.1px) 0 0 / 4px 4px, #8b9a68;
  box-shadow: inset 0 -2px 1px #5c75465c;
}
.studio-button-skin.bg-style-fresh-moss-stone .bg-face::before {
  inset: 5px 9px auto; height: 5px; border-top: 1px solid #fcf9e4a3; border-radius: 50%;
}
.studio-button-skin.bg-style-fresh-moss-stone .bg-face::after {
  inset: auto 5px 5px auto; width: 11px; height: 10px;
  background: linear-gradient(25deg, transparent 47%, #7e896763 49% 51%, transparent 53%), linear-gradient(140deg, transparent 58%, #f5f1d76b 60% 62%, transparent 64%);
  border-radius: 0 0 60% 0;
}
.studio-button-skin.bg-style-fresh-moss-stone .bg-text { --btn-radius: 26px 23px 24px 20px / 21px 19px 23px 20px; }

/* 清新 / 10 — celadon rim, quiet glaze and an exposed earthenware foot. */
.studio-button-skin.bg-style-fresh-celadon-glaze {
  --sample-bg: #dfe7df;
  --sample-ink: #3d5549;
  --fx-color: #9fc5ac;
  --btn-bg: radial-gradient(ellipse at 32% 18%, #e4f3df, transparent 62%), linear-gradient(145deg, #c0dbbd, #a1c2a9 79%, #cee0ba);
  --btn-ink: #345644;
  --btn-edge: #7ea88c;
  --btn-radius: 15px 15px 18px 18px;
  --btn-shadow: inset 1px 2px 2px #eaffdf, inset -2px -3px 3px #68927350, 0 2px 1px #78998299;
}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-art i:nth-child(1) {
  display: block; position: absolute; inset: 8px 5px -4px; border: 1px solid #a69170;
  border-radius: 12px 12px 13px 13px; background: #d2c3a3;
  box-shadow: inset 0 -2px 0 #b2a284, 0 3px 5px #3d4e3326;
}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-face::before {
  inset: 3px; border: 1px solid #709c7f80; border-radius: 12px 12px 15px 15px;
  box-shadow: 0 0 0 1px #e7f4d273;
}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-face::after {
  inset: 6px 6px auto auto; width: 10px; height: 9px; border-top: 1px solid #f7ffe19c;
  border-radius: 0 60% 0 0;
  background: linear-gradient(38deg, transparent 45%, #72987b63 48% 50%, transparent 53%), linear-gradient(120deg, transparent 62%, #72987b59 64% 67%, transparent 69%);
}

/*
 * Heritage / 30 original constructions.
 * UIverse is a general material-language reference, not a per-item source.
 * The heritage- namespace belongs exclusively to this set. No stage selectors,
 * hit-area resizing, hover dependencies, animations or interaction overrides.
 * Surface / inset workmanship / perimeter ornament stay separate from glyphs.
 */
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-button {
  border-radius: var(--btn-radius);
}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-face {
  position: absolute;
  inset: 0;
  isolation: isolate;
  z-index: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--btn-edge);
  border-radius: inherit;
  color: var(--btn-ink);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-face::before,
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-face::after {
  z-index: 0;
}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-art {
  z-index: 1;
  pointer-events: none;
}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-art i {
  position: absolute;
  pointer-events: none;
}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-glyphs {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--btn-ink);
}

/* 东方 01 / 云肩：上沿卷云、两肩瓷胎、下沿金弧。 */
.studio-button-skin.bg-style-heritage-cloud-collar {
  --sample-bg: #e7e9e0; --sample-ink: #354b46; --fx-color: #76b3a4;
  --btn-bg: linear-gradient(160deg, #fcfff5, #d0e1d7);
  --btn-ink: #234a42; --btn-edge: #73998b; --btn-radius: 42% 42% 30% 30%;
  --btn-shadow: inset 0 2px 1px #fff, inset 0 -3px 3px #90b6a575, 0 3px 0 #77988b, 0 5px 7px #233c3526;
}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-face::before {
  inset: 5px 6px 6px; border: 1px solid #86a99b; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-face::after {
  inset: auto 15% 2px; height: 7px; border-bottom: 2px solid #b79451; border-radius: 0 0 50% 50%;
}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-art i:nth-child(1) {
  display: block; top: -2px; left: calc(50% - 7px); width: 14px; height: 9px;
  border: 1px solid #73998b; border-bottom: 0; border-radius: 12px 12px 4px 4px;
  background: #eaf4e9; box-shadow: -9px 3px 0 -2px #e5f1e6, 9px 3px 0 -2px #e5f1e6;
}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-play .bg-face::before { border-width: 1px 2px; }

/* 东方 02 / 玉璧：圆环不是图标孔，净面台保持实心可读。 */
.studio-button-skin.bg-style-heritage-jade-disc {
  --sample-bg: #dce7df; --sample-ink: #214d3d; --fx-color: #59b389;
  --btn-bg: conic-gradient(from 25deg, #cce9d5, #5e9e81 22%, #9ad4b2 46%, #e3f4da 68%, #87bd9c 86%, #cce9d5);
  --btn-ink: #163f31; --btn-edge: #5e937d; --btn-radius: 50%;
  --btn-shadow: inset 0 1px 1px #efffe8, inset 0 -2px 2px #355e4755, 0 3px 0 #45765e, 0 5px 7px #24433330;
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-face::before {
  inset: 8px; border: 1px solid #618a6e; border-radius: inherit;
  background: #dbecd8; box-shadow: 0 0 0 3px #ffffff3d, inset 0 2px 3px #426f5a45;
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-face::after {
  inset: 3px; border: 1px solid #ebffe691; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-art i:nth-child(1) {
  display: block; inset: 2px calc(50% - 2px) auto; height: 5px; border-radius: 2px;
  background: #c6a770; box-shadow: inset 1px 0 #fff1be;
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-art i:nth-child(2) {
  display: block; inset: auto calc(50% - 2px) 2px; height: 5px; border-radius: 2px;
  background: #ae8a51; box-shadow: inset 1px 0 #f8e7b7;
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-art i:nth-child(3) {
  display: block; inset: calc(50% - 2px) 2px; height: 4px;
  background: linear-gradient(90deg, #b79b60 5px, transparent 5px calc(100% - 5px), #b79b60 0);
}
.studio-button-skin.bg-style-heritage-jade-disc .bg-text .bg-face::before { inset: 6px; }

/* 东方 03 / 铜鉴：八角坯体，刻度仅在镜台之外。 */
.studio-button-skin.bg-style-heritage-bronze-mirror {
  --sample-bg: #272e29; --sample-ink: #e2dbc0; --fx-color: #cfb071;
  --btn-bg: conic-gradient(from 30deg, #97864e, #d6c28c 20%, #6d734d 46%, #c8b476 72%, #97864e);
  --btn-ink: #302b1b; --btn-edge: #756d40; --btn-radius: 9px;
  --btn-shadow: inset 0 0 0 2px #d7c287, inset 0 0 0 3px #675e35;
}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-face {
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-face::before {
  inset: 4px; border: 2px dashed #555c368c; border-radius: 50%; box-shadow: 0 0 0 1px #ece0ab8a;
}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-face::after {
  inset: 9px; border: 1px solid #f1df9d; border-radius: 50%;
  background: linear-gradient(145deg, #dbcf9d, #a89d64); box-shadow: 0 0 0 1px #6d633e, inset 0 1px 3px #fff3c075;
}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-text .bg-face {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-text .bg-face::after { inset: 8px; border-radius: 5px; }

/* 东方 04 / 朱印：错位双框与可见小缺口，不使用纹字贴图。 */
.studio-button-skin.bg-style-heritage-cinnabar-seal {
  --sample-bg: #efe7d8; --sample-ink: #663f30; --fx-color: #ce7155;
  --btn-bg: #993e32; --btn-ink: #fff4db; --btn-edge: #692c26; --btn-radius: 5px 7px 4px 6px;
  --btn-shadow: inset 0 1px 0 #e08468, 1px 3px 0 #632c24, 0 5px 5px #68342a24;
}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-face::before {
  inset: 4px; border: 1px solid #e8b693; border-radius: 2px 4px 1px 3px;
  box-shadow: inset 0 0 0 2px #993e32, inset 0 0 0 3px #d28b6c;
}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-face::after {
  inset: 3px 7px auto auto; width: 8px; height: 6px; background: #993e32;
  border-left: 1px solid #e3a080; transform: rotate(-9deg);
}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-art i:nth-child(1) {
  display: block; inset: auto auto 3px 8px; width: 7px; height: 3px; background: #bf6048; border-bottom: 1px solid #ffdab0;
}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-play .bg-face::before { inset: 5px; border-width: 2px; }

/* 东方 05 / 绢轴：左右实体轴杆不改变按钮的点击盒。 */
.studio-button-skin.bg-style-heritage-silk-scroll {
  --sample-bg: #ded8c9; --sample-ink: #514532; --fx-color: #b39159;
  --btn-bg: linear-gradient(90deg, #bba27a, #f2e6c9 15% 85%, #bba27a);
  --btn-ink: #53422b; --btn-edge: #ab9068; --btn-radius: 5px;
  --btn-shadow: inset 0 1px #fff3d8, inset 0 -1px #a58b60, 0 3px 5px #43352729;
}
.studio-button-skin.bg-style-heritage-silk-scroll .bg-face::before {
  inset: 5px 9px; border-top: 1px solid #b8a274; border-bottom: 1px solid #b8a274;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #8c734c0a 3px 4px);
}
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(2) {
  display: block; top: -2px; bottom: -2px; width: 6px; border: 1px solid #6b543a; border-radius: 3px;
  background: linear-gradient(90deg, #8b6945, #e3c995 45%, #886542); box-shadow: 1px 0 2px #4d36222e;
}
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(1) { left: 1px; }
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(2) { right: 1px; }
.studio-button-skin.bg-style-heritage-silk-scroll .bg-face::after {
  inset: auto 10px 3px; height: 1px; background: #fff5d5;
}

/* 东方 06 / 竹节：两道横节跨过竖纹，中央保持平面。 */
.studio-button-skin.bg-style-heritage-bamboo-joint {
  --sample-bg: #e0e5d3; --sample-ink: #394a2b; --fx-color: #8aa95e;
  --btn-bg: repeating-linear-gradient(90deg, transparent 0 5px, #34512c12 5px 6px), linear-gradient(90deg, #9eac74, #dce0ac 40%, #b3c087 80%, #98a970);
  --btn-ink: #314122; --btn-edge: #7e9057; --btn-radius: 10px 10px 12px 12px;
  --btn-shadow: inset 2px 0 2px #edf0c2, inset -2px 0 3px #64783b4f, 0 3px 0 #6a7e45, 0 5px 5px #35462424;
}
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::before,
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::after {
  left: -1px; right: -1px; height: 5px; border-top: 1px solid #e6edbb; border-bottom: 1px solid #6c8042;
  border-radius: 4px; background: linear-gradient(#c2ce91, #98ac68); box-shadow: 0 2px 1px #4a62262b;
}
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::before { top: 5px; }
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::after { bottom: 5px; }
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-play { --btn-radius: 14px 14px 17px 17px; }

/* 东方 07 / 漆盏：收腰外沿与偏置修补金线。 */
.studio-button-skin.bg-style-heritage-lacquer-tray {
  --sample-bg: #252526; --sample-ink: #e4c9af; --fx-color: #caa267;
  --btn-bg: linear-gradient(160deg, #48312e, #231b1c 64%, #3a2526);
  --btn-ink: #ffe4b3; --btn-edge: #b37755; --btn-radius: 34% 34% 40% 40% / 24% 24% 46% 46%;
  --btn-shadow: inset 0 1px #e2b085, inset 0 -3px 2px #100e12, 0 3px 0 #0e1013, 0 5px 8px #0004;
}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-face::before {
  inset: 4px; border: 2px solid #984936; border-radius: inherit; box-shadow: inset 0 1px 2px #efb27845;
}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-face::after {
  inset: 7px 7px 7px 60%; border-right: 1px solid #ddbd75; border-bottom: 1px solid #ddbd75;
  border-radius: 0 0 13px; transform: rotate(-12deg);
}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-art i:nth-child(1) {
  display: block; inset: 3px 28% auto 19%; height: 3px; border-top: 1px solid #fff3d08c; border-radius: 50%;
}

/* 东方 08 / 绢扇：大弧肩、窄扇根，扇骨只画在下沿。 */
.studio-button-skin.bg-style-heritage-silk-fan {
  --sample-bg: #eee0db; --sample-ink: #63454a; --fx-color: #bd8081;
  --btn-bg: linear-gradient(180deg, #fff7e8, #ecd5bd);
  --btn-ink: #66413e; --btn-edge: #b69a75; --btn-radius: 48% 48% 26% 26% / 32% 32% 60% 60%;
  --btn-shadow: inset 0 2px #fffcf0, inset 0 -2px #c4a17c, 0 3px 0 #af8d6c, 0 5px 6px #66474024;
}
.studio-button-skin.bg-style-heritage-silk-fan .bg-face::before {
  inset: 5px; border: 1px solid #c4a084; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-silk-fan .bg-face::after {
  inset: auto 15% 4px; height: 9px; border-radius: 0 0 50% 50%;
  background: repeating-conic-gradient(from -70deg at 50% 140%, #ac86647a 0deg 2deg, transparent 2deg 18deg);
}
.studio-button-skin.bg-style-heritage-silk-fan .bg-art i:nth-child(1) {
  display: block; left: calc(50% - 3px); bottom: 1px; width: 6px; height: 3px;
  border-radius: 2px; background: #ba926b; box-shadow: 0 1px #f4d7aa;
}
.studio-button-skin.bg-style-heritage-silk-fan .bg-text { --btn-radius: 38% 38% 14px 14px / 16px 16px 22px 22px; }

/* 东方 09 / 花窗：窗棂围在留白绢芯的四角。 */
.studio-button-skin.bg-style-heritage-lattice-window {
  --sample-bg: #dedace; --sample-ink: #574738; --fx-color: #b99563;
  --btn-bg: #6b5140; --btn-ink: #48382c; --btn-edge: #493d31; --btn-radius: 7px;
  --btn-shadow: inset 1px 1px #b6956c, inset -1px -1px #312a24, 0 3px 0 #49372b, 0 5px 5px #49382b20;
}
.studio-button-skin.bg-style-heritage-lattice-window .bg-face::before {
  inset: 7px; border: 1px solid #c0a17a; border-radius: 2px;
  background: linear-gradient(135deg, #f5e8d1, #d7c8aa); box-shadow: inset 0 1px 2px #735b4140;
}
.studio-button-skin.bg-style-heritage-lattice-window .bg-face::after {
  inset: 3px; border: 1px solid #b2966b; border-radius: 4px;
}
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(2) {
  display: block; top: 4px; bottom: 4px; width: 8px;
  background: linear-gradient(#c6a878 0 1px, transparent 1px 6px, #c6a878 6px 7px, transparent 7px calc(100% - 7px), #c6a878 calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px) calc(100% - 1px), #c6a878 0);
  border-left: 1px solid #c6a878; border-right: 1px solid #c6a878;
}
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(1) { left: 3px; }
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(2) { right: 3px; }

/* 东方 10 / 线装：实心书脊、三段线迹与纸页侧口。 */
.studio-button-skin.bg-style-heritage-thread-bound {
  --sample-bg: #e1dfd7; --sample-ink: #344b51; --fx-color: #729aa2;
  --btn-bg: linear-gradient(90deg, #264954 0 8px, #345c67 8px 10px, #ebead7 10px);
  --btn-ink: #284751; --btn-edge: #809b99; --btn-radius: 3px 8px 8px 3px;
  --btn-shadow: 1px 1px 0 #e7dfc8, 1px 2px 0 #8d9b90, 1px 3px 0 #e7dfc8, 1px 4px 0 #7c8b83, 0 6px 6px #273a3520;
}
.studio-button-skin.bg-style-heritage-thread-bound .bg-face::before {
  inset: 5px 5px 5px 14px; border: 1px solid #a2ada0; border-radius: 0 4px 4px 0;
}
.studio-button-skin.bg-style-heritage-thread-bound .bg-face::after {
  left: 4px; top: 8px; width: 9px; height: 2px; background: #decfaf;
  box-shadow: 0 13px #decfaf, 0 26px #decfaf; transform: rotate(-12deg);
}
.studio-button-skin.bg-style-heritage-thread-bound .bg-play .bg-face::after { top: 10px; box-shadow: 0 18px #decfaf, 0 36px #decfaf; }
.studio-button-skin.bg-style-heritage-thread-bound .bg-text .bg-face::after { top: 7px; box-shadow: 0 12px #decfaf, 0 24px #decfaf; }

/* 复古 01 / 磁带：两侧小卷轴不侵占中央标签。 */
.studio-button-skin.bg-style-heritage-tape-deck {
  --sample-bg: #d8d6cb; --sample-ink: #41423a; --fx-color: #d09259;
  --btn-bg: linear-gradient(#777b6f, #4b5148); --btn-ink: #fff3d3; --btn-edge: #343e35; --btn-radius: 7px;
  --btn-shadow: inset 0 1px #a4a999, 0 3px 0 #30382f, 0 5px 7px #26312633;
}
.studio-button-skin.bg-style-heritage-tape-deck .bg-face::before {
  inset: 7px 4px 10px; border: 1px solid #393f36; border-radius: 4px;
  background: linear-gradient(#666b57, #4e5545); box-shadow: inset 0 1px 2px #20271f70, 0 1px #929781;
}
.studio-button-skin.bg-style-heritage-tape-deck .bg-face::after {
  inset: auto 22% 3px; height: 5px; border: 1px solid #a7a88c; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #202b25 0 15%, #8e947b 15% 85%, #202b25 85%);
}
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(2) {
  display: block; top: calc(50% - 5px); width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid #c9c6a6; background: #24352d; box-shadow: 0 0 0 1px #232d24;
}
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(1) { left: 5px; }
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(2) { right: 5px; }
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(3) {
  display: block; inset: 3px 14px auto; height: 2px; border-radius: 1px; background: #dfa871;
}

/* 复古 02 / 字键：斜壁与顶帽，所有状态共用同一图标位置。 */
.studio-button-skin.bg-style-heritage-typewriter-key {
  --sample-bg: #3d423e; --sample-ink: #e5ddca; --fx-color: #d5b389;
  --btn-bg: conic-gradient(from 45deg, #b8ad99 0% 25%, #83796a 0% 50%, #c9beaa 0% 75%, #efe3cc 0%);
  --btn-ink: #473b2c; --btn-edge: #766c5d; --btn-radius: 9px;
  --btn-shadow: 0 3px 0 #222b25, 0 5px 5px #0005;
}
.studio-button-skin.bg-style-heritage-typewriter-key .bg-face::before {
  inset: 4px 5px 8px; border: 1px solid #f2e8d4; border-radius: 5px;
  background: linear-gradient(#f2e7d2, #d9cbb1); box-shadow: inset 0 -1px 2px #ab987c5c;
}
.studio-button-skin.bg-style-heritage-typewriter-key .bg-face::after {
  inset: auto 35% 2px; height: 2px; border-top: 1px solid #584d3b; border-bottom: 1px solid #e6d6b9;
}
.studio-button-skin.bg-style-heritage-typewriter-key .bg-play { --btn-bg: conic-gradient(from 45deg, #b88257 0% 25%, #805937 0% 50%, #d89e70 0% 75%, #efd0a6 0%); }
.studio-button-skin.bg-style-heritage-typewriter-key .bg-play .bg-face::before { background: linear-gradient(#f5d5a8, #dca977); border-color: #ffe3b8; }

/* 复古 03 / 搪瓷：窄蓝卷口与局部露铁。 */
.studio-button-skin.bg-style-heritage-enamel-tin {
  --sample-bg: #e1e6e0; --sample-ink: #345362; --fx-color: #709eb3;
  --btn-bg: linear-gradient(155deg, #fffdf0, #e7e8da); --btn-ink: #25495a; --btn-edge: #386477; --btn-radius: 15px;
  --btn-shadow: inset 0 0 0 2px #47778a, inset 0 0 0 3px #dce7db, 0 3px 0 #294c5b, 0 5px 6px #294c5b26;
}
.studio-button-skin.bg-style-heritage-enamel-tin .bg-face::before {
  inset: 5px; border: 1px solid #bdcfc8; border-radius: 10px; box-shadow: inset 0 1px 2px #c9d2bf55;
}
.studio-button-skin.bg-style-heritage-enamel-tin .bg-face::after {
  top: 4px; right: 4px; width: 7px; height: 3px; border-radius: 0 5px 0 3px;
  background: #373f3c; box-shadow: -1px 1px #a7b9b0; transform: rotate(35deg);
}
.studio-button-skin.bg-style-heritage-enamel-tin .bg-play { --btn-radius: 20px; }
.studio-button-skin.bg-style-heritage-enamel-tin .bg-play .bg-face::before { border-radius: 15px; }

/* 复古 04 / 鞍革：实心触面、切角轮廓与两粒铆钉。 */
.studio-button-skin.bg-style-heritage-leather-tab {
  --sample-bg: #ded2c3; --sample-ink: #5a3c2b; --fx-color: #d0a470;
  --btn-bg: radial-gradient(#ffd5a512 .6px, transparent .8px) 0 0 / 3px 3px, linear-gradient(135deg, #946044, #79492f);
  --btn-ink: #fff2d4; --btn-edge: #56351f; --btn-radius: 12px 5px 12px 5px;
  --btn-shadow: inset 0 1px #ca986d, inset 0 -2px #623c28, 0 3px 0 #573723, 0 5px 7px #4426142b;
}
.studio-button-skin.bg-style-heritage-leather-tab .bg-face::before {
  inset: 4px; border: 1px dashed #e5bb89; border-radius: 8px 2px 8px 2px; box-shadow: 0 0 0 1px #623a222b;
}
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(2) {
  display: block; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffe8b6, #b0884c 65%, #73542e); box-shadow: 0 1px 1px #432817;
}
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(1) { left: 3px; }
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(2) { right: 3px; }
.studio-button-skin.bg-style-heritage-leather-tab .bg-face::after { inset: 7px; border-top: 1px solid #e9ba842b; border-radius: inherit; }

/* 复古 05 / 黑胶：纸标盖住声槽，短唱针留在外缘。 */
.studio-button-skin.bg-style-heritage-vinyl-label {
  --sample-bg: #d8ccbc; --sample-ink: #574137; --fx-color: #ce9a70;
  --btn-bg: repeating-radial-gradient(circle, #32322e 0 1px, #171c19 1px 3px);
  --btn-ink: #fff0d1; --btn-edge: #101713; --btn-radius: 50%;
  --btn-shadow: inset 0 1px #7d8373, 0 3px 0 #121a14, 0 5px 7px #15211940;
}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-face::before {
  inset: 10px; border: 1px solid #e4b47b; border-radius: 50%; background: #8d442e;
  box-shadow: 0 0 0 2px #131c16, inset 0 1px #cb82577d;
}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-face::after {
  inset: 3px; border: 1px solid #95927f66; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-art i:nth-child(1) {
  display: block; top: 0; right: 5px; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(90deg, #6b7669, #e8e5c9); transform: rotate(-28deg); box-shadow: 1px 1px 1px #0005;
}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-play .bg-face::before { inset: 12px; }
.studio-button-skin.bg-style-heritage-vinyl-label .bg-text .bg-face::before { inset: 7px 10px; border-radius: 20px; }

/* 复古 06 / 电台：顶端调谐窗、底边孔列与独立指针。 */
.studio-button-skin.bg-style-heritage-radio-dial {
  --sample-bg: #343831; --sample-ink: #ecd8b6; --fx-color: #e0ae66;
  --btn-bg: linear-gradient(100deg, #997a4d, #c5a56d 48%, #96794f);
  --btn-ink: #312c20; --btn-edge: #6a5439; --btn-radius: 8px;
  --btn-shadow: inset 0 1px #ecce90, inset 0 -1px #5e4c36, 0 3px 0 #3d3427, 0 5px 6px #0003;
}
.studio-button-skin.bg-style-heritage-radio-dial .bg-face::before {
  inset: 5px 6px auto; height: 7px; border: 1px solid #56482f; border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #d6c18a 4px 5px) center / auto 3px no-repeat, #374238;
  box-shadow: inset 0 1px 2px #15221980, 0 1px #e0c48c;
}
.studio-button-skin.bg-style-heritage-radio-dial .bg-face::after {
  inset: auto 10px 4px; height: 3px;
  background: radial-gradient(circle, #55462d 1px, transparent 1.2px) center / 5px 3px repeat-x;
}
.studio-button-skin.bg-style-heritage-radio-dial .bg-art i:nth-child(1) {
  display: block; top: 5px; left: 66%; width: 2px; height: 7px; background: #f3ab65; box-shadow: 1px 0 #241e1880;
}
.studio-button-skin.bg-style-heritage-radio-dial .bg-play .bg-face::before { inset-inline: 8px; height: 8px; }

/* 复古 07 / 珐琅：釉芯四角各有掐丝叶片。 */
.studio-button-skin.bg-style-heritage-cloisonne {
  --sample-bg: #26373b; --sample-ink: #e9d7ad; --fx-color: #baa976;
  --btn-bg: linear-gradient(140deg, #276777, #123f53); --btn-ink: #fff0c7; --btn-edge: #d1ae61; --btn-radius: 17px 6px 17px 6px;
  --btn-shadow: inset 0 0 0 2px #7c693d, inset 0 0 0 3px #d4b16c, 0 3px 0 #1b2e32, 0 5px 7px #10252844;
}
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::before,
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::after {
  width: 11px; height: 7px; border: 1px solid #d3b071; border-radius: 9px 1px 9px 1px;
  background: #4e8a88; box-shadow: inset 0 1px #b2c89c66;
}
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::before { top: 4px; left: 4px; }
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::after { bottom: 4px; right: 4px; }
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(2) {
  display: block; width: 6px; height: 6px; border: 1px solid #dfbf7e; border-radius: 1px 5px 1px 5px; background: #a88547;
}
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(1) { top: 4px; right: 4px; }
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(2) { bottom: 4px; left: 4px; }

/* 复古 08 / 胶片：齿孔是凹面浅槽，明暗背景不改变图标。 */
.studio-button-skin.bg-style-heritage-film-frame {
  --sample-bg: #dfd8cc; --sample-ink: #494339; --fx-color: #bba68a;
  --btn-bg: #2d302c; --btn-ink: #312f27; --btn-edge: #151c16; --btn-radius: 4px;
  --btn-shadow: inset 0 1px #697363, 0 3px 0 #20251d, 0 5px 6px #202b2529;
}
.studio-button-skin.bg-style-heritage-film-frame .bg-face::before {
  inset: 9px 5px; border: 1px solid #9c927a; border-radius: 2px;
  background: linear-gradient(135deg, #e4d6b9, #b9ad91); box-shadow: inset 0 1px 3px #524d3850;
}
.studio-button-skin.bg-style-heritage-film-frame .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-film-frame .bg-art i:nth-child(2) {
  display: block; left: 5px; right: 5px; height: 4px;
  background: repeating-linear-gradient(90deg, #b1af99 0 4px, transparent 4px 8px); border-radius: 1px;
}
.studio-button-skin.bg-style-heritage-film-frame .bg-art i:nth-child(1) { top: 3px; }
.studio-button-skin.bg-style-heritage-film-frame .bg-art i:nth-child(2) { bottom: 3px; }
.studio-button-skin.bg-style-heritage-film-frame .bg-face::after { inset: 11px 7px; border-left: 1px solid #f3e7c88f; border-top: 1px solid #f3e7c88f; border-radius: 1px; }

/* 复古 09 / 呢绒：交织底布与斜切小标，不把纹理铺到图标上。 */
.studio-button-skin.bg-style-heritage-tweed-patch {
  --sample-bg: #d7dad2; --sample-ink: #3d4940; --fx-color: #a0b59a;
  --btn-bg: repeating-linear-gradient(45deg, #d5d1ad25 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, #15261d28 0 1px, transparent 1px 4px), #56644e;
  --btn-ink: #fff5d7; --btn-edge: #2e4433; --btn-radius: 13px 13px 4px 13px;
  --btn-shadow: inset 0 0 0 2px #384a36, inset 0 3px 2px #d3d4ac36, 0 3px 0 #2e3d2b, 0 5px 7px #24332326;
}
.studio-button-skin.bg-style-heritage-tweed-patch .bg-face::before {
  inset: 4px; border: 1px dashed #b0b595; border-radius: 9px 9px 2px 9px;
}
.studio-button-skin.bg-style-heritage-tweed-patch .bg-face::after {
  bottom: 2px; right: 2px; width: 12px; height: 12px; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #8e693f, #dab785); border-radius: 0 0 2px 0;
}
.studio-button-skin.bg-style-heritage-tweed-patch .bg-art i:nth-child(1) {
  display: block; bottom: 4px; right: 4px; width: 3px; height: 3px; border-radius: 50%; background: #75582f;
}

/* 复古 10 / 盘带：三扇孔为静态实体，播放不旋转图标。 */
.studio-button-skin.bg-style-heritage-reel-hub {
  --sample-bg: #3c423f; --sample-ink: #e0e0cb; --fx-color: #b3c6b4;
  --btn-bg: conic-gradient(from 35deg, #d9dace, #88988b 22%, #d7ddd0 48%, #7b8a80 74%, #d9dace);
  --btn-ink: #263d31; --btn-edge: #647467; --btn-radius: 50%;
  --btn-shadow: inset 0 0 0 2px #dee6d5, inset 0 0 0 3px #77897a, 0 3px 0 #29382d, 0 5px 6px #12241a47;
}
.studio-button-skin.bg-style-heritage-reel-hub .bg-face::before {
  inset: 5px; border-radius: 50%;
  background: conic-gradient(from -24deg, #263c2e 0deg 48deg, transparent 48deg 120deg, #263c2e 120deg 168deg, transparent 168deg 240deg, #263c2e 240deg 288deg, transparent 288deg);
}
.studio-button-skin.bg-style-heritage-reel-hub .bg-face::after {
  inset: 11px; border: 1px solid #748775; border-radius: 50%; background: linear-gradient(135deg, #e7ecda, #b2c2ae);
  box-shadow: 0 0 0 2px #cad4c2, 0 1px 2px 3px #192e2366;
}
.studio-button-skin.bg-style-heritage-reel-hub .bg-play .bg-face::after { inset: 14px; }
.studio-button-skin.bg-style-heritage-reel-hub .bg-text .bg-face::after { inset: 8px 12px; border-radius: 20px; }

/* 珠宝 01 / 珠托：圆角枕面，月牙托与三粒珠脚形成轮廓。 */
.studio-button-skin.bg-style-heritage-pearl-stud {
  --sample-bg: #e7dfd9; --sample-ink: #685049; --fx-color: #d4b08f;
  --btn-bg: radial-gradient(ellipse at 32% 24%, #fffefa 0 10%, #f7ede6 40%, #d5bfb7 85%, #f9e6d5);
  --btn-ink: #604739; --btn-edge: #c6ac99; --btn-radius: 40%;
  --btn-shadow: inset 0 1px 2px #fff, inset 0 -3px 4px #a68b7754, 0 3px 6px #73513e30;
}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-face::before {
  inset: 4px; border: 1px solid #fff8eaad; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-face::after {
  inset: 45% -1px -2px; border: 2px solid #b89a70; border-top: 0; border-radius: 0 0 17px 17px;
  box-shadow: 0 1px 0 #f7e3b5, inset 0 -1px 0 #fff4d8;
}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-art i:nth-child(1) {
  display: block; bottom: -2px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%;
  background: #f9eacb; box-shadow: -8px -1px 0 #d2b480, 8px -1px 0 #d2b480, 0 1px 1px #8e7045;
}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-play { --btn-radius: 44%; }

/* 珠宝 02 / 金缘：双轨与四角铣切，不靠整面金色表现轻奢。 */
.studio-button-skin.bg-style-heritage-gold-rim {
  --sample-bg: #ede8dc; --sample-ink: #594b30; --fx-color: #c6a25c;
  --btn-bg: #faf5e9; --btn-ink: #66532d; --btn-edge: #b69a5d; --btn-radius: 11px;
  --btn-shadow: inset 0 0 0 2px #f9e7b1, inset 0 0 0 3px #b39656, 0 2px 0 #a18a5c, 0 4px 6px #77623b26;
}
.studio-button-skin.bg-style-heritage-gold-rim .bg-face::before {
  inset: 6px; border: 1px solid #e2d2b0; border-radius: 5px; box-shadow: inset 0 1px 2px #a7936330;
}
.studio-button-skin.bg-style-heritage-gold-rim .bg-face::after {
  inset: 1px; border-radius: 9px;
  background: linear-gradient(135deg, #fffbed 0 6px, transparent 6px) top left,
    linear-gradient(-135deg, #c2a25e 0 6px, transparent 6px) top right,
    linear-gradient(45deg, #b49453 0 6px, transparent 6px) bottom left,
    linear-gradient(-45deg, #fff7d1 0 6px, transparent 6px) bottom right;
  background-size: 9px 9px; background-repeat: no-repeat;
}

/* 珠宝 03 / 祖母绿：切角台阶、侧面折光、中央净台。 */
.studio-button-skin.bg-style-heritage-emerald-cut {
  --sample-bg: #223c33; --sample-ink: #d6e6d4; --fx-color: #78d9ad;
  --btn-bg: conic-gradient(from 45deg, #38896e 0% 25%, #143e35 0% 50%, #639a77 0% 75%, #a0dbc0 0%);
  --btn-ink: #e7fff0; --btn-edge: #9bbc91; --btn-radius: 5px;
  --btn-shadow: inset 0 0 0 1px #b9d9a4;
}
.studio-button-skin.bg-style-heritage-emerald-cut .bg-face {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.studio-button-skin.bg-style-heritage-emerald-cut .bg-face::before {
  inset: 4px; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  background: conic-gradient(from 45deg, #84c9a2 0% 25%, #426c55 0% 50%, #9cdbaf 0% 75%, #386e55 0%);
}
.studio-button-skin.bg-style-heritage-emerald-cut .bg-face::after {
  inset: 8px; border: 1px solid #80b497; border-radius: 3px;
  background: linear-gradient(145deg, #275d4a, #164634); box-shadow: inset 0 1px 1px #bdfbe24d;
}
.studio-button-skin.bg-style-heritage-emerald-cut .bg-play .bg-face::after { inset: 10px; }

/* 珠宝 04 / 微镶：细点镶嵌只落在上下两条轨道。 */
.studio-button-skin.bg-style-heritage-pave-setting {
  --sample-bg: #dce1e2; --sample-ink: #3d4a53; --fx-color: #bacede;
  --btn-bg: linear-gradient(#9cabb5, #e0e8e8 14%, #c7d4d9 84%, #8397a2);
  --btn-ink: #314956; --btn-edge: #7f96a3; --btn-radius: 12px;
  --btn-shadow: inset 0 1px #effbff, 0 3px 0 #6a818e, 0 5px 7px #29495726;
}
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::before,
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::after {
  left: 8px; right: 8px; height: 4px; border-top: 1px solid #b2c6d1; border-bottom: 1px solid #6d83928a;
  background: radial-gradient(circle, #fff 0 .9px, #c4d9e3 1px 1.6px, #688798 1.7px 2px, transparent 2.1px) center / 6px 4px repeat-x;
}
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::before { top: 4px; }
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::after { bottom: 4px; }
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(2) {
  display: block; top: 11px; bottom: 11px; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #f0ffff, #6d8b9d); box-shadow: 1px 0 #6b829057;
}
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(1) { left: 3px; }
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(2) { right: 3px; }

/* 珠宝 05 / 玫瑰结：交叉丝带只绕外缘，束结偏置。 */
.studio-button-skin.bg-style-heritage-rose-knot {
  --sample-bg: #eaded9; --sample-ink: #674542; --fx-color: #dcab98;
  --btn-bg: linear-gradient(145deg, #ffecdc, #dcaa9b 50%, #f5d7bd);
  --btn-ink: #6a3934; --btn-edge: #b78878; --btn-radius: 19px 12px 19px 12px;
  --btn-shadow: inset 0 1px #fff5e7, inset 0 -2px #bd8d7959, 0 3px 0 #ad7c70, 0 5px 7px #713e3e26;
}
.studio-button-skin.bg-style-heritage-rose-knot .bg-face::before {
  inset: 5px 2px; border: 2px solid #b88171; border-radius: 50%; transform: rotate(-28deg);
  box-shadow: 0 1px 0 #fff1d6, inset 0 1px 0 #ffe4c8;
}
.studio-button-skin.bg-style-heritage-rose-knot .bg-face::after {
  inset: 3px 6px; border: 1px solid #fff2d5; border-radius: 50%; transform: rotate(29deg);
  box-shadow: 1px 0 0 #af7763;
}
.studio-button-skin.bg-style-heritage-rose-knot .bg-art i:nth-child(1) {
  display: block; top: 3px; right: 6px; width: 7px; height: 9px; border: 1px solid #b8856d;
  border-radius: 3px; background: linear-gradient(90deg, #b87e6d, #ffe6be, #c58b75); transform: rotate(34deg);
}
.studio-button-skin.bg-style-heritage-rose-knot .bg-text .bg-face::before,
.studio-button-skin.bg-style-heritage-rose-knot .bg-text .bg-face::after { transform: none; border-radius: 18px; }

/* 珠宝 06 / 铂轨：平行硬边、深灰净台、四枚镜面端块。 */
.studio-button-skin.bg-style-heritage-platinum-rail {
  --sample-bg: #282f35; --sample-ink: #d8e2e7; --fx-color: #b1cadb;
  --btn-bg: #364753; --btn-ink: #ebf7ff; --btn-edge: #819aa7; --btn-radius: 7px;
  --btn-shadow: inset 0 0 0 3px #667e8b, inset 0 0 0 4px #263842, 0 3px 0 #182b35, 0 5px 7px #061a2747;
}
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::before,
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::after {
  left: 3px; right: 3px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #dceef5, #7b9baa 30%, #d6eef7 62%, #8aa7b6); box-shadow: 0 1px 0 #f1fdff;
}
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::before { top: 2px; }
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::after { bottom: 3px; }
.studio-button-skin.bg-style-heritage-platinum-rail .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-platinum-rail .bg-art i:nth-child(2) {
  display: block; top: 2px; bottom: 2px; width: 4px;
  background: linear-gradient(#f0fcff 0 7px, transparent 7px calc(100% - 7px), #93b5c6 calc(100% - 7px));
}
.studio-button-skin.bg-style-heritage-platinum-rail .bg-art i:nth-child(1) { left: 2px; }
.studio-button-skin.bg-style-heritage-platinum-rail .bg-art i:nth-child(2) { right: 2px; }

/* 珠宝 07 / 钻冠：六角冠部与放射切面，磨砂顶台承载图标。 */
.studio-button-skin.bg-style-heritage-diamond-crown {
  --sample-bg: #dce3e5; --sample-ink: #46596b; --fx-color: #a5c7e6;
  --btn-bg: conic-gradient(from 30deg, #f9feff 0deg 60deg, #a7bed3 60deg 120deg, #e6f5f9 120deg 180deg, #8eacc7 180deg 240deg, #cddbeb 240deg 300deg, #f9feff 300deg);
  --btn-ink: #31506b; --btn-edge: #8eabc2; --btn-radius: 3px;
  --btn-shadow: inset 0 0 0 1px #f1fbff;
}
.studio-button-skin.bg-style-heritage-diamond-crown .bg-face { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.studio-button-skin.bg-style-heritage-diamond-crown .bg-face::before {
  inset: 5px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: conic-gradient(from 30deg, #9cb9cc 0deg 60deg, #effcff 60deg 120deg, #b3cadd 120deg 180deg, #eaf7ff 180deg 240deg, #a7c2d8 240deg 300deg, #f6ffff 300deg);
}
.studio-button-skin.bg-style-heritage-diamond-crown .bg-face::after {
  inset: 10px; border: 1px solid #9bb4c8; border-radius: 5px;
  background: linear-gradient(135deg, #f2fbff, #d0e0eb); box-shadow: 0 0 0 1px #effbffb3;
}
.studio-button-skin.bg-style-heritage-diamond-crown .bg-text .bg-face { clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.studio-button-skin.bg-style-heritage-diamond-crown .bg-text .bg-face::before { clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
.studio-button-skin.bg-style-heritage-diamond-crown .bg-text .bg-face::after { inset: 8px 13px; }

/* 珠宝 08 / 月石：不对称蛋面与左下银托，游彩不改变图标颜色。 */
.studio-button-skin.bg-style-heritage-moonstone {
  --sample-bg: #313c50; --sample-ink: #d8e5f2; --fx-color: #a4cbe9;
  --btn-bg: radial-gradient(ellipse at 66% 30%, #badffd 0 8%, #d9edf0 30%, transparent 58%), linear-gradient(140deg, #f6ede8, #bac5d4 70%, #ddd9ee);
  --btn-ink: #354e69; --btn-edge: #b1c5d2; --btn-radius: 43% 55% 40% 49% / 38% 46% 54% 59%;
  --btn-shadow: inset 2px 2px 3px #ffffffb3, inset -2px -3px 4px #7d92b357, 0 3px 5px #13223755;
}
.studio-button-skin.bg-style-heritage-moonstone .bg-face::before {
  inset: 4px; border-top: 1px solid #ffffffe0; border-right: 1px solid #e8faff80; border-radius: inherit;
}
.studio-button-skin.bg-style-heritage-moonstone .bg-face::after {
  inset: 4px 6px -1px -1px; border-left: 3px solid #bccbd2; border-bottom: 3px solid #91a9bd;
  border-radius: inherit; box-shadow: -1px 1px 0 #e6f5ff;
}
.studio-button-skin.bg-style-heritage-moonstone .bg-art i:nth-child(1) {
  display: block; top: 4px; right: 10px; width: 9px; height: 4px; border-radius: 50%;
  background: #f8ffffb3; transform: rotate(24deg);
}

/* 珠宝 09 / 漆金：对角包金形成不对称金属护角。 */
.studio-button-skin.bg-style-heritage-lacquer-gilt {
  --sample-bg: #29272b; --sample-ink: #e2cba3; --fx-color: #d2b16c;
  --btn-bg: linear-gradient(145deg, #38383c, #191c21); --btn-ink: #f5dfac; --btn-edge: #8e7546; --btn-radius: 4px 13px 4px 13px;
  --btn-shadow: inset 0 1px #66625c, 0 3px 0 #11161b, 0 5px 6px #0004;
}
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-face::before,
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-face::after {
  width: 14px; height: 14px; background: linear-gradient(135deg, #fae6a9, #ba9455 50%, #f2d69b);
}
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-face::before { top: -1px; left: -1px; border-radius: 4px 0 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-face::after { bottom: -1px; right: -1px; border-radius: 0 0 4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-art i:nth-child(1) {
  display: block; inset: 5px; border: 1px solid #a88c547d; border-radius: 1px 9px 1px 9px;
}
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-art i:nth-child(2) {
  display: block; top: 3px; left: 5px; width: 12px; height: 1px; background: #fae6b4; transform: rotate(-45deg); transform-origin: left;
}

/* 珠宝 10 / 螺钿：三片母贝，接缝位于面板边部。 */
.studio-button-skin.bg-style-heritage-nacre-mosaic {
  --sample-bg: #e2e6df; --sample-ink: #475e5b; --fx-color: #a4cbc4;
  --btn-bg: linear-gradient(116deg, #b4cfcd 0 22%, #f2e7dc 22% 76%, #c7d2e2 76%);
  --btn-ink: #395354; --btn-edge: #98b2ad; --btn-radius: 15px 6px 15px 6px;
  --btn-shadow: inset 0 1px #fffdf0, inset 0 -2px #94b0ad7a, 0 3px 0 #86a5a0, 0 5px 7px #3d615d26;
}
.studio-button-skin.bg-style-heritage-nacre-mosaic .bg-face::before {
  inset: 0; border-radius: inherit;
  background: linear-gradient(116deg, transparent calc(22% - .5px), #779e9c calc(22% - .5px) calc(22% + .5px), transparent calc(22% + .5px) calc(76% - .5px), #9da6ba calc(76% - .5px) calc(76% + .5px), transparent calc(76% + .5px));
}
.studio-button-skin.bg-style-heritage-nacre-mosaic .bg-face::after {
  inset: 4px; border: 1px solid #fffdefb3; border-radius: 11px 3px 11px 3px;
  background: linear-gradient(18deg, #d6eadf30, transparent 42%, #fff1f25c 70%, transparent);
}
.studio-button-skin.bg-style-heritage-nacre-mosaic .bg-art i:nth-child(1) {
  display: block; bottom: 4px; left: 5px; width: 7px; height: 3px; border-radius: 2px;
  background: #e4f4de; transform: rotate(-24deg);
}

/*
 * Original modern collection: 10 cyber / 10 glass / 10 pop.
 * All selectors are gallery + owned modern-card scoped. No sizes, interaction
 * states, stage overrides, motion, external assets or backdrop filters.
 * Decorations stay near the rim; the host owns the centered glyph and fx layer.
 * The prefix-scoped foundation applies only to IDs exported by modern.js.
 */
.studio-button-skin:where(.bg-card[class*="bg-style-modern-"]) .bg-button {
  border-radius: var(--btn-radius);
}
.studio-button-skin:where(.bg-card[class*="bg-style-modern-"]) .bg-face {
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-edge);
  border-radius: inherit;
  box-shadow: var(--btn-shadow);
}
.studio-button-skin:where(.bg-card[class*="bg-style-modern-"]) .bg-art i {
  position: absolute;
  box-sizing: border-box;
}

/* CYBER — facets, rails, brackets, traces, louvers, core, tab, wafer, port, spine. */
.studio-button-skin.bg-style-modern-cyber-chamfer {
  --btn-bg: linear-gradient(145deg, #263b49, #111e2b 68%);
  --btn-ink: #e2ffff;
  --btn-edge: #65c9ce;
  --btn-shadow: inset 0 1px 0 #d2ffff45, inset 0 -3px 0 #040e19;
  --btn-radius: 3px;
  --sample-bg: #101d28;
  --sample-ink: #d3e8ef;
  --fx-color: #65e8df;
}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-face {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-face::before {
  inset: 3px;
  border-top: 1px solid #a1ffeb66;
  border-bottom: 1px solid #5ae7ec52;
  clip-path: inherit;
}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-face::after {
  left: 0; top: 0; width: 12px; height: 12px;
  background: linear-gradient(135deg, transparent 43%, #aaffed 45% 52%, transparent 54%);
}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-art i:nth-child(1) {
  display: block; right: 2px; bottom: 0; width: 7px; height: 2px;
  background: #87ffff; box-shadow: 0 0 5px #45dfe875;
}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-play .bg-face::before {
  border-top-width: 2px;
}

.studio-button-skin.bg-style-modern-cyber-rail {
  --btn-bg: linear-gradient(#192c48, #101c31);
  --btn-ink: #e2f3ff;
  --btn-edge: #385777;
  --btn-shadow: inset 0 1px 0 #a4d9ff25, 0 3px 5px #060e242b;
  --btn-radius: 11px;
  --sample-bg: #17263e;
  --sample-ink: #dbeaff;
  --fx-color: #8acfff;
}
.studio-button-skin.bg-style-modern-cyber-rail .bg-face::before {
  inset: 5px 7px;
  border-top: 1px solid #afdfff55;
  border-bottom: 1px solid #afdfff30;
  border-radius: 4px;
}
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(2) {
  display: block; left: 9px; right: 9px; height: 2px;
  background: linear-gradient(90deg, #b5e7ff, #608aff 64%, #b5e7ff);
  border-radius: 2px; box-shadow: 0 0 4px #89c5ff55;
}
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(1) { top: -2px; }
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(2) { bottom: -2px; }
.studio-button-skin.bg-style-modern-cyber-rail .bg-face::after {
  left: 3px; top: calc(50% - 1px); width: 2px; height: 2px;
  border-radius: 50%; background: #bfebff;
}

.studio-button-skin.bg-style-modern-cyber-bracket {
  --btn-bg: linear-gradient(135deg, #252e40, #1b2332);
  --btn-ink: #f3efff;
  --btn-edge: #635f7c;
  --btn-shadow: inset 0 0 0 3px #141b28, 0 2px 3px #05081822;
  --btn-radius: 5px;
  --sample-bg: #171c2a;
  --sample-ink: #e3dff7;
  --fx-color: #c5b5ff;
}
.studio-button-skin.bg-style-modern-cyber-bracket .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-bracket .bg-art i:nth-child(2) {
  display: block; inset: -2px;
  background: linear-gradient(#cabbff, #cabbff) left top / 9px 2px no-repeat,
    linear-gradient(#cabbff, #cabbff) left top / 2px 9px no-repeat,
    linear-gradient(#cabbff, #cabbff) right bottom / 9px 2px no-repeat,
    linear-gradient(#cabbff, #cabbff) right bottom / 2px 9px no-repeat;
}
.studio-button-skin.bg-style-modern-cyber-bracket .bg-art i:nth-child(2) {
  transform: scaleX(-1); opacity: .55;
}
.studio-button-skin.bg-style-modern-cyber-bracket .bg-face::after {
  bottom: 6px; left: calc(50% - 5px); width: 10px; height: 2px;
  background: #b9a8f6; border-radius: 1px;
}

.studio-button-skin.bg-style-modern-cyber-circuit {
  --btn-bg: linear-gradient(130deg, #1e3936, #142b2a);
  --btn-ink: #e1fff2;
  --btn-edge: #498978;
  --btn-shadow: inset 0 0 0 3px #102823, inset 0 0 0 4px #376c5d;
  --btn-radius: 12px;
  --sample-bg: #132b27;
  --sample-ink: #cff5e4;
  --fx-color: #9af4c0;
}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-face::before {
  top: 5px; left: 7px; width: 9px; height: 5px;
  border-left: 1px solid #afffc5; border-bottom: 1px solid #afffc5;
  border-radius: 0 0 0 3px;
}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-face::after {
  right: 6px; bottom: 6px; width: 7px; height: 8px;
  border-right: 1px solid #9be4be; border-top: 1px solid #9be4be;
  border-radius: 0 3px 0 0;
}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-art i:nth-child(1) {
  display: block; top: -1px; right: 10px; width: 3px; height: 3px;
  border-radius: 50%; background: #c9ffd6;
  box-shadow: -5px 0 0 #78c39b, -10px 0 0 #508c73;
}

.studio-button-skin.bg-style-modern-cyber-louver {
  --btn-bg: linear-gradient(90deg, #171f2a, #283547 50%, #171f2a);
  --btn-ink: #f1f8ff;
  --btn-edge: #64788e;
  --btn-shadow: inset 0 2px 0 #9fbed133, inset 0 -3px 0 #101722;
  --btn-radius: 10px;
  --sample-bg: #1a2531;
  --sample-ink: #e0e9f3;
  --fx-color: #b4dfff;
}
.studio-button-skin.bg-style-modern-cyber-louver .bg-face::before,
.studio-button-skin.bg-style-modern-cyber-louver .bg-face::after {
  top: 12px; bottom: 12px; width: 4px;
  background: repeating-linear-gradient(0deg, #94c9ea 0 1px, transparent 1px 4px);
}
.studio-button-skin.bg-style-modern-cyber-louver .bg-face::before { left: 4px; }
.studio-button-skin.bg-style-modern-cyber-louver .bg-face::after { right: 4px; }
.studio-button-skin.bg-style-modern-cyber-louver .bg-art i:nth-child(1) {
  display: block; bottom: -1px; left: 14px; right: 14px; height: 2px;
  background: #8ed5ff; border-radius: 2px;
}

.studio-button-skin.bg-style-modern-cyber-reactor {
  --btn-bg: radial-gradient(circle, #253a42 0 55%, #111e25 57% 70%, #3c6870 72%);
  --btn-ink: #ddfff2;
  --btn-edge: #658b8b;
  --btn-shadow: inset 0 1px 2px #cefff14d, 0 3px 6px #00192333;
  --btn-radius: 50%;
  --sample-bg: #122c33;
  --sample-ink: #d7f4ee;
  --fx-color: #a6fada;
}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-face::before {
  inset: 5px; border: 1px dashed #a2f2d48c; border-radius: inherit;
}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-face::after {
  inset: 8px; border: 1px solid #749e925c; border-radius: inherit;
}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-reactor .bg-art i:nth-child(2) {
  display: block; left: calc(50% - 4px); width: 8px; height: 3px;
  background: #b8ffe1; border-radius: 3px;
}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-art i:nth-child(1) { top: -1px; }
.studio-button-skin.bg-style-modern-cyber-reactor .bg-art i:nth-child(2) { bottom: -1px; }
.studio-button-skin.bg-style-modern-cyber-reactor .bg-text { border-radius: 22px; }
.studio-button-skin.bg-style-modern-cyber-reactor .bg-text .bg-face {
  background: linear-gradient(#253a42, #172a32);
}

.studio-button-skin.bg-style-modern-cyber-tab {
  --btn-bg: linear-gradient(150deg, #343445, #242334);
  --btn-ink: #f8f4ff;
  --btn-edge: #888199;
  --btn-shadow: inset 0 1px 0 #f5edff29, 0 3px 0 #141426;
  --btn-radius: 5px 15px 5px 15px;
  --sample-bg: #262533;
  --sample-ink: #eee6f5;
  --fx-color: #e4ec9c;
}
.studio-button-skin.bg-style-modern-cyber-tab .bg-art i:nth-child(1) {
  display: block; top: -3px; left: 10px; width: 14px; height: 6px;
  border-radius: 3px 3px 0 0; background: #e0e997;
  border-top: 1px solid #ffffd2;
}
.studio-button-skin.bg-style-modern-cyber-tab .bg-face::before {
  left: 7px; right: 11px; top: 5px; height: 1px; background: #d6d0e04f;
}
.studio-button-skin.bg-style-modern-cyber-tab .bg-face::after {
  right: 8px; bottom: 5px; width: 10px; height: 3px;
  background: repeating-linear-gradient(90deg, #dbe98a 0 2px, transparent 2px 4px);
}

.studio-button-skin.bg-style-modern-cyber-wafer {
  --btn-bg: linear-gradient(145deg, #293d53, #162334 62%);
  --btn-ink: #edfbff;
  --btn-edge: #8bbed8;
  --btn-shadow: inset 1px 1px 0 #d4faff3b, 0 2px 2px #07162755;
  --btn-radius: 9px;
  --sample-bg: #142538;
  --sample-ink: #dfecf7;
  --fx-color: #a0d3ed;
}
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(2) {
  display: block; inset: 0; border: 1px solid #76a3c2; border-radius: 9px;
  background: #253f58;
}
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(1) {
  transform: translate(2px, 4px); border-color: #5b6baf; background: #233153;
}
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(2) { transform: translate(-2px, 2px); }
.studio-button-skin.bg-style-modern-cyber-wafer .bg-face::after {
  inset: 4px; border-top: 1px solid #e2faff5e; border-left: 1px solid #e2faff26;
  border-radius: 5px;
}

.studio-button-skin.bg-style-modern-cyber-port {
  --btn-bg: linear-gradient(140deg, #b9c8e0, #435775 30%, #213148 66%, #a2c6d5);
  --btn-ink: #f0faff;
  --btn-edge: transparent;
  --btn-shadow: inset 0 0 0 1px #95afcc;
  --btn-radius: 0;
  --sample-bg: #1c2a3b;
  --sample-ink: #e0eafa;
  --fx-color: #bcddff;
}
.studio-button-skin.bg-style-modern-cyber-port .bg-face {
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
}
.studio-button-skin.bg-style-modern-cyber-port .bg-face::before {
  inset: 4px; background: #1b2c41; clip-path: inherit;
}
.studio-button-skin.bg-style-modern-cyber-port .bg-face::after {
  inset: 7px; border-top: 2px solid #c4e8ff; border-bottom: 2px solid #648bbc;
  clip-path: inherit;
}
.studio-button-skin.bg-style-modern-cyber-port .bg-text .bg-face {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.studio-button-skin.bg-style-modern-cyber-spine {
  --btn-bg: linear-gradient(90deg, #193032, #294244 50%, #193032);
  --btn-ink: #eefff8;
  --btn-edge: #567b74;
  --btn-shadow: inset 3px 0 3px #0e1f27, inset -3px 0 3px #0e1f27;
  --btn-radius: 21px 21px 15px 15px;
  --sample-bg: #1a2e31;
  --sample-ink: #e0f3e9;
  --fx-color: #d1f5ad;
}
.studio-button-skin.bg-style-modern-cyber-spine .bg-face::before {
  inset: 5px 7px; border-left: 1px solid #d1f5ad8c; border-right: 1px solid #d1f5ad8c;
  border-radius: 18px;
}
.studio-button-skin.bg-style-modern-cyber-spine .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-spine .bg-art i:nth-child(2) {
  display: block; top: 14px; bottom: 14px; width: 2px;
  background: #d5ffb5; border-radius: 4px;
}
.studio-button-skin.bg-style-modern-cyber-spine .bg-art i:nth-child(1) { left: -2px; }
.studio-button-skin.bg-style-modern-cyber-spine .bg-art i:nth-child(2) { right: -2px; }
.studio-button-skin.bg-style-modern-cyber-spine .bg-face::after {
  bottom: 6px; left: calc(50% - 2px); width: 4px; height: 2px;
  border-radius: 1px; background: #d5ffb5;
}

/* GLASS — optical edges use local color layers; glyph contrast is stage-independent. */
.studio-button-skin.bg-style-modern-glass-prism {
  --btn-bg: linear-gradient(135deg, #f8ffff, #cae3f4 44%, #effbff 73%, #9dc2df);
  --btn-ink: #213e58;
  --btn-edge: #729ebd;
  --btn-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 #739abc50;
  --btn-radius: 3px;
  --sample-bg: #d3e2ee;
  --sample-ink: #2d455b;
  --fx-color: #558fb6;
}
.studio-button-skin.bg-style-modern-glass-prism .bg-face {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.studio-button-skin.bg-style-modern-glass-prism .bg-face::before {
  inset: 4px; border-top: 2px solid #fff; border-left: 2px solid #ffffffb3;
  border-right: 2px solid #548aa452; border-bottom: 2px solid #548aa42e;
  clip-path: inherit;
}
.studio-button-skin.bg-style-modern-glass-prism .bg-face::after {
  inset: 7px; border: 1px solid #ffffff70; clip-path: inherit;
}
.studio-button-skin.bg-style-modern-glass-prism .bg-art i:nth-child(1) {
  display: block; left: 12px; right: 8px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #aac8e7, #e2ffff, #99b2d9);
}

.studio-button-skin.bg-style-modern-glass-ice {
  --btn-bg: linear-gradient(155deg, #f1ffff, #c8e7ef 56%, #9ec6de);
  --btn-ink: #19445a;
  --btn-edge: #88b5c9;
  --btn-shadow: inset 3px 3px 0 #ffffffb3, inset -3px -4px 0 #74abc044, 0 4px 0 #74a0b5;
  --btn-radius: 9px;
  --sample-bg: #d8edf2;
  --sample-ink: #284e62;
  --fx-color: #639cb7;
}
.studio-button-skin.bg-style-modern-glass-ice .bg-face::before {
  inset: 5px; border: 1px solid #ffffff9c; border-radius: 4px;
  box-shadow: 1px 1px 0 #78aabe38;
}
.studio-button-skin.bg-style-modern-glass-ice .bg-face::after {
  top: 7px; left: 8px; width: 4px; height: 4px; border-radius: 50%;
  border: 1px solid #ffffffde; box-shadow: 25px 29px 0 -1px #fff9;
}
.studio-button-skin.bg-style-modern-glass-ice .bg-play .bg-face::after {
  box-shadow: 36px 40px 0 -1px #fff9;
}

.studio-button-skin.bg-style-modern-glass-drop {
  --btn-bg: radial-gradient(ellipse at 32% 22%, #f7ffff, #c2e9e7 57%, #88bebb 89%);
  --btn-ink: #194945;
  --btn-edge: #79aaa8;
  --btn-shadow: inset 2px 2px 3px #fff9, inset -2px -3px 3px #4c939454, 0 3px 5px #426b7033;
  --btn-radius: 48% 48% 48% 16%;
  --sample-bg: #d1e6df;
  --sample-ink: #284e48;
  --fx-color: #458f8a;
}
.studio-button-skin.bg-style-modern-glass-drop .bg-face::before {
  top: 5px; left: 8px; width: 15px; height: 8px;
  border-top: 3px solid #ffffffe6; border-radius: 50%; transform: rotate(-24deg);
}
.studio-button-skin.bg-style-modern-glass-drop .bg-face::after {
  left: 9px; right: 6px; bottom: 4px; height: 11px;
  border-bottom: 2px solid #e5ffffb3; border-radius: 0 0 50% 50%;
}
.studio-button-skin.bg-style-modern-glass-drop .bg-text { border-radius: 22px 22px 22px 8px; }

.studio-button-skin.bg-style-modern-glass-fog {
  --btn-bg: linear-gradient(145deg, #f3f5f4, #dae4e3 76%);
  --btn-ink: #384d51;
  --btn-edge: #9cb0b5;
  --btn-shadow: inset 0 0 0 1px #ffffffd9, 0 3px 7px #49647726;
  --btn-radius: 15px;
  --sample-bg: #c8d6da;
  --sample-ink: #354a50;
  --fx-color: #6c909b;
}
.studio-button-skin.bg-style-modern-glass-fog .bg-face::before {
  left: 7px; right: 7px; top: 4px; height: 6px; border-radius: 9px 9px 4px 4px;
  background: linear-gradient(#ffffffb3, #ffffff17);
}
.studio-button-skin.bg-style-modern-glass-fog .bg-face::after {
  inset: 3px; border: 1px solid #9aaeb51f; border-radius: 12px;
}
.studio-button-skin.bg-style-modern-glass-fog .bg-art i:nth-child(1) {
  display: block; left: 12px; right: 12px; bottom: -1px; height: 1px;
  background: #f8ffff;
}

.studio-button-skin.bg-style-modern-glass-mirror {
  --btn-bg: linear-gradient(140deg, #56677a, #35465a 42%, #233247 67%, #42556a);
  --btn-ink: #f5fcff;
  --btn-edge: #b5cbd8;
  --btn-shadow: inset 1px 1px 0 #f0ffffab, inset -1px -1px 0 #0b1c2d, 0 3px 5px #1f36462e;
  --btn-radius: 13px;
  --sample-bg: #b7c8d1;
  --sample-ink: #263d52;
  --fx-color: #c0e4ff;
}
.studio-button-skin.bg-style-modern-glass-mirror .bg-face::before {
  inset: 3px; border: 1px solid #ffffff45; border-radius: 10px;
}
.studio-button-skin.bg-style-modern-glass-mirror .bg-face::after {
  top: 6px; bottom: 6px; left: 5px; width: 4px; border-radius: 4px;
  background: linear-gradient(#ffffffe0, #c7e1ed17 39%, #c7e1ed17 65%, #eaffff99);
}
.studio-button-skin.bg-style-modern-glass-mirror .bg-play .bg-face {
  box-shadow: var(--btn-shadow), 0 0 0 1px #4b667d;
}

.studio-button-skin.bg-style-modern-glass-lens {
  --btn-bg: radial-gradient(circle at 38% 34%, #f6fdff 0, #d4e8f4 47%, #8aafc7 77%, #d6edf9 96%);
  --btn-ink: #26445c;
  --btn-edge: #779aaf;
  --btn-shadow: inset 1px 2px 2px #ffffffd9, inset -1px -2px 2px #608ba366, 0 3px 6px #43647a33;
  --btn-radius: 50%;
  --sample-bg: #c5d6e4;
  --sample-ink: #2d465b;
  --fx-color: #608dac;
}
.studio-button-skin.bg-style-modern-glass-lens .bg-face::before {
  inset: 4px; border: 1px solid #ffffffb3; border-radius: inherit;
  box-shadow: 0 0 0 1px #517a8c29;
}
.studio-button-skin.bg-style-modern-glass-lens .bg-face::after {
  inset: 8px 7px 3px; border-bottom: 3px solid #eaffffc7; border-radius: inherit;
}
.studio-button-skin.bg-style-modern-glass-lens .bg-text { border-radius: 22px; }

.studio-button-skin.bg-style-modern-glass-ampoule {
  --btn-bg: linear-gradient(#f2f8e7, #e0e9c9 52%, #c3ceab 84%, #e7eddb);
  --btn-ink: #3c4e2d;
  --btn-edge: #9daa88;
  --btn-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #8298644a, 0 2px 4px #57664321;
  --btn-radius: 24px;
  --sample-bg: #dce3ce;
  --sample-ink: #455239;
  --fx-color: #839860;
}
.studio-button-skin.bg-style-modern-glass-ampoule .bg-face::before {
  left: 11px; right: 11px; top: 5px; height: 4px;
  background: #ffffffb3; border-radius: 50%;
}
.studio-button-skin.bg-style-modern-glass-ampoule .bg-face::after {
  inset: 8px 4px; border-left: 3px double #7f936b80;
  border-right: 3px double #7f936b80; border-radius: 15px;
}
.studio-button-skin.bg-style-modern-glass-ampoule .bg-play .bg-face::before { height: 5px; }

.studio-button-skin.bg-style-modern-glass-slide {
  --btn-bg: linear-gradient(135deg, #e8f7f4, #c7e1de 74%);
  --btn-ink: #2a4c4c;
  --btn-edge: #8eafab;
  --btn-shadow: inset 1px 1px 0 #ffffffc7, inset -1px -1px 0 #a1c4bd;
  --btn-radius: 5px;
  --sample-bg: #c8d9d4;
  --sample-ink: #324e48;
  --fx-color: #719d96;
}
.studio-button-skin.bg-style-modern-glass-slide .bg-art i:nth-child(1) {
  display: block; inset: 0; transform: translate(2px, 3px);
  border: 1px solid #8fafaa; border-radius: 5px; background: #e6f5ed66;
}
.studio-button-skin.bg-style-modern-glass-slide .bg-face::before {
  top: 4px; left: 4px; width: 3px; height: 3px; border-radius: 50%;
  background: #9aafae; box-shadow: inset 0 1px 0 #fff;
}
.studio-button-skin.bg-style-modern-glass-slide .bg-face::after {
  bottom: 4px; right: 4px; width: 3px; height: 3px; border-radius: 50%;
  background: #9aafae; box-shadow: inset 0 1px 0 #fff;
}

.studio-button-skin.bg-style-modern-glass-opal {
  --btn-bg: radial-gradient(ellipse at 25% 8%, #fffcf6, #edf2f3 50%, #dfe8f2);
  --btn-ink: #3b435e;
  --btn-edge: #a9adcf;
  --btn-shadow: inset 3px 0 3px #9bddde85, inset -3px 0 3px #eab7d885, inset 0 -3px 3px #bec4f394, 0 3px 6px #53607f21;
  --btn-radius: 18px 12px 18px 12px;
  --sample-bg: #dce1ee;
  --sample-ink: #424b67;
  --fx-color: #a695c9;
}
.studio-button-skin.bg-style-modern-glass-opal .bg-face::before {
  inset: 4px; border: 1px solid #ffffffde; border-radius: 14px 8px 14px 8px;
  box-shadow: inset 0 1px 2px #a6b0c42e;
}
.studio-button-skin.bg-style-modern-glass-opal .bg-face::after {
  left: 12px; right: 10px; bottom: 4px; height: 3px; border-radius: 50%;
  background: linear-gradient(90deg, #a6dde9, #f2d7ef, #ffffdc);
}

.studio-button-skin.bg-style-modern-glass-meniscus {
  --btn-bg: linear-gradient(#eefbfa, #c8e6e6 58%, #add4d8 85%, #e0ffff);
  --btn-ink: #28505b;
  --btn-edge: #7facb7;
  --btn-shadow: inset 2px 2px 3px #ffffffb3, inset -2px -2px 3px #588fa45c, 0 3px 5px #466c7e26;
  --btn-radius: 17px;
  --sample-bg: #c8dde1;
  --sample-ink: #355663;
  --fx-color: #599eac;
}
.studio-button-skin.bg-style-modern-glass-meniscus .bg-face::before {
  top: 4px; left: 6px; right: 6px; height: 7px;
  border-bottom: 1px solid #75adbb; border-top: 2px solid #ffffffc7;
  border-radius: 50%; background: #ffffff26;
}
.studio-button-skin.bg-style-modern-glass-meniscus .bg-face::after {
  inset: 8px 4px 4px; border-left: 1px solid #ffffffa6;
  border-right: 1px solid #ffffff66; border-bottom: 2px solid #e9ffff;
  border-radius: 12px;
}

/* POP — color supports ten distinct constructions, never substitutes for them. */
.studio-button-skin.bg-style-modern-pop-cutblock {
  --btn-bg: linear-gradient(135deg, #315bdd 0 19%, #fff2d8 19% 79%, #f47951 79%);
  --btn-ink: #263858;
  --btn-edge: #243852;
  --btn-shadow: inset 0 1px 0 #ffffff85, 0 2px 0 #243852;
  --btn-radius: 12px 4px 12px 4px;
  --sample-bg: #e8e3d7;
  --sample-ink: #334056;
  --fx-color: #4265d4;
}
.studio-button-skin.bg-style-modern-pop-cutblock .bg-face::before {
  top: 4px; left: 4px; width: 7px; height: 7px;
  border-top: 1px solid #cedbff; border-left: 1px solid #cedbff;
  border-radius: 5px 0 0 0;
}
.studio-button-skin.bg-style-modern-pop-cutblock .bg-face::after {
  bottom: 4px; right: 4px; width: 5px; height: 2px;
  background: #723e2e; transform: rotate(-45deg);
}
.studio-button-skin.bg-style-modern-pop-cutblock .bg-text .bg-face {
  background: linear-gradient(135deg, #315bdd 0 12%, #fff2d8 12% 87%, #f47951 87%);
}

.studio-button-skin.bg-style-modern-pop-offset {
  --btn-bg: #ffda68;
  --btn-ink: #22334b;
  --btn-edge: #273954;
  --btn-shadow: 3px 4px 0 #273954, inset 0 2px 0 #fff0b2;
  --btn-radius: 9px;
  --sample-bg: #f2e9d8;
  --sample-ink: #343e50;
  --fx-color: #a06b2c;
}
.studio-button-skin.bg-style-modern-pop-offset .bg-face { border-width: 2px; }
.studio-button-skin.bg-style-modern-pop-offset .bg-face::after {
  top: 5px; left: 7px; width: 9px; height: 2px; border-radius: 2px;
  background: #fff5ce;
}
.studio-button-skin.bg-style-modern-pop-offset .bg-play .bg-face {
  box-shadow: 4px 5px 0 #273954, inset 0 2px 0 #fff0b2;
}

.studio-button-skin.bg-style-modern-pop-ticket {
  --btn-bg: linear-gradient(90deg, #c8d8ff 0 9px, #fff8e9 9px);
  --btn-ink: #2b4366;
  --btn-edge: #718bac;
  --btn-shadow: inset 0 2px 0 #ffffffcc, inset 0 -2px 0 #bdcce355;
  --btn-radius: 5px;
  --sample-bg: #dce3ef;
  --sample-ink: #364a67;
  --fx-color: #7292c3;
}
.studio-button-skin.bg-style-modern-pop-ticket .bg-face {
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
}
.studio-button-skin.bg-style-modern-pop-ticket .bg-face::before {
  top: 5px; bottom: 5px; left: 9px; border-left: 1px dashed #59749e;
}
.studio-button-skin.bg-style-modern-pop-ticket .bg-face::after {
  right: 6px; bottom: 5px; width: 10px; height: 3px;
  background: repeating-linear-gradient(90deg, #5b7195 0 1px, transparent 1px 3px);
}

.studio-button-skin.bg-style-modern-pop-sticker {
  --btn-bg: #ffd0bd;
  --btn-ink: #653e40;
  --btn-edge: #fffaf2;
  --btn-shadow: 0 0 0 1px #bd9d91, 1px 3px 3px #684c3f2e;
  --btn-radius: 15px 10px 15px 15px;
  --sample-bg: #f0e4d9;
  --sample-ink: #644c44;
  --fx-color: #b76b52;
}
.studio-button-skin.bg-style-modern-pop-sticker .bg-face { border-width: 3px; }
.studio-button-skin.bg-style-modern-pop-sticker .bg-face::before {
  top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 0 5px 0 4px;
  background: linear-gradient(45deg, #fef5e7 0 48%, #a78c7d 49% 53%, #e3ceba 54%);
  box-shadow: -1px 1px 1px #835b4233;
}
.studio-button-skin.bg-style-modern-pop-sticker .bg-face::after {
  inset: 3px; border-left: 1px solid #fff5e885; border-bottom: 1px solid #fff5e885;
  border-radius: 9px;
}

.studio-button-skin.bg-style-modern-pop-paint {
  --btn-bg: #f8f0db;
  --btn-ink: #353d4e;
  --btn-edge: #5a626c;
  --btn-shadow: inset 0 1px 0 #fff, 0 2px 0 #bbc4b5;
  --btn-radius: 8px 17px 8px 17px;
  --sample-bg: #e4e8db;
  --sample-ink: #424c48;
  --fx-color: #71998e;
}
.studio-button-skin.bg-style-modern-pop-paint .bg-face::before {
  inset: 3px;
  background: linear-gradient(115deg, #317d6f 0 14%, transparent 14% 83%, #e98c5b 83%);
  border-radius: 5px 14px 5px 14px;
}
.studio-button-skin.bg-style-modern-pop-paint .bg-face::after {
  left: 11px; bottom: 4px; width: 3px; height: 3px; border-radius: 50%;
  background: #317d6f; box-shadow: 5px 1px 0 -1px #317d6f, 10px 0 0 -1px #317d6f;
}
.studio-button-skin.bg-style-modern-pop-paint .bg-text .bg-face::before {
  background: linear-gradient(115deg, #317d6f 0 9%, transparent 9% 91%, #e98c5b 91%);
}

.studio-button-skin.bg-style-modern-pop-pixel {
  --btn-bg: #c4efd0;
  --btn-ink: #3c385f;
  --btn-edge: transparent;
  --btn-shadow: inset 0 3px 0 #f0ffe9, inset 3px 0 0 #e5ffdf, inset 0 -3px 0 #81b89d;
  --btn-radius: 0;
  --sample-bg: #e8e3f1;
  --sample-ink: #504669;
  --fx-color: #9d83c6;
}
.studio-button-skin.bg-style-modern-pop-pixel .bg-face,
.studio-button-skin.bg-style-modern-pop-pixel .bg-art i:nth-child(1) {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px);
}
.studio-button-skin.bg-style-modern-pop-pixel .bg-art i:nth-child(1) {
  display: block; inset: 0; transform: translate(3px, 3px); background: #8672b5;
}
.studio-button-skin.bg-style-modern-pop-pixel .bg-face::after {
  top: 5px; right: 8px; width: 3px; height: 3px; background: #6b639d;
}

.studio-button-skin.bg-style-modern-pop-wave {
  --btn-bg: #fff2d5;
  --btn-ink: #284f70;
  --btn-edge: #627f99;
  --btn-shadow: inset 0 1px 0 #fff, 0 3px 0 #7babc4;
  --btn-radius: 44% 40% 43% 35%;
  --sample-bg: #d8e8ed;
  --sample-ink: #36556c;
  --fx-color: #7099c9;
}
.studio-button-skin.bg-style-modern-pop-wave .bg-face::before {
  inset: 3px; border-bottom: 3px solid #3679b6; border-left: 2px solid #3679b6;
  border-radius: 44% 40% 43% 35%;
}
.studio-button-skin.bg-style-modern-pop-wave .bg-face::after {
  inset: 6px; border-bottom: 1px solid #63add2; border-radius: 44% 40% 43% 35%;
}
.studio-button-skin.bg-style-modern-pop-wave .bg-art i:nth-child(1) {
  display: block; top: 0; right: 7px; width: 5px; height: 5px;
  border: 1px solid #9a5446; background: #e88968; border-radius: 50%;
}
.studio-button-skin.bg-style-modern-pop-wave .bg-text { border-radius: 22px 19px 22px 16px; }

.studio-button-skin.bg-style-modern-pop-tongue {
  --btn-bg: #e8eedb;
  --btn-ink: #304b4a;
  --btn-edge: #3e6160;
  --btn-shadow: inset 0 0 0 2px #779b91, 0 3px 0 #355657;
  --btn-radius: 19px 19px 8px 8px;
  --sample-bg: #dce4dd;
  --sample-ink: #3b5450;
  --fx-color: #7a9c79;
}
.studio-button-skin.bg-style-modern-pop-tongue .bg-face::before {
  inset: 5px; border: 1px dashed #55766f94; border-radius: 14px 14px 4px 4px;
}
.studio-button-skin.bg-style-modern-pop-tongue .bg-face::after {
  top: 5px; left: calc(50% - 8px); width: 16px; height: 5px;
  background: linear-gradient(20deg, transparent 36%, #fef9de 40% 59%, transparent 63%),
    linear-gradient(-20deg, transparent 36%, #3e6160 40% 59%, transparent 63%);
}
.studio-button-skin.bg-style-modern-pop-tongue .bg-art i:nth-child(1) {
  display: block; bottom: -2px; right: 7px; width: 9px; height: 4px;
  border-radius: 0 0 2px 2px; background: #e79855; border: 1px solid #8e673e;
}

.studio-button-skin.bg-style-modern-pop-duoring {
  --btn-bg: linear-gradient(#fff6e5, #fff6e5) padding-box,
    conic-gradient(from -35deg, #326bc0 0 50%, #e39b57 50% 100%) border-box;
  --btn-ink: #284564;
  --btn-edge: transparent;
  --btn-shadow: 0 2px 0 #36547a, inset 0 0 0 1px #fff;
  --btn-radius: 50%;
  --sample-bg: #e0e6e9;
  --sample-ink: #3a5067;
  --fx-color: #779bcd;
}
.studio-button-skin.bg-style-modern-pop-duoring .bg-face { border-width: 4px; }
.studio-button-skin.bg-style-modern-pop-duoring .bg-face::before {
  inset: 2px; border: 1px solid #b8b7aa; border-radius: inherit;
}
.studio-button-skin.bg-style-modern-pop-duoring .bg-art i:nth-child(1) {
  display: block; top: calc(50% - 2px); right: -1px; width: 4px; height: 4px;
  border-radius: 50%; border: 1px solid #617887; background: #f8edd3;
}
.studio-button-skin.bg-style-modern-pop-duoring .bg-text { border-radius: 22px; }

.studio-button-skin.bg-style-modern-pop-punch {
  --btn-bg: linear-gradient(90deg, #f2d17f 0 8px, #2e4053 8px);
  --btn-ink: #fff5da;
  --btn-edge: #233546;
  --btn-shadow: inset 0 1px 0 #ffffff47, 0 2px 0 #8a9c9f;
  --btn-radius: 6px;
  --sample-bg: #dde2de;
  --sample-ink: #384d55;
  --fx-color: #f2d17f;
}
.studio-button-skin.bg-style-modern-pop-punch .bg-face::before {
  top: 5px; bottom: 5px; left: 2px; width: 4px;
  background: radial-gradient(circle, #334751 0 1.5px, transparent 1.8px) center top / 4px 7px repeat-y;
}
.studio-button-skin.bg-style-modern-pop-punch .bg-face::after {
  inset: 4px 4px 4px 11px; border: 1px solid #d7e1dc52; border-radius: 2px;
}
.studio-button-skin.bg-style-modern-pop-punch .bg-art i:nth-child(1) {
  display: block; top: -1px; right: 6px; width: 3px; height: 3px;
  border: 1px solid #697f86; border-radius: 50%; background: #f0e1b4;
}

/* Original mobile control materials. The icon and hit area stay fixed. */
.studio-button-skin.bg-style-graphite-disc { --sample-bg:#e9edf0; --sample-ink:#293340; --btn-radius:50%; --btn-bg:#303a44; --btn-ink:#f5f8fc; --btn-edge:#303a44; --btn-shadow:inset 0 1px 0 #78828c; --fx-color:#8cbbeb; }
.studio-button-skin.bg-style-graphite-disc .bg-face::before { inset:5px; border:1px solid #8a97a633; border-radius:inherit; }
.studio-button-skin.bg-style-graphite-disc .bg-text { border-radius:24px; }
.studio-button-skin.bg-style-folio-outline { --sample-bg:#f6f7fa; --sample-ink:#263b51; --btn-bg:#ffffff; --btn-edge:#7d8f9f; --btn-ink:#294052; --btn-radius:10px; --fx-color:#5b96b2; }
.studio-button-skin.bg-style-folio-outline .bg-face::before { inset:4px; border-top:1px solid #d7e0e5; border-bottom:1px solid #d7e0e5; border-radius:6px; }
.studio-button-skin.bg-style-folio-outline .bg-play .bg-face { background:#2e485a; color:#f7fbff; border-color:#2e485a; }
.studio-button-skin.bg-style-navy-inlay { --sample-bg:#e7eaf0; --sample-ink:#27364d; --btn-bg:linear-gradient(150deg,#243954,#172840); --btn-ink:#ecf2fa; --btn-edge:#16243b; --btn-radius:9px; --fx-color:#a8d1ff; }
.studio-button-skin.bg-style-navy-inlay .bg-face::before { inset:5px; border:1px solid #9bafcb65; border-radius:4px; }
.studio-button-skin.bg-style-navy-inlay .bg-face::after { left:10px; right:10px; top:0; height:2px; background:linear-gradient(90deg,transparent,#e0eaf6,transparent); }
.studio-button-skin.bg-style-satin-steel { --sample-bg:#dfe4e8; --sample-ink:#303c48; --btn-bg:linear-gradient(175deg,#fcfdff,#c3ccd3 53%,#eff4f8); --btn-ink:#354354; --btn-edge:#a7b5bf; --btn-radius:12px; --btn-shadow:inset 0 1px 0 white,0 2px 0 #919fa9; --fx-color:#5094cb; }
.studio-button-skin.bg-style-satin-steel .bg-face::before { inset:4px; border-top:1px solid #fff; border-bottom:1px solid #9eaab655; border-radius:8px; }
.studio-button-skin.bg-style-satin-steel .bg-face::after { inset:2px 18% auto; height:1px; background:#b3c0ca; }
.studio-button-skin.bg-style-split-console { --sample-bg:#e3e8ee; --sample-ink:#283749; --btn-bg:linear-gradient(#435369 0 65%,#303d50 65%); --btn-ink:#f2f7fe; --btn-edge:#233447; --btn-radius:8px; --btn-shadow:inset 0 1px 0 #8293a6; --fx-color:#90cce0; }
.studio-button-skin.bg-style-split-console .bg-face::after { width:12px; height:2px; bottom:5px; left:calc(50% - 6px); border-radius:2px; background:#83c8cf; }
.studio-button-skin.bg-style-split-console .bg-text .bg-face::after { left:8px; bottom:7px; width:3px; height:3px; }
.studio-button-skin.bg-style-recessed-key { --sample-bg:#282f37; --sample-ink:#e4ebf2; --btn-bg:#353f49; --btn-ink:#e6eef7; --btn-edge:#202831; --btn-radius:50%; --btn-shadow:0 1px 0 #61707d,inset 0 2px 4px #111a23; --fx-color:#a0c6e3; }
.studio-button-skin.bg-style-recessed-key .bg-face::before { inset:6px; border-radius:inherit; background:linear-gradient(145deg,#4c5865,#343f4a); box-shadow:0 1px 3px #152333,inset 0 1px 0 #677788; }
.studio-button-skin.bg-style-recessed-key .bg-text { border-radius:25px; }
.studio-button-skin.bg-style-editorial-tab { --sample-bg:#e9edea; --sample-ink:#30443b; --btn-bg:#fafffa; --btn-ink:#315e4b; --btn-edge:#859b8c; --btn-radius:3px 12px 3px 3px; --btn-shadow:2px 3px 0 #aec2b3; --fx-color:#6ca586; }
.studio-button-skin.bg-style-editorial-tab .bg-face::before { right:0; top:0; width:10px; height:10px; border-radius:0 10px 0 0; background:linear-gradient(45deg,#c7d7cc 48%,#eff6f0 50%); }
.studio-button-skin.bg-style-editorial-tab .bg-face::after { left:9px; right:9px; bottom:5px; height:1px; background:#b6cbbd; }
.studio-button-skin.bg-style-architect-frame { --sample-bg:#e8ecf1; --sample-ink:#223c58; --btn-bg:#ebf0f8; --btn-ink:#214b75; --btn-edge:transparent; --btn-radius:4px; --fx-color:#558cc1; }
.studio-button-skin.bg-style-architect-frame .bg-face::before { inset:0; border:1px solid #50749b; clip-path:polygon(0 0,30% 0,30% 6%,6% 6%,6% 30%,0 30%,0 0,100% 0,100% 30%,94% 30%,94% 6%,70% 6%,70% 0,100% 0,100% 100%,70% 100%,70% 94%,94% 94%,94% 70%,100% 70%,100% 100%,0 100%,0 70%,6% 70%,6% 94%,30% 94%,30% 100%,0 100%); }
.studio-button-skin.bg-style-architect-frame .bg-play .bg-face { background:#315679; color:#f4f8ff; }
.studio-button-skin.bg-style-architect-frame .bg-play .bg-face::before { inset:5px; border-color:#b9d0e5; }
.studio-button-skin.bg-style-signal-dial { --sample-bg:#dce4e7; --sample-ink:#263d49; --btn-bg:repeating-conic-gradient(from 0deg,#526776 0deg 1deg,#ced8de 1deg 30deg); --btn-ink:#244254; --btn-edge:#82959f; --btn-radius:50%; --fx-color:#4e96a5; }
.studio-button-skin.bg-style-signal-dial .bg-face::before { inset:6px; border-radius:inherit; background:linear-gradient(135deg,#f6fcff,#c2d2db); box-shadow:inset 0 1px 0 #fff,0 1px 2px #68828f; }
.studio-button-skin.bg-style-signal-dial .bg-text { border-radius:10px; }
.studio-button-skin.bg-style-signal-dial .bg-text .bg-face { background:#d6e0e5; }
.studio-button-skin.bg-style-precision-pill { --sample-bg:#e4e9ef; --sample-ink:#233a52; --btn-bg:#f5f8fc; --btn-ink:#34536f; --btn-edge:#869daf; --btn-radius:28px; --btn-shadow:inset 0 -3px 0 #d6e1ea; --fx-color:#7eb0d7; }
.studio-button-skin.bg-style-precision-pill .bg-face::before { left:5px; top:40%; height:20%; width:2px; border-radius:2px; background:#9cb4c7; }
.studio-button-skin.bg-style-precision-pill .bg-face::after { right:5px; top:40%; height:20%; width:2px; border-radius:2px; background:#9cb4c7; }
.studio-button-skin.bg-style-precision-pill .bg-play .bg-face { background:#30516c; color:#f4f9ff; box-shadow:inset 0 -3px 0 #1c3c58; }

/*
 * Refined / 30 original constructions; public form references are recorded in
 * refined-references.js. No imported assets, loops, hover or glyph transforms.
 * The host owns .88 visual scaling and the unscaled >=44pt interaction region.
 * Ordinary icon/text faces use fine perimeter work with opaque, readable cores.
 * Play-only marks add emphasis without spreading ornament over the whole app.
 * Every shadowless surface explicitly cancels the host's default shadow.
 */

/* BUSINESS 01 / Arched lintel, straight piers; dark ink stone only on play. */
.studio-button-skin.bg-style-refined-portico {
  --sample-bg:#eeeee9; --sample-ink:#35413d; --btn-bg:#f7f7f1; --btn-ink:#354c44;
  --btn-edge:#a3ada6; --btn-radius:48% 48% 8px 8px; --btn-shadow:none; --fx-color:#9eb6a7;
}
.studio-button-skin.bg-style-refined-portico .bg-face::before {
  inset:4px 5px 5px; border:1px solid #adb7ae; border-bottom:0; border-radius:48% 48% 0 0;
}
.studio-button-skin.bg-style-refined-portico .bg-face::after {
  left:7px; right:7px; bottom:3px; height:1px; background:#bac2b9;
}
.studio-button-skin.bg-style-refined-portico .bg-play .bg-face { background:#3d514a; color:#fafaf3; border-color:#75887e; }
.studio-button-skin.bg-style-refined-portico .bg-play .bg-face::before { border-color:#90a197; }

/* BUSINESS 02 / Opposed mitred corners cut the surface, never the hit box. */
.studio-button-skin.bg-style-refined-chamfer-ledger {
  --sample-bg:#eaedf0; --sample-ink:#38454f; --btn-bg:#f4f7f8; --btn-ink:#334752;
  --btn-edge:#afbac1; --btn-radius:3px; --btn-shadow:none; --fx-color:#a6bac5;
}
.studio-button-skin.bg-style-refined-chamfer-ledger .bg-face {
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.studio-button-skin.bg-style-refined-chamfer-ledger .bg-face::before {
  left:10px; right:5px; top:4px; height:1px; background:#bac6cd;
}
.studio-button-skin.bg-style-refined-chamfer-ledger .bg-face::after {
  left:5px; right:10px; bottom:4px; height:1px; background:#c6d0d5;
}

/* BUSINESS 03 / Texture occupies only a seven-pixel binding strip. */
.studio-button-skin.bg-style-refined-linen-binding {
  --sample-bg:#eeebe4; --sample-ink:#524a3e; --btn-bg:#f7f4ec; --btn-ink:#514a3d;
  --btn-edge:#c0b9a9; --btn-radius:4px 14px 14px 4px; --btn-shadow:none; --fx-color:#b9b095;
}
.studio-button-skin.bg-style-refined-linen-binding .bg-face::before {
  inset:0 auto 0 0; width:7px; border-right:1px solid #c2b9a5; border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(0deg,#e8e2d4 0 2px,#d8d1c0 2px 3px);
}
.studio-button-skin.bg-style-refined-linen-binding .bg-face::after {
  left:11px; right:9px; bottom:4px; height:1px; background:#ded8cb;
}
.studio-button-skin.bg-style-refined-linen-binding .bg-play .bg-art { z-index:1; }
.studio-button-skin.bg-style-refined-linen-binding .bg-play .bg-art i:nth-child(1) {
  display:block; left:3px; top:10px; width:7px; height:1px; background:#a39881;
}
.studio-button-skin.bg-style-refined-linen-binding .bg-play .bg-art i:nth-child(2) {
  display:block; left:3px; top:calc(50% - 1px); width:7px; height:1px; background:#a39881;
}
.studio-button-skin.bg-style-refined-linen-binding .bg-play .bg-art i:nth-child(3) {
  display:block; left:3px; bottom:10px; width:7px; height:1px; background:#a39881;
}

/* BUSINESS 04 / Sediment at the sill, an uninterrupted central stone plane. */
.studio-button-skin.bg-style-refined-travertine-sill {
  --sample-bg:#eae6dd; --sample-ink:#514a40; --btn-bg:#f4f0e6; --btn-ink:#544937;
  --btn-edge:#bdb09a; --btn-radius:6px 6px 2px 2px; --btn-shadow:none; --fx-color:#c0b194;
}
.studio-button-skin.bg-style-refined-travertine-sill .bg-face {
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px));
}
.studio-button-skin.bg-style-refined-travertine-sill .bg-face::before {
  inset:auto 3px 3px; height:5px; border-top:1px solid #c8baa3; border-bottom:1px solid #dfd2bb;
  background:linear-gradient(90deg,#d7cbb5 0 16%,#ebe2d0 16% 67%,#d7cbb5 67% 78%,#ebe2d0 78%);
}
.studio-button-skin.bg-style-refined-travertine-sill .bg-play .bg-face::after {
  left:8px; top:4px; width:15px; height:1px; background:#d1c3ab;
}

/* BUSINESS 05 / A one-pixel lower step, without a floating drop shadow. */
.studio-button-skin.bg-style-refined-porcelain-step {
  --sample-bg:#e9edef; --sample-ink:#3e4c54; --btn-bg:#f8fbfc; --btn-ink:#3c5360;
  --btn-edge:#b0c0c8; --btn-radius:20%; --btn-shadow:inset 0 -2px 0 #d5e0e4; --fx-color:#acccd7;
}
.studio-button-skin.bg-style-refined-porcelain-step .bg-face::before {
  inset:3px 7px auto; height:7px; border-top:1px solid #d6e6eb; border-radius:50%;
}
.studio-button-skin.bg-style-refined-porcelain-step .bg-art i:nth-child(1) {
  display:block; left:5px; right:5px; bottom:-1px; height:7px; border:1px solid #b0c0c8;
  border-radius:0 0 6px 6px; background:#e1e9ec;
}

/* BUSINESS 06 / An L-shaped brass cantilever is confined to the upper corner. */
.studio-button-skin.bg-style-refined-brass-cantilever {
  --sample-bg:#e9e7e2; --sample-ink:#494a45; --btn-bg:#f5f4ef; --btn-ink:#424c48;
  --btn-edge:#b9b9ae; --btn-radius:9px 2px 9px 2px; --btn-shadow:none; --fx-color:#bcb18d;
}
.studio-button-skin.bg-style-refined-brass-cantilever .bg-face::before {
  top:3px; right:3px; width:13px; height:8px; border-top:1px solid #aa9973; border-right:1px solid #aa9973;
}
.studio-button-skin.bg-style-refined-brass-cantilever .bg-face::after {
  left:4px; bottom:4px; width:8px; height:1px; background:#c4c4b9;
}
.studio-button-skin.bg-style-refined-brass-cantilever .bg-play .bg-face::before { width:20px; height:11px; }

/* BUSINESS 07 / Keystone shoulders differ from a conventional octagonal coin. */
.studio-button-skin.bg-style-refined-slate-keystone {
  --sample-bg:#e6eaec; --sample-ink:#384952; --btn-bg:#eef3f5; --btn-ink:#344d5b;
  --btn-edge:#a8b8c0; --btn-radius:3px; --btn-shadow:none; --fx-color:#9fb9c6;
}
.studio-button-skin.bg-style-refined-slate-keystone .bg-face {
  clip-path:polygon(16% 0,84% 0,100% 86%,90% 100%,10% 100%,0 86%);
}
.studio-button-skin.bg-style-refined-slate-keystone .bg-face::before {
  top:5px; left:7px; width:1px; height:9px; background:#acbdc5; transform:rotate(10deg);
}
.studio-button-skin.bg-style-refined-slate-keystone .bg-face::after {
  top:5px; right:7px; width:1px; height:9px; background:#acbdc5; transform:rotate(-10deg);
}
.studio-button-skin.bg-style-refined-slate-keystone .bg-play .bg-face { background:#3d5562; color:#f8fcfd; border-color:#7f97a4; }

/* BUSINESS 08 / Two short flanges extend one pixel beyond the quiet face. */
.studio-button-skin.bg-style-refined-twin-flange {
  --sample-bg:#e9ecec; --sample-ink:#3f4d4f; --btn-bg:#f4f8f8; --btn-ink:#3b5155;
  --btn-edge:#aebfc0; --btn-radius:12px; --btn-shadow:none; --fx-color:#a6c2c4;
}
.studio-button-skin.bg-style-refined-twin-flange .bg-art i:nth-child(1) {
  display:block; top:25%; bottom:25%; left:-1px; width:5px; border:1px solid #a9bbbd;
  border-radius:2px 0 0 2px; background:#d5e0e1;
}
.studio-button-skin.bg-style-refined-twin-flange .bg-art i:nth-child(2) {
  display:block; top:25%; bottom:25%; right:-1px; width:5px; border:1px solid #a9bbbd;
  border-radius:0 2px 2px 0; background:#d5e0e1;
}
.studio-button-skin.bg-style-refined-twin-flange .bg-face::before {
  top:30%; bottom:30%; left:4px; width:1px; background:#c1cecf;
}
.studio-button-skin.bg-style-refined-twin-flange .bg-face::after {
  top:30%; bottom:30%; right:4px; width:1px; background:#c1cecf;
}

/* BUSINESS 09 / A shallow cap and one page edge, no book icon at the center. */
.studio-button-skin.bg-style-refined-archive-cap {
  --sample-bg:#e7ebe6; --sample-ink:#465044; --btn-bg:#f4f7f0; --btn-ink:#42513d;
  --btn-edge:#b2beab; --btn-radius:5px 5px 15px 15px; --btn-shadow:none; --fx-color:#b2c3a4;
}
.studio-button-skin.bg-style-refined-archive-cap .bg-face::before {
  inset:0 0 auto; height:6px; border-bottom:1px solid #b7c1ae; border-radius:4px 4px 0 0; background:#e1e8d9;
}
.studio-button-skin.bg-style-refined-archive-cap .bg-face::after {
  left:8px; right:8px; bottom:4px; height:2px; border-bottom:1px solid #c6cfbd; border-radius:0 0 6px 6px;
}

/* BUSINESS 10 / Two planar mitres; no folded tab protrudes into neighboring UI. */
.studio-button-skin.bg-style-refined-paper-mitre {
  --sample-bg:#f0ece5; --sample-ink:#514d45; --btn-bg:#fcf9f2; --btn-ink:#554d3f;
  --btn-edge:#c4bcad; --btn-radius:3px; --btn-shadow:none; --fx-color:#c5b69b;
}
.studio-button-skin.bg-style-refined-paper-mitre .bg-face::before {
  top:0; right:0; width:8px; height:8px; background:linear-gradient(45deg,#e3dbcb 48%,#c4b9a4 49% 56%,#f8f3e8 57%);
}
.studio-button-skin.bg-style-refined-paper-mitre .bg-face::after {
  bottom:0; left:0; width:6px; height:6px; background:linear-gradient(45deg,#f8f3e8 43%,#c4b9a4 44% 51%,#e3dbcb 52%);
}

/* BUSINESS 11 / The inset well is only three pixels deep in plan. */
.studio-button-skin.bg-style-refined-ink-well {
  --sample-bg:#e4e9e6; --sample-ink:#3e4c45; --btn-bg:#dbe4dd; --btn-ink:#344c3e;
  --btn-edge:#a9b8ad; --btn-radius:38% / 27%; --btn-shadow:none; --fx-color:#a0bcaa;
}
.studio-button-skin.bg-style-refined-ink-well .bg-face::before {
  inset:3px; border:1px solid #c0cec2; border-radius:inherit; background:#f3f7f0;
}
.studio-button-skin.bg-style-refined-ink-well .bg-face::after {
  bottom:2px; left:30%; right:30%; height:1px; background:#8eaa98;
}

/* BUSINESS 12 / A flat oval seated on a short, low rectangular plinth. */
.studio-button-skin.bg-style-refined-plinth-oval {
  --sample-bg:#eae8e4; --sample-ink:#4e4b46; --btn-bg:#f5f4ee; --btn-ink:#504e42;
  --btn-edge:#bcb9aa; --btn-radius:50% / 40%; --btn-shadow:none; --fx-color:#c3baa4;
}
.studio-button-skin.bg-style-refined-plinth-oval .bg-art i:nth-child(1) {
  display:block; bottom:0; left:22%; right:22%; height:8px; border:1px solid #b7b29e;
  border-radius:1px; background:#e6e1d3;
}
.studio-button-skin.bg-style-refined-plinth-oval .bg-face::before {
  inset:4px 8px auto; height:8px; border-top:1px solid #d4d0c1; border-radius:50%;
}

/* BUSINESS 13 / A silver hinge and a short return, not a second full frame. */
.studio-button-skin.bg-style-refined-silver-seam {
  --sample-bg:#e7ebef; --sample-ink:#404d5b; --btn-bg:#f5f8fc; --btn-ink:#3c526b;
  --btn-edge:#b0bdce; --btn-radius:3px 20px 3px 20px; --btn-shadow:none; --fx-color:#aebfd6;
}
.studio-button-skin.bg-style-refined-silver-seam .bg-face::before {
  left:4px; top:6px; bottom:15px; width:2px; background:linear-gradient(90deg,#b6c3d3,#e4ebf5);
}
.studio-button-skin.bg-style-refined-silver-seam .bg-face::after {
  right:5px; bottom:4px; width:10px; height:4px; border-bottom:1px solid #b6c3d3; border-right:1px solid #b6c3d3;
}

/* BUSINESS 14 / Shallow twelve-sided seal, with two restrained edge notches. */
.studio-button-skin.bg-style-refined-faceted-seal {
  --sample-bg:#e6eae6; --sample-ink:#424e43; --btn-bg:#edf3eb; --btn-ink:#3f533b;
  --btn-edge:transparent; --btn-radius:1px; --btn-shadow:inset 0 0 0 1px #bbc8b5; --fx-color:#b2c5a8;
}
.studio-button-skin.bg-style-refined-faceted-seal .bg-face {
  clip-path:polygon(34% 0,66% 0,88% 12%,100% 34%,100% 66%,88% 88%,66% 100%,34% 100%,12% 88%,0 66%,0 34%,12% 12%);
}
.studio-button-skin.bg-style-refined-faceted-seal .bg-face::before {
  top:40%; bottom:40%; left:4px; width:1px; background:#acbca4;
}
.studio-button-skin.bg-style-refined-faceted-seal .bg-face::after {
  top:40%; bottom:40%; right:4px; width:1px; background:#acbca4;
}

/* BUSINESS 15 / Offset mounting line, with a single primary corner joint. */
.studio-button-skin.bg-style-refined-offset-mat {
  --sample-bg:#ebe8e2; --sample-ink:#4e4a42; --btn-bg:#faf7ee; --btn-ink:#4c4b3e;
  --btn-edge:#c5bca8; --btn-radius:3px 10px 3px 3px; --btn-shadow:none; --fx-color:#b8b394;
}
.studio-button-skin.bg-style-refined-offset-mat .bg-face::before {
  inset:3px 3px 5px 5px; border-left:1px solid #d3cab7; border-bottom:1px solid #d3cab7; border-radius:0 0 0 2px;
}
.studio-button-skin.bg-style-refined-offset-mat .bg-play .bg-face::after {
  right:3px; bottom:3px; width:8px; height:8px; border-right:1px solid #a59d80; border-bottom:1px solid #a59d80;
}

/* FRESH 01 / Ginkgo crown and a tiny cleft; fan veins stay at the bottom. */
.studio-button-skin.bg-style-refined-ginkgo-fold {
  --sample-bg:#eeeddf; --sample-ink:#53523c; --btn-bg:#f4f2d8; --btn-ink:#525630;
  --btn-edge:#c0c093; --btn-radius:45% 45% 28% 28%; --btn-shadow:none; --fx-color:#c1c886;
}
.studio-button-skin.bg-style-refined-ginkgo-fold .bg-face {
  clip-path:polygon(0 0,43% 0,50% 5%,57% 0,100% 0,100% 63%,70% 100%,30% 100%,0 63%);
}
.studio-button-skin.bg-style-refined-ginkgo-fold .bg-face::before {
  left:35%; right:35%; bottom:3px; height:4px; border-bottom:1px solid #b9bb82; border-radius:50%;
}
.studio-button-skin.bg-style-refined-ginkgo-fold .bg-play .bg-face::after {
  bottom:5px; left:calc(50% - 8px); width:16px; height:7px;
  background:repeating-conic-gradient(from -40deg at 50% 100%,#a8ae6d 0deg 2deg,transparent 2deg 24deg);
  clip-path:polygon(0 0,100% 0,60% 100%,40% 100%); opacity:.55;
}

/* FRESH 02 / Magnolia cup with narrow outer sepals, not an oversized flower. */
.studio-button-skin.bg-style-refined-magnolia-cup {
  --sample-bg:#eeeaeb; --sample-ink:#564a51; --btn-bg:#fcf4f3; --btn-ink:#614650;
  --btn-edge:#cbb4bb; --btn-radius:12% 12% 47% 47%; --btn-shadow:none; --fx-color:#d1b8c0;
}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-face::before {
  left:4px; bottom:5px; width:8px; height:12px; border-left:1px solid #d6c1c5; border-radius:0 0 0 100%;
}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-face::after {
  right:4px; bottom:5px; width:8px; height:12px; border-right:1px solid #d6c1c5; border-radius:0 0 100% 0;
}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-play .bg-art i:nth-child(1) {
  display:block; left:0; bottom:6px; width:10px; height:20px; border:1px solid #b5bdaa;
  border-radius:2px 85% 3px 75%; background:#e4e9da; transform:rotate(-13deg);
}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-play .bg-art i:nth-child(2) {
  display:block; right:0; bottom:6px; width:10px; height:20px; border:1px solid #b5bdaa;
  border-radius:85% 2px 75% 3px; background:#e4e9da; transform:rotate(13deg);
}

/* FRESH 03 / The leaf is short and broad enough to enclose a centered glyph. */
.studio-button-skin.bg-style-refined-willow-slip {
  --sample-bg:#e7ece2; --sample-ink:#44543d; --btn-bg:#edf4e7; --btn-ink:#415d36;
  --btn-edge:#afc09f; --btn-radius:60% 16% 60% 16%; --btn-shadow:none; --fx-color:#b0c893;
}
.studio-button-skin.bg-style-refined-willow-slip .bg-face::before {
  inset:4px 5px; border-left:1px solid #c1cfae; border-radius:inherit;
}
.studio-button-skin.bg-style-refined-willow-slip .bg-face::after {
  inset:6px 5px 4px 7px; border-right:1px solid #cfdbc1; border-radius:inherit;
}

/* FRESH 04 / Flat central olive paper; paired leaves belong to the main key. */
.studio-button-skin.bg-style-refined-olive-pair {
  --sample-bg:#e7ebe0; --sample-ink:#48513d; --btn-bg:#f0f4e8; --btn-ink:#495a32;
  --btn-edge:#b6c3a3; --btn-radius:17px 7px 17px 7px; --btn-shadow:none; --fx-color:#b9c994;
}
.studio-button-skin.bg-style-refined-olive-pair .bg-face::before {
  inset:4px; border-left:1px solid #cad4ba; border-bottom:1px solid #cad4ba; border-radius:inherit;
}
.studio-button-skin.bg-style-refined-olive-pair .bg-play .bg-art { z-index:1; }
.studio-button-skin.bg-style-refined-olive-pair .bg-play .bg-art i:nth-child(1) {
  display:block; top:3px; right:3px; width:12px; height:5px; border-radius:100% 0 100% 0;
  background:#a8b995; transform:rotate(-30deg);
}
.studio-button-skin.bg-style-refined-olive-pair .bg-play .bg-art i:nth-child(2) {
  display:block; bottom:3px; left:3px; width:12px; height:5px; border-radius:100% 0 100% 0;
  background:#b7c7a5; transform:rotate(-30deg);
}

/* FRESH 05 / The cradle wraps only the lower perimeter. */
.studio-button-skin.bg-style-refined-lotus-cradle {
  --sample-bg:#e3ebe6; --sample-ink:#3d5146; --btn-bg:#edf6ee; --btn-ink:#345a45;
  --btn-edge:#a9c3b0; --btn-radius:48% 48% 22% 22%; --btn-shadow:none; --fx-color:#a1c9ac;
}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-face::before {
  left:5px; right:5px; bottom:3px; height:9px; border-bottom:2px solid #b9d0ba; border-radius:0 0 50% 50%;
}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-play .bg-art i:nth-child(1) {
  display:block; left:0; bottom:0; width:18px; height:8px; border:1px solid #abc3ac;
  border-radius:0 80% 0 90%; background:#d1e2cb; transform:rotate(12deg);
}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-play .bg-art i:nth-child(2) {
  display:block; right:0; bottom:0; width:18px; height:8px; border:1px solid #abc3ac;
  border-radius:80% 0 90% 0; background:#d1e2cb; transform:rotate(-12deg);
}

/* FRESH 06 / A pod seam, with seeds restricted to the main key's far edge. */
.studio-button-skin.bg-style-refined-seed-pod {
  --sample-bg:#e9edde; --sample-ink:#4c553a; --btn-bg:#f0f5e3; --btn-ink:#4d5b2e;
  --btn-edge:#b7c59b; --btn-radius:50% / 46%; --btn-shadow:none; --fx-color:#bccd92;
}
.studio-button-skin.bg-style-refined-seed-pod .bg-face::before {
  inset:3px 8px auto; height:10px; border-top:1px solid #c2cfab; border-radius:50%;
}
.studio-button-skin.bg-style-refined-seed-pod .bg-play .bg-face::after {
  right:4px; top:calc(50% - 8px); width:3px; height:16px;
  background:radial-gradient(circle at 50% 2px,#afc38c 0 1.5px,transparent 1.6px),radial-gradient(circle at 50% 8px,#afc38c 0 1.5px,transparent 1.6px),radial-gradient(circle at 50% 14px,#afc38c 0 1.5px,transparent 1.6px);
}

/* FRESH 07 / Three broad lobes stay inside the original visual footprint. */
.studio-button-skin.bg-style-refined-clover-cushion {
  --sample-bg:#e2ebdf; --sample-ink:#42533e; --btn-bg:#eaf4e5; --btn-ink:#385b32;
  --btn-edge:transparent; --btn-radius:45% 45% 50% 50%; --btn-shadow:none; --fx-color:#accb9c;
}
.studio-button-skin.bg-style-refined-clover-cushion .bg-face { inset:4px 3px 2px; }
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(1) {
  display:block; left:0; top:0; width:58%; height:62%; border:1px solid #b0c7a4; border-radius:50%; background:#eaf4e5;
}
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(2) {
  display:block; right:0; top:0; width:58%; height:62%; border:1px solid #b0c7a4; border-radius:50%; background:#eaf4e5;
}
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(3) {
  display:block; left:19%; bottom:0; width:62%; height:65%; border:1px solid #b0c7a4; border-radius:50%; background:#eaf4e5;
}
.studio-button-skin.bg-style-refined-clover-cushion .bg-face::after {
  left:calc(50% - 1px); bottom:1px; width:2px; height:4px; border-radius:2px; background:#b4c9a9;
}

/* FRESH 08 / Two small rotated petal layers, with a still, level inner face. */
.studio-button-skin.bg-style-refined-camellia-rim {
  --sample-bg:#f0e8e5; --sample-ink:#5a4b43; --btn-bg:#fcf3eb; --btn-ink:#694c3d;
  --btn-edge:#dfc6b7; --btn-radius:36%; --btn-shadow:none; --fx-color:#d7bca4;
}
.studio-button-skin.bg-style-refined-camellia-rim .bg-face { inset:3px; }
.studio-button-skin.bg-style-refined-camellia-rim .bg-art i:nth-child(1) {
  display:block; inset:2px; border:1px solid #d5b9a8; border-radius:36%; background:#f3e4d7; transform:rotate(20deg);
}
.studio-button-skin.bg-style-refined-camellia-rim .bg-art i:nth-child(2) {
  display:block; inset:2px; border:1px solid #d5b9a8; border-radius:36%; background:#f8ebdf; transform:rotate(-20deg);
}
.studio-button-skin.bg-style-refined-camellia-rim .bg-text .bg-art i:nth-child(1) { transform:rotate(3deg); }
.studio-button-skin.bg-style-refined-camellia-rim .bg-text .bg-art i:nth-child(2) { transform:rotate(-3deg); }
.studio-button-skin.bg-style-refined-camellia-rim .bg-play .bg-face::after {
  right:4px; bottom:4px; width:9px; height:8px; border-right:1px solid #e4cbbc; border-radius:0 0 100% 0;
}

/* FRESH 09 / A rounded reed end opposite a straight bound end. */
.studio-button-skin.bg-style-refined-reed-wrap {
  --sample-bg:#eaeade; --sample-ink:#51513d; --btn-bg:#f5f5e8; --btn-ink:#55583a;
  --btn-edge:#c0c3a4; --btn-radius:50% 5px 5px 50%; --btn-shadow:none; --fx-color:#bec69b;
}
.studio-button-skin.bg-style-refined-reed-wrap .bg-face::before {
  top:6px; right:3px; bottom:6px; width:5px;
  background:repeating-linear-gradient(90deg,#e0e5c8 0 2px,#c9d0ac 2px 3px); border-radius:2px;
}
.studio-button-skin.bg-style-refined-reed-wrap .bg-face::after {
  top:5px; bottom:5px; right:9px; width:1px; background:#d2d8bc;
}

/* FRESH 10 / Unequal wax arcs, with a tiny edge impression rather than a seal icon. */
.studio-button-skin.bg-style-refined-sage-wax {
  --sample-bg:#e4ebe5; --sample-ink:#415147; --btn-bg:#e9f1e8; --btn-ink:#3d5945;
  --btn-edge:#b0c1ae; --btn-radius:36% 44% 32% 47% / 42% 33% 48% 31%; --btn-shadow:none; --fx-color:#b2c6ac;
}
.studio-button-skin.bg-style-refined-sage-wax .bg-face::before {
  inset:3px; border-right:1px solid #c7d6c1; border-bottom:1px solid #c7d6c1; border-radius:inherit;
}
.studio-button-skin.bg-style-refined-sage-wax .bg-play .bg-face::after {
  left:8px; bottom:5px; width:10px; height:4px; border:1px solid #c0cfb9;
  border-radius:100% 0 100% 0; transform:rotate(25deg);
}

/* FRESH 11 / One asymmetric petal; no heart shape or center-crossing veins. */
.studio-button-skin.bg-style-refined-poppy-petal {
  --sample-bg:#f0e7e0; --sample-ink:#604c41; --btn-bg:#fbede1; --btn-ink:#714e37;
  --btn-edge:#d8bba5; --btn-radius:60% 35% 48% 20%; --btn-shadow:none; --fx-color:#dab597;
}
.studio-button-skin.bg-style-refined-poppy-petal .bg-face::before {
  inset:4px 7px 8px 4px; border-left:1px solid #e1c4af; border-radius:inherit;
}
.studio-button-skin.bg-style-refined-poppy-petal .bg-play .bg-face::after {
  top:6px; left:7px; width:12px; height:10px; border-left:1px solid #e7cbb8; border-radius:100% 0 0 0;
}

/* FRESH 12 / A shallow bay between two aloe shoulders, with soft round base. */
.studio-button-skin.bg-style-refined-aloe-cove {
  --sample-bg:#dfebe5; --sample-ink:#395447; --btn-bg:#e7f5ea; --btn-ink:#305c41;
  --btn-edge:#a2c5ad; --btn-radius:4px 4px 42% 42%; --btn-shadow:none; --fx-color:#a1cfae;
}
.studio-button-skin.bg-style-refined-aloe-cove .bg-face {
  clip-path:polygon(0 0,18% 5%,50% 8%,82% 5%,100% 0,100% 100%,0 100%);
}
.studio-button-skin.bg-style-refined-aloe-cove .bg-face::before {
  inset:7px 4px 4px; border-left:2px solid #c4dfc7; border-right:2px solid #c4dfc7; border-radius:0 0 45% 45%;
}

/* FRESH 13 / Quiet notched tile; the four-petal flower is play-only. */
.studio-button-skin.bg-style-refined-osmanthus-corner {
  --sample-bg:#f0ecdf; --sample-ink:#5b533d; --btn-bg:#fcf6e5; --btn-ink:#615a36;
  --btn-edge:#d2c49f; --btn-radius:13px 3px 13px 13px; --btn-shadow:none; --fx-color:#d7c483;
}
.studio-button-skin.bg-style-refined-osmanthus-corner .bg-face {
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%);
}
.studio-button-skin.bg-style-refined-osmanthus-corner .bg-face::before {
  top:5px; right:5px; width:3px; height:3px; border-radius:50%; background:#cbb675;
}
.studio-button-skin.bg-style-refined-osmanthus-corner .bg-play .bg-face::after {
  top:3px; right:3px; width:11px; height:11px;
  background:radial-gradient(ellipse at 50% 22%,#dfcb91 0 2px,transparent 2.5px),radial-gradient(ellipse at 22% 50%,#dfcb91 0 2px,transparent 2.5px),radial-gradient(ellipse at 78% 50%,#dfcb91 0 2px,transparent 2.5px),radial-gradient(ellipse at 50% 78%,#dfcb91 0 2px,transparent 2.5px);
}

/* FRESH 14 / A specimen tag, with side stitch marks kept clear of long labels. */
.studio-button-skin.bg-style-refined-herbarium-label {
  --sample-bg:#e9eadf; --sample-ink:#515443; --btn-bg:#f5f6e9; --btn-ink:#535c3b;
  --btn-edge:#bdc4a8; --btn-radius:3px; --btn-shadow:none; --fx-color:#bfc99d;
}
.studio-button-skin.bg-style-refined-herbarium-label .bg-face {
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.studio-button-skin.bg-style-refined-herbarium-label .bg-face::before {
  left:4px; top:5px; bottom:5px; width:3px;
  background:repeating-linear-gradient(0deg,#d7ddc4 0 2px,#e8ecd9 2px 5px);
}
.studio-button-skin.bg-style-refined-herbarium-label .bg-face::after {
  top:8px; left:4px; width:5px; height:1px; background:#b8c29d;
}

/* FRESH 15 / A cotton bowl, with two low husk leaves on the primary only. */
.studio-button-skin.bg-style-refined-cotton-husk {
  --sample-bg:#ece9e3; --sample-ink:#534e44; --btn-bg:#fcf9f0; --btn-ink:#5b5342;
  --btn-edge:#cdc3ae; --btn-radius:40% 40% 22% 22%; --btn-shadow:none; --fx-color:#cbbd9e;
}
.studio-button-skin.bg-style-refined-cotton-husk .bg-face::before {
  left:10px; right:10px; bottom:4px; height:3px; border-bottom:1px solid #e0d7c5; border-radius:50%;
}
.studio-button-skin.bg-style-refined-cotton-husk .bg-play .bg-art i:nth-child(1) {
  display:block; left:4px; bottom:0; width:20px; height:9px; border:1px solid #c2b59b;
  border-radius:0 90% 0 90%; background:#e6deca; transform:rotate(12deg);
}
.studio-button-skin.bg-style-refined-cotton-husk .bg-play .bg-art i:nth-child(2) {
  display:block; right:4px; bottom:0; width:20px; height:9px; border:1px solid #c2b59b;
  border-radius:90% 0 90% 0; background:#e6deca; transform:rotate(-12deg);
}

/* Original craft and analogue forms. Root rules contain only contract variables.
 * The host keeps .88 scale, native centred glyphs, >=44pt hit regions and motion.
 * Ornament sits at the perimeter; all no-shadow materials explicitly opt out.
 * Opaque quiet centres keep the same ink legible on both light and dark hosts.
 */

/* 宣纸：浅错齿保留纸性，纤维仅占下缘 3px。 */
.studio-button-skin.bg-style-crafted-xuan-deckle {
  --sample-bg: #e8e7e1; --sample-ink: #454a43; --btn-bg: #f5f2e9;
  --btn-ink: #3b4139; --btn-edge: #b7b7a6; --btn-radius: 2px;
  --btn-shadow: none; --fx-color: #879781;
}
.studio-button-skin.bg-style-crafted-xuan-deckle .bg-face {
  clip-path: polygon(1% 0, 32% 1%, 67% 0, 99% 2%, 98% 34%, 100% 66%, 98% 99%, 69% 98%, 36% 100%, 0 98%, 1% 68%, 0 33%);
}
.studio-button-skin.bg-style-crafted-xuan-deckle .bg-face::before {
  inset: 4px; border-top: 1px solid #ffffff; border-left: 1px solid #dedbcb;
}
.studio-button-skin.bg-style-crafted-xuan-deckle .bg-face::after {
  bottom: 2px; left: 5px; right: 5px; height: 3px;
  background: repeating-linear-gradient(174deg, #b7b59f66 0 1px, transparent 1px 3px);
}

/* 折笺：折线分别靠两端，封片从不跨越文字。 */
.studio-button-skin.bg-style-crafted-folded-packet {
  --sample-bg: #e8e4dc; --sample-ink: #534b41; --btn-bg: #f3ede1;
  --btn-ink: #514335; --btn-edge: #b5a991; --btn-radius: 3px;
  --btn-shadow: none; --fx-color: #b7a27d;
}
.studio-button-skin.bg-style-crafted-folded-packet .bg-face {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.studio-button-skin.bg-style-crafted-folded-packet .bg-face::before {
  top: 0; right: 0; width: 8px; height: 8px;
  background: linear-gradient(45deg, #c7bda7 0 46%, #fffaf0 48% 55%, #e7ddca 57%);
}
.studio-button-skin.bg-style-crafted-folded-packet .bg-face::after {
  bottom: 0; left: 0; width: 8px; height: 8px;
  background: linear-gradient(45deg, #e3d9c7 0 45%, #bcae9577 46% 52%, transparent 53%);
}

/* 竹编：有纹理的匣沿包住完整素衬，不在字形后面织网。 */
.studio-button-skin.bg-style-crafted-bamboo-weave {
  --sample-bg: #e3e4d9; --sample-ink: #454b3a;
  --btn-bg: repeating-linear-gradient(0deg, transparent 0 3px, #a69d8066 3px 4px), repeating-linear-gradient(90deg, #ded8c4 0 3px, #b6ac8b 3px 4px);
  --btn-ink: #424838; --btn-edge: #a59f84; --btn-radius: 14px 14px 7px 7px;
  --btn-shadow: none; --fx-color: #909f76;
}
.studio-button-skin.bg-style-crafted-bamboo-weave .bg-face::before {
  inset: 4px; border: 1px solid #c5bea5; border-radius: 10px 10px 4px 4px; background: #f0eee3;
}
.studio-button-skin.bg-style-crafted-bamboo-weave .bg-face::after {
  left: 11px; right: 11px; bottom: 1px; height: 1px; background: #f0ebd6;
}
.studio-button-skin.bg-style-crafted-bamboo-weave .bg-text .bg-face::before { inset: 3px 5px; }

/* 青釉：釉口留一线柔光，圈足只向下多出 1px。 */
.studio-button-skin.bg-style-crafted-celadon-foot {
  --sample-bg: #e0e8e2; --sample-ink: #3e554d;
  --btn-bg: linear-gradient(165deg, #e4efea, #cadbd1);
  --btn-ink: #2d4c40; --btn-edge: #8fa99c; --btn-radius: 46% 46% 39% 39%;
  --btn-shadow: inset 0 1px 0 #fbfffa; --fx-color: #8aac9b;
}
.studio-button-skin.bg-style-crafted-celadon-foot .bg-face::before {
  inset: 3px 4px 5px; border-top: 1px solid #ffffff; border-bottom: 1px solid #98b3a46b; border-radius: inherit;
}
.studio-button-skin.bg-style-crafted-celadon-foot .bg-face::after {
  left: 27%; right: 27%; bottom: -1px; height: 3px; border: 1px solid #a7a692;
  border-radius: 0 0 5px 5px; background: #d4cdb9;
}
.studio-button-skin.bg-style-crafted-celadon-foot .bg-play .bg-face::after { left: 25%; right: 25%; height: 4px; }
.studio-button-skin.bg-style-crafted-celadon-foot .bg-text .bg-face { border-radius: 18px; }

/* 紫砂：收敛肩部和下缘颗粒区，中心保持低噪声。 */
.studio-button-skin.bg-style-crafted-clay-lip {
  --sample-bg: #e4ded5; --sample-ink: #58483f; --btn-bg: #d6c2ad;
  --btn-ink: #4c392f; --btn-edge: #a48b77; --btn-radius: 44% 44% 22% 22%;
  --btn-shadow: inset 0 -2px 0 #b9a28e; --fx-color: #b69879;
}
.studio-button-skin.bg-style-crafted-clay-lip .bg-face::before {
  top: 3px; left: 18%; right: 18%; height: 4px; border-top: 1px solid #ede0cc;
  border-bottom: 1px solid #ad917d66; border-radius: 50%;
}
.studio-button-skin.bg-style-crafted-clay-lip .bg-face::after {
  left: 8px; right: 8px; bottom: 3px; height: 3px;
  background: radial-gradient(circle, #97755e66 0 .7px, transparent 1px); background-size: 4px 3px;
}

/* 绫面：低起伏对角软枕，针脚只在底缘。 */
.studio-button-skin.bg-style-crafted-silk-piping {
  --sample-bg: #e7e2e5; --sample-ink: #51484f; --btn-bg: #f0e9ed;
  --btn-ink: #51434e; --btn-edge: #b9aab4; --btn-radius: 8px 19px 8px 19px;
  --btn-shadow: none; --fx-color: #b6a3b0;
}
.studio-button-skin.bg-style-crafted-silk-piping .bg-face::before {
  inset: 3px; border: 1px solid #fff9fd; border-radius: 6px 16px 6px 16px;
  box-shadow: 0 0 0 1px #cbbcc666;
}
.studio-button-skin.bg-style-crafted-silk-piping .bg-face::after {
  left: 19%; right: 19%; bottom: 2px; height: 2px;
  background: repeating-linear-gradient(90deg, #a28c9d77 0 1px, transparent 1px 4px);
}

/* 漆盒：退台轮廓和端榫形成方形器物，不加金色花饰。 */
.studio-button-skin.bg-style-crafted-lacquer-joint {
  --sample-bg: #dddeda; --sample-ink: #434943; --btn-bg: #3d4843;
  --btn-ink: #f0f1e8; --btn-edge: #758078; --btn-radius: 3px;
  --btn-shadow: none; --fx-color: #aab3a1;
}
.studio-button-skin.bg-style-crafted-lacquer-joint .bg-face {
  clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 5px) calc(100% - 3px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 5px 3px);
}
.studio-button-skin.bg-style-crafted-lacquer-joint .bg-face::before {
  left: 2px; top: 40%; width: 3px; height: 20%; border: 1px solid #95a194; background: #4f5b52;
}
.studio-button-skin.bg-style-crafted-lacquer-joint .bg-face::after {
  right: 2px; top: 40%; width: 3px; height: 20%; border: 1px solid #95a194; background: #4f5b52;
}

/* 砚台：浅池集中在上沿，不在可读中心挖孔。 */
.studio-button-skin.bg-style-crafted-inkstone-slab {
  --sample-bg: #dedfda; --sample-ink: #454e48; --btn-bg: #d0d4ca;
  --btn-ink: #3e4940; --btn-edge: #939d91; --btn-radius: 6px 6px 3px 3px;
  --btn-shadow: none; --fx-color: #91a08f;
}
.studio-button-skin.bg-style-crafted-inkstone-slab .bg-face {
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
}
.studio-button-skin.bg-style-crafted-inkstone-slab .bg-face::before {
  inset: 3px 5px 4px; border: 1px solid #aab1a4; border-bottom-color: #e8ecdf; border-radius: 4px 4px 2px 2px;
}
.studio-button-skin.bg-style-crafted-inkstone-slab .bg-face::after {
  top: 5px; left: 23%; right: 23%; height: 3px; border-radius: 3px;
  background: #b2bdaf; box-shadow: inset 0 1px 0 #84958055;
}

/* 叠纸：两翼各三道折脊，中央整张纸保持无纹。 */
.studio-button-skin.bg-style-crafted-pleated-paper {
  --sample-bg: #e2e5e5; --sample-ink: #454d51; --btn-bg: #eef0eb;
  --btn-ink: #3c4b4c; --btn-edge: #a9b5b3; --btn-radius: 2px 7px 2px 7px;
  --btn-shadow: none; --fx-color: #9eb4b0;
}
.studio-button-skin.bg-style-crafted-pleated-paper .bg-face::before {
  left: 1px; top: 3px; bottom: 3px; width: 6px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #cbd4ce 0 1px, #f7f8f1 1px 2px);
}
.studio-button-skin.bg-style-crafted-pleated-paper .bg-face::after {
  right: 1px; top: 3px; bottom: 3px; width: 6px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #f7f8f1 0 1px, #cbd4ce 1px 2px);
}

/* 葵口：八段浅起伏，白釉素面与完整图标分层。 */
.studio-button-skin.bg-style-crafted-porcelain-rim {
  --sample-bg: #e0e6e7; --sample-ink: #45555a; --btn-bg: #e8eeec;
  --btn-ink: #3c5055; --btn-edge: #9dafb1; --btn-radius: 38%;
  --btn-shadow: none; --fx-color: #9ebbbd;
}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-face {
  clip-path: polygon(18% 0, 40% 2%, 50% 0, 60% 2%, 82% 0, 100% 18%, 98% 40%, 100% 50%, 98% 60%, 100% 82%, 82% 100%, 60% 98%, 50% 100%, 40% 98%, 18% 100%, 0 82%, 2% 60%, 0 50%, 2% 40%, 0 18%);
}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-face::before {
  inset: 3px; border: 1px solid #fbfffc; border-radius: 35%;
}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-face::after {
  inset: 5px; border: 1px solid #bac9c655; border-radius: 33%;
}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-text .bg-face { border-radius: 12px; }

/* 胶木：上拱下平的摇键，微光不占用中心。 */
.studio-button-skin.bg-style-crafted-bakelite-rocker {
  --sample-bg: #dedbd6; --sample-ink: #4e4841; --btn-bg: linear-gradient(#625c54, #4a4640);
  --btn-ink: #f8f0df; --btn-edge: #877e70; --btn-radius: 16px 16px 5px 5px;
  --btn-shadow: inset 0 -3px 0 #383934; --fx-color: #b9aa8f;
}
.studio-button-skin.bg-style-crafted-bakelite-rocker .bg-face::before {
  inset: 3px 5px 6px; border-top: 1px solid #b6a68c66; border-left: 1px solid #82776777;
  border-radius: 13px 13px 2px 2px;
}
.studio-button-skin.bg-style-crafted-bakelite-rocker .bg-face::after {
  bottom: 4px; left: 27%; right: 27%; height: 1px; background: #ada08a77;
}

/* 铬边：小型长圆按键的两端拉丝，避免高亮金属铺满表面。 */
.studio-button-skin.bg-style-crafted-chrome-capsule {
  --sample-bg: #dfe3e5; --sample-ink: #46515a; --btn-bg: #e7ecec;
  --btn-ink: #344651; --btn-edge: #9caab0; --btn-radius: 28px;
  --btn-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #b4bec2; --fx-color: #9bb5c0;
}
.studio-button-skin.bg-style-crafted-chrome-capsule .bg-face::before {
  inset: 3px; border-top: 1px solid #ffffff; border-bottom: 1px solid #b2bec4; border-radius: inherit;
}
.studio-button-skin.bg-style-crafted-chrome-capsule .bg-face::after {
  inset: 8px 2px; border-left: 2px solid #bbc5c8; border-right: 2px solid #bbc5c8; border-radius: 50%;
}
.studio-button-skin.bg-style-crafted-chrome-capsule .bg-play .bg-face::before { border-bottom-color: #98adb5; }

/* 琴键：不做机械帽中帽，直肩和端面叠层给出琴键身份。 */
.studio-button-skin.bg-style-crafted-ivory-piano {
  --sample-bg: #e4e0d8; --sample-ink: #4d4940; --btn-bg: #f3efe2;
  --btn-ink: #484638; --btn-edge: #b4b09e; --btn-radius: 2px 2px 9px 9px;
  --btn-shadow: inset 0 -3px 0 #d0ccb9; --fx-color: #bdb596;
}
.studio-button-skin.bg-style-crafted-ivory-piano .bg-face::before {
  inset: 1px 3px 5px; border-left: 1px solid #ffffff; border-right: 1px solid #dcd8c8;
}
.studio-button-skin.bg-style-crafted-ivory-piano .bg-face::after {
  left: 8px; right: 8px; bottom: 3px; height: 1px; background: #aaa58f;
}

/* 快门：齿圈围在圆帽之外；文本版本只保留上下直齿。 */
.studio-button-skin.bg-style-crafted-camera-release {
  --sample-bg: #dfe3e4; --sample-ink: #475057;
  --btn-bg: repeating-conic-gradient(#a9b1b4 0deg 4deg, #d4dada 4deg 12deg);
  --btn-ink: #38454a; --btn-edge: #909ea3; --btn-radius: 50%;
  --btn-shadow: none; --fx-color: #abbcc2;
}
.studio-button-skin.bg-style-crafted-camera-release .bg-face::before {
  inset: 3px; border: 1px solid #aab7ba; border-radius: inherit; background: #e6ebea;
  box-shadow: inset 0 1px 0 #ffffff;
}
.studio-button-skin.bg-style-crafted-camera-release .bg-face::after {
  top: 4px; left: calc(50% - 1px); width: 2px; height: 3px; border-radius: 1px; background: #9e776a;
}
.studio-button-skin.bg-style-crafted-camera-release .bg-text .bg-face {
  border-radius: 10px; background: repeating-linear-gradient(90deg, #a9b1b4 0 1px, #d4dada 1px 3px);
}
.studio-button-skin.bg-style-crafted-camera-release .bg-text .bg-face::before { border-radius: 7px; }

/* 表罩：拱肩轮廓来自仪表器物，刻线只在顶端。 */
.studio-button-skin.bg-style-crafted-meter-glass {
  --sample-bg: #e1e1d9; --sample-ink: #4e5448; --btn-bg: linear-gradient(175deg, #f5f4e8, #e2e5d9);
  --btn-ink: #424f45; --btn-edge: #a5af9b; --btn-radius: 48% 48% 5px 5px;
  --btn-shadow: none; --fx-color: #a0af92;
}
.studio-button-skin.bg-style-crafted-meter-glass .bg-face::before {
  inset: 3px 4px 4px; border-top: 1px solid #ffffff; border-bottom: 1px solid #a8b29e77; border-radius: inherit;
}
.studio-button-skin.bg-style-crafted-meter-glass .bg-face::after {
  top: 5px; left: 30%; right: 30%; height: 3px;
  background: repeating-linear-gradient(90deg, #7c8e7177 0 1px, transparent 1px 5px);
}
.studio-button-skin.bg-style-crafted-meter-glass .bg-text .bg-face { border-radius: 16px 16px 4px 4px; }

/* 推杆帽：浅腰和上下抓握槽保留器物轮廓，不暗示拖动能力。 */
.studio-button-skin.bg-style-crafted-slider-cap {
  --sample-bg: #dfe3e5; --sample-ink: #48545c; --btn-bg: #dfe6e9;
  --btn-ink: #344650; --btn-edge: #9babb5; --btn-radius: 5px;
  --btn-shadow: inset 1px 0 0 #f8fdff, inset -1px 0 0 #bdc8cd; --fx-color: #9bafbd;
}
.studio-button-skin.bg-style-crafted-slider-cap .bg-face {
  clip-path: polygon(0 0, 100% 0, 100% 22%, 96% 34%, 96% 66%, 100% 78%, 100% 100%, 0 100%, 0 78%, 4% 66%, 4% 34%, 0 22%);
}
.studio-button-skin.bg-style-crafted-slider-cap .bg-face::before {
  top: 3px; left: 22%; right: 22%; height: 5px;
  background: repeating-linear-gradient(0deg, #aab9c280 0 1px, #eef5f5 1px 2px);
}
.studio-button-skin.bg-style-crafted-slider-cap .bg-face::after {
  bottom: 3px; left: 22%; right: 22%; height: 5px;
  background: repeating-linear-gradient(0deg, #aab9c280 0 1px, #eef5f5 1px 2px);
}

/* 电台：仅一条侧网，面板不变成扬声器网罩。 */
.studio-button-skin.bg-style-crafted-radio-grille {
  --sample-bg: #e6e0d7; --sample-ink: #514c3f; --btn-bg: #e8e1ce;
  --btn-ink: #494638; --btn-edge: #afa589; --btn-radius: 10px 5px 5px 10px;
  --btn-shadow: none; --fx-color: #aaa079;
}
.studio-button-skin.bg-style-crafted-radio-grille .bg-face::before {
  top: 6px; bottom: 6px; left: 2px; width: 5px; border-radius: 3px 0 0 3px;
  background: repeating-linear-gradient(45deg, transparent 0 2px, #a4987880 2px 3px), repeating-linear-gradient(-45deg, #e4dcc7 0 2px, #a4987880 2px 3px);
}
.studio-button-skin.bg-style-crafted-radio-grille .bg-face::after {
  top: 7px; bottom: 7px; right: 3px; width: 1px; background: #c6bda4;
}
.studio-button-skin.bg-style-crafted-radio-grille .bg-play .bg-face::before { width: 6px; }

/* 翻片：轴缝止于两侧，不划过图标或文本。 */
.studio-button-skin.bg-style-crafted-counter-tab {
  --sample-bg: #dddfdc; --sample-ink: #464d49; --btn-bg: linear-gradient(#49504c 0 50%, #434a47 50%);
  --btn-ink: #eff0e6; --btn-edge: #808b80; --btn-radius: 5px;
  --btn-shadow: none; --fx-color: #a9b49e;
}
.studio-button-skin.bg-style-crafted-counter-tab .bg-face::before {
  top: 50%; left: 0; width: 6px; height: 1px; background: #b2bcaa88;
}
.studio-button-skin.bg-style-crafted-counter-tab .bg-face::after {
  top: 50%; right: 0; width: 6px; height: 1px; background: #b2bcaa88;
}
.studio-button-skin.bg-style-crafted-counter-tab .bg-art { z-index: 1; }
.studio-button-skin.bg-style-crafted-counter-tab .bg-art i:nth-child(1) {
  display: block; left: 1px; top: calc(50% - 3px); width: 2px; height: 6px; border-radius: 2px; background: #99a090;
}
.studio-button-skin.bg-style-crafted-counter-tab .bg-art i:nth-child(2) {
  display: block; right: 1px; top: calc(50% - 3px); width: 2px; height: 6px; border-radius: 2px; background: #99a090;
}

/* 鞍座：独立轴端在外缘，净面椭圆帽覆盖中轴。 */
.studio-button-skin.bg-style-crafted-toggle-saddle {
  --sample-bg: #e0e5e5; --sample-ink: #47575a; --btn-bg: #b9c6c9;
  --btn-ink: #354b51; --btn-edge: #93a7ad; --btn-radius: 12px 24px 12px 24px;
  --btn-shadow: none; --fx-color: #9eb9be;
}
.studio-button-skin.bg-style-crafted-toggle-saddle .bg-face::before {
  inset: 3px 5px; border: 1px solid #adbec0; border-radius: 50%; background: #e2eae9;
  box-shadow: inset 0 1px 0 #f7ffff;
}
.studio-button-skin.bg-style-crafted-toggle-saddle .bg-face::after {
  inset: 42% 1px; border-left: 2px solid #e9eff0; border-right: 2px solid #e9eff0;
}
.studio-button-skin.bg-style-crafted-toggle-saddle .bg-text .bg-face::before { border-radius: 16px; }

/* 票签：浅侧口和底部短齿，中心不放数字、徽章或印章。 */
.studio-button-skin.bg-style-crafted-index-ticket {
  --sample-bg: #e5e1d6; --sample-ink: #534f40; --btn-bg: #f1ecdc;
  --btn-ink: #4d4937; --btn-edge: #b5ad93; --btn-radius: 2px;
  --btn-shadow: none; --fx-color: #afa77e;
}
.studio-button-skin.bg-style-crafted-index-ticket .bg-face {
  clip-path: polygon(0 0, 100% 0, 100% 23%, calc(100% - 3px) 28%, 100% 33%, 100% 67%, calc(100% - 3px) 72%, 100% 77%, 100% 100%, 0 100%, 0 77%, 3px 72%, 0 67%, 0 33%, 3px 28%, 0 23%);
}
.studio-button-skin.bg-style-crafted-index-ticket .bg-face::before {
  left: 6px; right: 6px; top: 3px; height: 1px; background: #d0c9b0;
}
.studio-button-skin.bg-style-crafted-index-ticket .bg-face::after {
  left: 6px; right: 6px; bottom: 3px; height: 2px;
  background: repeating-linear-gradient(90deg, #b5aa8577 0 1px, transparent 1px 4px);
}

/*
 * Original, static charm studies. Every centre is opaque and quiet; ornaments
 * stay at the edge. The host alone owns glyphs, layout, hit regions and .88 scale.
 * Small relief is deliberate: no floating shadows, hover or animation rules.
 * Primary-only extensions are <=5px; icon/text variants never grow a costume.
 */

/* PLAYFUL 01 — a stitched cushion with short, folded side ears. */
.studio-button-skin.bg-style-charm-patch-pup {
  --sample-bg: #eee8de; --sample-ink: #483e36; --fx-color: #af977e;
  --btn-bg: #f3e9dc; --btn-ink: #493a30; --btn-edge: #a38b74;
  --btn-radius: 17px 17px 14px 14px; --btn-shadow: inset 0 -1px 0 #d9c6b0;
}
.studio-button-skin.bg-style-charm-patch-pup .bg-face::before {
  left: 10px; right: 10px; bottom: 4px; border-bottom: 1px dashed #b29b84;
}
.studio-button-skin.bg-style-charm-patch-pup .bg-face::after {
  top: 4px; right: 5px; width: 6px; height: 5px; border: 1px solid #c6ad96;
  border-radius: 2px; background: #e8d8c5; transform: rotate(12deg);
}
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(2) {
  display: block; top: 5px; width: 11px; height: 22px;
  border: 1px solid #a38b74; border-radius: 8px 8px 7px 7px; background: #cebaa4;
}
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(1) { left: -4px; transform: rotate(8deg); }
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(2) { right: -4px; transform: rotate(-8deg); }
.studio-button-skin.bg-style-charm-patch-pup .bg-text { border-radius: 11px; }

/* PLAYFUL 02 — wide, shallow round ears and a felt pocket opening. */
.studio-button-skin.bg-style-charm-koala-pocket {
  --sample-bg: #e8ece7; --sample-ink: #3b4943; --fx-color: #8eaaa0;
  --btn-bg: #e9eeea; --btn-ink: #34463d; --btn-edge: #90a296;
  --btn-radius: 44% 44% 40% 40%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-koala-pocket .bg-face::before {
  left: 9px; right: 9px; bottom: 4px; height: 4px;
  border-bottom: 1px solid #9aaa9d; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(2) {
  display: block; top: 7px; width: 18px; height: 19px; border-radius: 50%;
  border: 1px solid #90a296; background: #cdd8d0; box-shadow: inset 0 0 0 3px #e2e9e3;
}
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(1) { left: -5px; }
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(2) { right: -5px; }
.studio-button-skin.bg-style-charm-koala-pocket .bg-text { border-radius: 15px 15px 19px 19px; }

/* PLAYFUL 03 — a tall pale pebble, narrow wings and two tiny feet. */
.studio-button-skin.bg-style-charm-penguin-pebble {
  --sample-bg: #e6e9ed; --sample-ink: #36434e; --fx-color: #91a4b5;
  --btn-bg: #f1f0e8; --btn-ink: #344452; --btn-edge: #788a99;
  --btn-radius: 48% 48% 38% 38% / 56% 56% 35% 35%; --btn-shadow: inset 0 -1px 0 #d0d8dc;
}
.studio-button-skin.bg-style-charm-penguin-pebble .bg-face::before {
  left: 5px; top: 12px; bottom: 12px; width: 2px; border-radius: 50%; background: #c3cfd3;
}
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(2) {
  display: block; top: 18px; width: 9px; height: 24px; border-radius: 70% 30% 70% 30%; background: #718697;
}
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(1) { left: -3px; transform: rotate(8deg); }
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(2) { right: -3px; transform: scaleX(-1) rotate(8deg); }
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(3) {
  display: block; bottom: -2px; left: calc(50% - 13px); width: 9px; height: 5px;
  border-radius: 60%; background: #c3a17f; box-shadow: 17px 0 0 #c3a17f;
}
.studio-button-skin.bg-style-charm-penguin-pebble .bg-text { border-radius: 20px 20px 14px 14px; }

/* PLAYFUL 04 — tiny branched gills; no face decoration in the glyph zone. */
.studio-button-skin.bg-style-charm-axolotl-frill {
  --sample-bg: #eee6e4; --sample-ink: #543e40; --fx-color: #bc9197;
  --btn-bg: #f4e7e4; --btn-ink: #583c41; --btn-edge: #b39196;
  --btn-radius: 41% 41% 35% 35%; --btn-shadow: inset 0 -1px 0 #ddc5c7;
}
.studio-button-skin.bg-style-charm-axolotl-frill .bg-face::before {
  left: 11px; right: 11px; bottom: 4px; height: 3px; border-bottom: 1px solid #c4a2a5; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-axolotl-frill .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-axolotl-frill .bg-play .bg-art i:nth-child(2) {
  display: block; top: 13px; width: 10px; height: 28px; background: #d6b1b5;
  clip-path: polygon(10% 0, 100% 15%, 70% 36%, 100% 46%, 70% 67%, 90% 86%, 20% 100%, 0 80%, 25% 61%, 0 46%, 25% 25%, 0 12%);
}
.studio-button-skin.bg-style-charm-axolotl-frill .bg-play .bg-art i:nth-child(1) { left: -5px; }
.studio-button-skin.bg-style-charm-axolotl-frill .bg-play .bg-art i:nth-child(2) { right: -5px; transform: scaleX(-1); }
.studio-button-skin.bg-style-charm-axolotl-frill .bg-text { border-radius: 18px; }

/* PLAYFUL 05 — two low studs, a mould seam, no chunky extrusion. */
.studio-button-skin.bg-style-charm-toy-brick {
  --sample-bg: #eeece1; --sample-ink: #4c4836; --fx-color: #b7aa72;
  --btn-bg: #f1eddb; --btn-ink: #4c4731; --btn-edge: #a89e7a;
  --btn-radius: 11px; --btn-shadow: inset 0 -2px 0 #ddd5b8;
}
.studio-button-skin.bg-style-charm-toy-brick .bg-face::before {
  left: 7px; right: 7px; bottom: 4px; border-bottom: 1px solid #bcb18a;
}
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(2) {
  display: block; top: -4px; width: 13px; height: 9px; border: 1px solid #a89e7a;
  border-radius: 4px 4px 1px 1px; background: #e0d6ad;
}
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(1) { left: 10px; }
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(2) { right: 10px; }
.studio-button-skin.bg-style-charm-toy-brick .bg-text { border-radius: 9px; }

/* PLAYFUL 06 — a compact balloon ending in a short knot, not a dangling cord. */
.studio-button-skin.bg-style-charm-balloon-tab {
  --sample-bg: #e4eaee; --sample-ink: #3d4d5c; --fx-color: #96adbf;
  --btn-bg: #e7edf2; --btn-ink: #384d60; --btn-edge: #91a6b5;
  --btn-radius: 49% 46% 42% 43% / 44% 45% 54% 55%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-balloon-tab .bg-face::before {
  left: 5px; top: 10px; width: 6px; height: 11px; border-left: 2px solid #f8fbfb; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-balloon-tab .bg-play .bg-art i:nth-child(1) {
  display: block; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 7px;
  background: #aebfca; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.studio-button-skin.bg-style-charm-balloon-tab .bg-text { border-radius: 24px; }

/* PLAYFUL 07 — one round puzzle stud and a small open socket. */
.studio-button-skin.bg-style-charm-puzzle-bud {
  --sample-bg: #e8ece2; --sample-ink: #404d3b; --fx-color: #9dae8d;
  --btn-bg: #eaf0e3; --btn-ink: #3c4c33; --btn-edge: #97a48b;
  --btn-radius: 12px 9px 12px 9px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-puzzle-bud .bg-face {
  -webkit-mask: radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px);
  mask: radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px);
}
.studio-button-skin.bg-style-charm-puzzle-bud .bg-face::after {
  left: 6px; bottom: 5px; width: 8px; border-bottom: 1px solid #a8b59a;
}
.studio-button-skin.bg-style-charm-puzzle-bud .bg-play .bg-art i:nth-child(1) {
  display: block; top: -5px; left: calc(50% - 7px); width: 14px; height: 13px;
  border: 1px solid #97a48b; border-radius: 50%; background: #dae5ce;
}

/* PLAYFUL 08 — a flat-bottom felt boat with a single small tail. */
.studio-button-skin.bg-style-charm-felt-whale {
  --sample-bg: #e2e9eb; --sample-ink: #3d4e55; --fx-color: #8ea9b0;
  --btn-bg: #e4ecee; --btn-ink: #344e57; --btn-edge: #8da5ac;
  --btn-radius: 46% 48% 24% 29%; --btn-shadow: inset 0 -1px 0 #c6d8dc;
}
.studio-button-skin.bg-style-charm-felt-whale .bg-face::before {
  left: 7px; right: 7px; bottom: 4px; height: 4px;
  border-bottom: 1px dashed #9cb4ba; border-radius: 30%;
}
.studio-button-skin.bg-style-charm-felt-whale .bg-play .bg-art i:nth-child(1) {
  display: block; right: -5px; bottom: 4px; width: 13px; height: 18px; background: #a9c2c9;
  clip-path: polygon(0 55%, 95% 0, 83% 45%, 100% 100%, 25% 90%); border-radius: 4px;
}
.studio-button-skin.bg-style-charm-felt-whale .bg-text { border-radius: 22px 22px 12px 15px; }

/* PLAYFUL 09 — tucked cloth corners and a low stitched hem. */
.studio-button-skin.bg-style-charm-duvet-tuck {
  --sample-bg: #eae7df; --sample-ink: #494439; --fx-color: #b7ac91;
  --btn-bg: #f1ede3; --btn-ink: #4c4332; --btn-edge: #aea38d;
  --btn-radius: 18px 11px 18px 11px; --btn-shadow: inset 0 -1px 0 #d9d0bd;
}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-face::before {
  top: 4px; left: 4px; width: 8px; height: 8px; background: #dbd2c0;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 5px 0 0;
}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-face::after {
  right: 5px; bottom: 4px; width: 10px; height: 5px;
  border-bottom: 1px dashed #aea087; border-right: 1px solid #c5b99e; border-radius: 0 0 4px;
}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-play .bg-art i:nth-child(1) {
  display: block; inset: 2px -2px; border: 1px solid #c6bba4; border-radius: 15px 22px 15px 22px; background: #e1d7c5;
}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-text { border-radius: 13px 8px 13px 8px; }

/* PLAYFUL 10 — a pale wish-pod on a restrained vermilion plinth. */
.studio-button-skin.bg-style-charm-daruma-pod {
  --sample-bg: #eee6df; --sample-ink: #523e34; --fx-color: #bd9480;
  --btn-bg: #f5eee2; --btn-ink: #573a30; --btn-edge: #b39987;
  --btn-radius: 43% 43% 48% 48% / 49% 49% 40% 40%; --btn-shadow: inset 0 -2px 0 #c5a091;
}
.studio-button-skin.bg-style-charm-daruma-pod .bg-face::before {
  top: 7px; left: 8px; width: 5px; height: 2px; background: #c1a691; transform: rotate(-24deg); border-radius: 2px;
}
.studio-button-skin.bg-style-charm-daruma-pod .bg-face::after {
  top: 7px; right: 8px; width: 5px; height: 2px; background: #c1a691; transform: rotate(24deg); border-radius: 2px;
}
.studio-button-skin.bg-style-charm-daruma-pod .bg-play .bg-art i:nth-child(1) {
  display: block; left: 9px; right: 9px; bottom: -3px; height: 12px; border: 1px solid #a77866;
  border-radius: 2px 2px 9px 9px; background: #c39a87;
}
.studio-button-skin.bg-style-charm-daruma-pod .bg-text { border-radius: 20px 20px 15px 15px; }

/* SWEET 01 — slim side loops, a calm cuff face and a narrow satin hem. */
.studio-button-skin.bg-style-charm-ribbon-cuff {
  --sample-bg: #eee8e3; --sample-ink: #514347; --fx-color: #b9979e;
  --btn-bg: #f5eeea; --btn-ink: #583e48; --btn-edge: #b59ba1;
  --btn-radius: 12px 16px 12px 16px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-face::before {
  left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px;
  background: linear-gradient(#d4b9be, #e4d3d4);
}
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(2) {
  display: block; top: 15px; width: 13px; height: 23px;
  border: 2px solid #c2a3ad; background: #ede0e0; border-radius: 65% 35% 35% 65%;
}
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(1) { left: -4px; transform: rotate(-8deg); }
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(2) { right: -4px; transform: scaleX(-1) rotate(-8deg); }
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-text { border-radius: 10px; }

/* SWEET 02 — pleats occupy only a shallow upper brim. */
.studio-button-skin.bg-style-charm-pleat-bonnet {
  --sample-bg: #e9e5eb; --sample-ink: #4a4053; --fx-color: #aca0b9;
  --btn-bg: #f1edf3; --btn-ink: #50405d; --btn-edge: #a99cb4;
  --btn-radius: 48% 48% 24% 24%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-pleat-bonnet .bg-face::before {
  left: 12px; right: 12px; top: 3px; height: 4px; border-radius: 50%;
  background: repeating-linear-gradient(90deg, #c2b6cc 0 1px, #ebe3ef 1px 4px);
}
.studio-button-skin.bg-style-charm-pleat-bonnet .bg-face::after {
  left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 2px; background: #d3c8db;
}
.studio-button-skin.bg-style-charm-pleat-bonnet .bg-play .bg-art i:nth-child(1) {
  display: block; inset: -3px -3px 13px; border: 1px solid #afa0bb; border-radius: 49% 49% 20% 20%;
  background: repeating-conic-gradient(from 2deg at 50% 100%, #e2d9e9 0 10deg, #c4b8ce 10deg 12deg);
}
.studio-button-skin.bg-style-charm-pleat-bonnet .bg-text { border-radius: 15px 15px 10px 10px; }

/* SWEET 03 — a very thin cream filling below a little square cake. */
.studio-button-skin.bg-style-charm-petit-four {
  --sample-bg: #ece5df; --sample-ink: #544137; --fx-color: #b99c8d;
  --btn-bg: #f5eee5; --btn-ink: #573e36; --btn-edge: #b49b88;
  --btn-radius: 12px 12px 6px 6px; --btn-shadow: inset 0 -2px 0 #ddc6b3;
}
.studio-button-skin.bg-style-charm-petit-four .bg-face::before {
  bottom: 4px; left: 6px; right: 6px; border-bottom: 1px solid #bba089;
}
.studio-button-skin.bg-style-charm-petit-four .bg-face::after {
  top: 4px; right: 7px; width: 7px; height: 3px; background: #c49ca0; border-radius: 4px 1px; transform: rotate(-12deg);
}
.studio-button-skin.bg-style-charm-petit-four .bg-play .bg-art i:nth-child(1) {
  display: block; inset: 9px 2px -3px; border: 1px solid #b59d89; border-radius: 8px;
  background: linear-gradient(#f0e3d1 0 75%, #e8d3b6 75% 84%, #fbf2de 84% 91%, #d8c0a1 91%);
}
.studio-button-skin.bg-style-charm-petit-four .bg-text { border-radius: 10px 10px 6px 6px; }

/* SWEET 04 — six soft sugar facets; side planes never cross the centre. */
.studio-button-skin.bg-style-charm-sugar-plum {
  --sample-bg: #eae4ea; --sample-ink: #514054; --fx-color: #b29bb8;
  --btn-bg: #eee5ee; --btn-ink: #593b59; --btn-edge: transparent;
  --btn-radius: 12px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-sugar-plum .bg-face {
  clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
  background: linear-gradient(90deg, #c7aecb 0 4px, #eee5ee 4px calc(100% - 4px), #d7c0d9 calc(100% - 4px));
}
.studio-button-skin.bg-style-charm-sugar-plum .bg-face::before {
  left: 23%; right: 23%; top: 3px; border-top: 1px solid #faf5fa;
}
.studio-button-skin.bg-style-charm-sugar-plum .bg-face::after {
  left: calc(50% - 6px); width: 12px; bottom: 4px; border-bottom: 1px dotted #b294b7;
}
.studio-button-skin.bg-style-charm-sugar-plum .bg-text .bg-face {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}

/* SWEET 05 — gingham restricted to a short top seam and a fine primary hem. */
.studio-button-skin.bg-style-charm-gingham-tab {
  --sample-bg: #e7e9e1; --sample-ink: #414b3f; --fx-color: #9ba68e;
  --btn-bg: #f2f1e8; --btn-ink: #414d36; --btn-edge: #9fa78c;
  --btn-radius: 6px 6px 11px 11px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-gingham-tab .bg-face::before {
  left: 7px; right: 7px; top: 3px; height: 4px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #b4bea680 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg, #a8b29870 0 2px, #f2f1e8 2px 4px);
}
.studio-button-skin.bg-style-charm-gingham-tab .bg-play .bg-art i:nth-child(1) {
  display: block; left: 6px; right: 6px; bottom: -3px; height: 7px; background: #bdc6aa;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 80% 70%, 70% 100%, 60% 70%, 50% 100%, 40% 70%, 30% 100%, 20% 70%, 10% 100%, 0 70%);
}
.studio-button-skin.bg-style-charm-gingham-tab .bg-text { border-radius: 6px; }

/* SWEET 06 — a small tilted meringue tip; the glyph itself stays upright. */
.studio-button-skin.bg-style-charm-meringue-kiss {
  --sample-bg: #eee9df; --sample-ink: #50463b; --fx-color: #c4ae8d;
  --btn-bg: #f5efe3; --btn-ink: #594631; --btn-edge: #b9a68d;
  --btn-radius: 54% 13% 43% 40% / 48% 15% 46% 43%; --btn-shadow: inset 0 -1px 0 #dfcdb3;
}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-face::before {
  top: 8px; left: 5px; bottom: 11px; width: 5px; border-left: 1px solid #fffaf0; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-face::after {
  left: 9px; right: 9px; bottom: 4px; height: 4px; border-bottom: 1px solid #cbb79b; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-play .bg-art i:nth-child(1) {
  display: block; left: 6px; right: 5px; bottom: -2px; height: 14px;
  border: 1px solid #c2b098; border-radius: 50%; background: #e8d9c0;
}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-text { border-radius: 19px 9px 19px 19px; }

/* SWEET 07 — four pillowy corners, shallow waist and a short lower seam. */
.studio-button-skin.bg-style-charm-honey-petal {
  --sample-bg: #ece9dc; --sample-ink: #4c4937; --fx-color: #b7a773;
  --btn-bg: #f3edd9; --btn-ink: #51472d; --btn-edge: #b6a577;
  --btn-radius: 38%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-honey-petal .bg-face {
  -webkit-mask: radial-gradient(ellipse 3px 7px at 0 50%, transparent 95%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(ellipse 3px 7px at 100% 50%, transparent 95%, #000 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(ellipse 3px 7px at 0 50%, transparent 95%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(ellipse 3px 7px at 100% 50%, transparent 95%, #000 100%) right / 51% 100% no-repeat;
}
.studio-button-skin.bg-style-charm-honey-petal .bg-face::after {
  left: calc(50% - 5px); bottom: 4px; width: 10px; height: 3px; border-bottom: 1px solid #c2ad78; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-honey-petal .bg-play .bg-art i:nth-child(1) {
  display: block; inset: -2px; border: 1px solid #d0bd88; border-radius: 40%; background: #eee1b9;
  transform: rotate(6deg);
}
.studio-button-skin.bg-style-charm-honey-petal .bg-text { border-radius: 15px; }
.studio-button-skin.bg-style-charm-honey-petal .bg-text .bg-face { -webkit-mask: none; mask: none; }

/* SWEET 08 — slim spool ends and a calm flat ribbon between them. */
.studio-button-skin.bg-style-charm-ribbon-spool {
  --sample-bg: #eee5e6; --sample-ink: #534148; --fx-color: #bd9da7;
  --btn-bg: #f3e8eb; --btn-ink: #573b49; --btn-edge: #b99ca8;
  --btn-radius: 7px 7px 12px 12px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-face {
  clip-path: polygon(0 0, 100% 0, 94% 25%, 94% 75%, 100% 100%, 0 100%, 6% 75%, 6% 25%);
}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-face::before {
  left: 5px; top: 8px; bottom: 8px; border-left: 1px solid #cfb4c0;
}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-face::after {
  right: 5px; top: 8px; bottom: 8px; border-right: 1px solid #cfb4c0;
}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(2) {
  display: block; left: 2px; right: 2px; height: 8px; border: 1px solid #b99ca8;
  border-radius: 6px; background: #dfc9d2;
}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(1) { top: -2px; }
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(2) { bottom: -2px; }
.studio-button-skin.bg-style-charm-ribbon-spool .bg-text .bg-face { clip-path: none; }

/* SWEET 09 — small clipped wafer corners with a narrow crosshatch crust. */
.studio-button-skin.bg-style-charm-wafer-seal {
  --sample-bg: #eae6dd; --sample-ink: #504638; --fx-color: #b5a17e;
  --btn-bg: #f2ebde; --btn-ink: #53432d; --btn-edge: #b6a182;
  --btn-radius: 3px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-wafer-seal .bg-face {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.studio-button-skin.bg-style-charm-wafer-seal .bg-face::before {
  left: 8px; right: 8px; bottom: 3px; height: 4px;
  background: repeating-linear-gradient(45deg, #c3ae8d 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, #d4c2a7 0 1px, transparent 1px 4px);
}
.studio-button-skin.bg-style-charm-wafer-seal .bg-face::after {
  left: 8px; right: 8px; top: 3px; border-top: 1px solid #fff9ee;
}
.studio-button-skin.bg-style-charm-wafer-seal .bg-play .bg-art i:nth-child(1) {
  display: block; inset: -1px; background: #cfba97;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

/* SWEET 10 — short ribbing and side stitches frame an unpatterned knit pocket. */
.studio-button-skin.bg-style-charm-knit-pocket {
  --sample-bg: #ece8e0; --sample-ink: #4e4338; --fx-color: #b3a089;
  --btn-bg: #f2ece3; --btn-ink: #51402f; --btn-edge: #b1a08a;
  --btn-radius: 5px 5px 40% 40%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-knit-pocket .bg-face::before {
  top: 3px; left: 5px; right: 5px; height: 4px;
  background: repeating-linear-gradient(90deg, #c9b79e 0 1px, #e5d9c7 1px 3px);
}
.studio-button-skin.bg-style-charm-knit-pocket .bg-face::after {
  inset: 9px 4px 8px; border-left: 1px dashed #c5b49d; border-right: 1px dashed #c5b49d;
  border-radius: 0 0 18px 18px;
}
.studio-button-skin.bg-style-charm-knit-pocket .bg-play .bg-art i:nth-child(1) {
  display: block; right: 9px; bottom: -2px; width: 9px; height: 8px;
  border: 1px solid #b7987a; border-radius: 1px 1px 3px 3px; background: #d4bb9d;
}
.studio-button-skin.bg-style-charm-knit-pocket .bg-text { border-radius: 5px 5px 13px 13px; }

/* POP 01 — original interlocking tabs, a large quiet face and thin outlines. */
.studio-button-skin.bg-style-charm-tab-stack {
  --sample-bg: #e8e9e2; --sample-ink: #414a42; --fx-color: #a7b18c;
  --btn-bg: #f0f1e9; --btn-ink: #36473c; --btn-edge: #91a08c;
  --btn-radius: 9px 5px 9px 5px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-tab-stack .bg-face::before {
  left: 3px; top: 10px; width: 3px; height: 9px; border-radius: 1px; background: #b2bf8e;
}
.studio-button-skin.bg-style-charm-tab-stack .bg-face::after {
  right: 6px; bottom: 4px; width: 8px; border-bottom: 1px solid #bdc4b5;
}
.studio-button-skin.bg-style-charm-tab-stack .bg-play .bg-art i:nth-child(1) {
  display: block; top: 7px; bottom: 7px; left: -3px; width: 10px;
  border: 1px solid #91a078; border-radius: 4px 1px 1px 4px; background: #c5d0a4;
}
.studio-button-skin.bg-style-charm-tab-stack .bg-play .bg-art i:nth-child(2) {
  display: block; bottom: -3px; right: 7px; width: 17px; height: 9px;
  border: 1px solid #8e9e98; border-radius: 1px 1px 4px 4px; background: #b7c5bf;
}
.studio-button-skin.bg-style-charm-tab-stack .bg-text { border-radius: 7px; }

/* POP 02 — one open notch with an inset wedge, not a complete coloured ring. */
.studio-button-skin.bg-style-charm-notch-disc {
  --sample-bg: #e6e9e7; --sample-ink: #3b4b50; --fx-color: #afb184;
  --btn-bg: #eff1eb; --btn-ink: #354953; --btn-edge: #91a2a5;
  --btn-radius: 50%; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-notch-disc .bg-face {
  -webkit-mask: radial-gradient(circle at 72% 0, transparent 3px, #000 3.5px);
  mask: radial-gradient(circle at 72% 0, transparent 3px, #000 3.5px);
}
.studio-button-skin.bg-style-charm-notch-disc .bg-face::before {
  top: 3px; left: 9px; width: 8px; height: 4px; border-radius: 4px 1px; background: #c5c594; transform: rotate(-18deg);
}
.studio-button-skin.bg-style-charm-notch-disc .bg-face::after {
  left: 8px; right: 8px; bottom: 4px; height: 7px; border-bottom: 1px solid #b5c3c3; border-radius: 50%;
}
.studio-button-skin.bg-style-charm-notch-disc .bg-text { border-radius: 22px; }

/* POP 03 — opposite stepped corners receive two small construction pieces. */
.studio-button-skin.bg-style-charm-jigsaw-grid {
  --sample-bg: #e5e9ea; --sample-ink: #3d4b54; --fx-color: #9bb0be;
  --btn-bg: #eef0ed; --btn-ink: #354953; --btn-edge: #8da2aa;
  --btn-radius: 4px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-face {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px, 7px 7px);
}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-face::before {
  left: 10px; top: 3px; width: 9px; border-top: 1px solid #b7c8cc;
}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-face::after {
  bottom: 3px; right: 10px; width: 9px; border-bottom: 1px solid #c9b6a7;
}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-play .bg-art i:nth-child(1) {
  display: block; top: -1px; left: -1px; width: 7px; height: 7px; border-radius: 2px; background: #a3bac3;
}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-play .bg-art i:nth-child(2) {
  display: block; bottom: -1px; right: -1px; width: 7px; height: 7px; border-radius: 2px; background: #c9ab96;
}

/* POP 04 — an architectural arch with only two pixels of visible base. */
.studio-button-skin.bg-style-charm-offset-arch {
  --sample-bg: #ebe6e2; --sample-ink: #51433d; --fx-color: #b7998d;
  --btn-bg: #f1ebe5; --btn-ink: #573e37; --btn-edge: #ad9488;
  --btn-radius: 48% 48% 5px 5px; --btn-shadow: inset 0 -1px 0 #d8c6b9;
}
.studio-button-skin.bg-style-charm-offset-arch .bg-face::after {
  left: 9px; right: 9px; bottom: 4px; border-bottom: 1px solid #bba496;
}
.studio-button-skin.bg-style-charm-offset-arch .bg-play .bg-art i:nth-child(1) {
  display: block; inset: 5px -2px -2px 2px; border: 1px solid #b99c8d;
  border-radius: 46% 46% 5px 5px; background: #d6b7a8;
}
.studio-button-skin.bg-style-charm-offset-arch .bg-text { border-radius: 20px 20px 5px 5px; }

/* POP 05 — opposing short brackets make a frame without filling the surface. */
.studio-button-skin.bg-style-charm-studio-bracket {
  --sample-bg: #e1e8e7; --sample-ink: #3b4e4c; --fx-color: #92b3a9;
  --btn-bg: #eaf0ec; --btn-ink: #304d49; --btn-edge: #8ba49e;
  --btn-radius: 10px 18px 10px 18px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-studio-bracket .bg-face::before {
  left: 4px; top: 12px; bottom: 12px; border-left: 2px solid #b2cbbd; border-radius: 2px;
}
.studio-button-skin.bg-style-charm-studio-bracket .bg-face::after {
  right: 4px; top: 12px; bottom: 12px; border-right: 2px solid #b0c1c9; border-radius: 2px;
}
.studio-button-skin.bg-style-charm-studio-bracket .bg-play .bg-art i:nth-child(1) {
  display: block; left: -3px; top: 8px; bottom: 8px; width: 11px;
  border: 2px solid #98b6a9; border-right: 0; border-radius: 6px 0 0 6px;
}
.studio-button-skin.bg-style-charm-studio-bracket .bg-play .bg-art i:nth-child(2) {
  display: block; right: -3px; top: 12px; bottom: 12px; width: 11px;
  border: 2px solid #96afbd; border-left: 0; border-radius: 0 6px 6px 0;
}
.studio-button-skin.bg-style-charm-studio-bracket .bg-text { border-radius: 10px 14px; }

/* POP 06 — small corner overlaps, not diagonal stripes through the text. */
.studio-button-skin.bg-style-charm-corner-weave {
  --sample-bg: #eae7e0; --sample-ink: #4d4940; --fx-color: #aaab91;
  --btn-bg: #f1eee5; --btn-ink: #474738; --btn-edge: #a6a28c;
  --btn-radius: 6px 15px 6px 15px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-corner-weave .bg-face::before {
  left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 3px 1px;
  background: linear-gradient(135deg, #b8c0a2 0 46%, #f0ecdf 47% 55%, #cdb1a1 56%);
}
.studio-button-skin.bg-style-charm-corner-weave .bg-face::after {
  right: 2px; bottom: 2px; width: 8px; height: 8px; border-radius: 3px 1px;
  background: linear-gradient(135deg, #cdb1a1 0 46%, #f0ecdf 47% 55%, #b8c0a2 56%);
}
.studio-button-skin.bg-style-charm-corner-weave .bg-play .bg-art i:nth-child(1) {
  display: block; left: -2px; top: 6px; width: 9px; height: 13px;
  border-radius: 2px; background: #c3ccb1;
}
.studio-button-skin.bg-style-charm-corner-weave .bg-play .bg-art i:nth-child(2) {
  display: block; right: -2px; bottom: 6px; width: 9px; height: 13px;
  border-radius: 2px; background: #d5b9a8;
}
.studio-button-skin.bg-style-charm-corner-weave .bg-text { border-radius: 6px 12px; }

/* POP 07 — quiet capsule with colour restricted to five-pixel end caps. */
.studio-button-skin.bg-style-charm-capsule-split {
  --sample-bg: #e7e9e2; --sample-ink: #414b41; --fx-color: #a5b298;
  --btn-bg: #f2f1e7; --btn-ink: #3e4a39; --btn-edge: #9aa68f;
  --btn-radius: 24px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-capsule-split .bg-face::before {
  left: 2px; top: 8px; bottom: 8px; width: 5px; border-right: 1px solid #acbaa1;
  border-radius: 8px 1px 1px 8px; background: #c7d2bb;
}
.studio-button-skin.bg-style-charm-capsule-split .bg-face::after {
  right: 2px; top: 8px; bottom: 8px; width: 5px; border-left: 1px solid #c3ad94;
  border-radius: 1px 8px 8px 1px; background: #e2ceb5;
}
.studio-button-skin.bg-style-charm-capsule-split .bg-play .bg-art i:nth-child(1) {
  display: block; inset: 1px -2px; border: 1px solid #c5cbb8; border-radius: 25px;
}

/* POP 08 — a single shallow loop sits above a compact index label. */
.studio-button-skin.bg-style-charm-loop-label {
  --sample-bg: #e5e7ec; --sample-ink: #414858; --fx-color: #a1abc3;
  --btn-bg: #eceef3; --btn-ink: #3d4761; --btn-edge: #9aa5bb;
  --btn-radius: 6px 6px 12px 12px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-loop-label .bg-face::before {
  left: 7px; top: 4px; width: 9px; height: 2px; border-radius: 2px; background: #bec6d8;
}
.studio-button-skin.bg-style-charm-loop-label .bg-face::after {
  right: 7px; bottom: 4px; width: 11px; border-bottom: 1px solid #b0bbd0;
}
.studio-button-skin.bg-style-charm-loop-label .bg-play .bg-art i:nth-child(1) {
  display: block; left: calc(50% - 10px); top: -4px; width: 20px; height: 10px;
  border: 2px solid #aab5ca; border-radius: 6px 6px 2px 2px;
}
.studio-button-skin.bg-style-charm-loop-label .bg-text { border-radius: 6px; }

/* POP 09 — fine paper teeth only on the primary; registration dots at an edge. */
.studio-button-skin.bg-style-charm-riso-stamp {
  --sample-bg: #eee8df; --sample-ink: #534737; --fx-color: #bba17e;
  --btn-bg: #f4eee1; --btn-ink: #58452f; --btn-edge: #b5a182;
  --btn-radius: 6px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-riso-stamp .bg-face::before {
  left: 3px; top: 8px; bottom: 8px; width: 3px;
  background: radial-gradient(circle, #bda98a 0 0.7px, transparent 1px) 0 0 / 3px 4px;
}
.studio-button-skin.bg-style-charm-riso-stamp .bg-face::after {
  right: 5px; bottom: 4px; width: 9px; height: 2px; background: #d0b190;
}
.studio-button-skin.bg-style-charm-riso-stamp .bg-play .bg-face {
  -webkit-mask: radial-gradient(circle at 0 3px, transparent 1.5px, #000 2px) left / 51% 6px repeat-y,
    radial-gradient(circle at 100% 3px, transparent 1.5px, #000 2px) right / 51% 6px repeat-y;
  mask: radial-gradient(circle at 0 3px, transparent 1.5px, #000 2px) left / 51% 6px repeat-y,
    radial-gradient(circle at 100% 3px, transparent 1.5px, #000 2px) right / 51% 6px repeat-y;
}

/* POP 10 — one restrained opposing step at each end of a bone-white plate. */
.studio-button-skin.bg-style-charm-step-totem {
  --sample-bg: #e5e9e9; --sample-ink: #3b4b52; --fx-color: #9caeb6;
  --btn-bg: #eff0e8; --btn-ink: #344a56; --btn-edge: #96a8ae;
  --btn-radius: 3px; --btn-shadow: none;
}
.studio-button-skin.bg-style-charm-step-totem .bg-face {
  clip-path: polygon(0 5px, 8px 5px, 8px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 8px) calc(100% - 5px), calc(100% - 8px) 100%, 0 100%);
}
.studio-button-skin.bg-style-charm-step-totem .bg-face::before {
  left: 11px; right: 5px; top: 3px; border-top: 1px solid #bbc7c9;
}
.studio-button-skin.bg-style-charm-step-totem .bg-face::after {
  left: 6px; bottom: 3px; width: 8px; height: 2px; background: #cbbda2;
}
.studio-button-skin.bg-style-charm-step-totem .bg-play .bg-art i:nth-child(1) {
  display: block; inset: -1px; background: #a5b5bb;
  clip-path: polygon(0 5px, 8px 5px, 8px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 8px) calc(100% - 5px), calc(100% - 8px) 100%, 0 100%);
}

/* Original luminous collection: 8 glass / 6 cyber / 6 jewel.
 * Static, opaque glyph beds remain legible on light and dark app surfaces.
 * No host geometry, interaction, glyph, motion or arbitrary variable ownership.
 * Fine construction stays at the rim. Extra ornaments are explicitly play-only.
 * .88 scaling and >=44pt touch regions remain entirely with the existing host.
 */

/* GLASS: tapered plate, hinge, arch, pleated rim, waist, lamella, pebble, folio. */
.studio-button-skin.bg-style-luminous-glass-keystone {
  --btn-bg: linear-gradient(120deg, #b4c5cb, #f8fbfc 32%, #a7bac3 70%, #d4dfe3);
  --btn-ink: #304954; --btn-edge: transparent; --btn-radius: 3px; --btn-shadow: none;
  --sample-bg: #e4e9e9; --sample-ink: #384b52; --fx-color: #adc8d2;
}
.studio-button-skin.bg-style-luminous-glass-keystone .bg-face {
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%);
}
.studio-button-skin.bg-style-luminous-glass-keystone .bg-face::before {
  inset: 2px; clip-path: inherit; background: #eef3f4;
}
.studio-button-skin.bg-style-luminous-glass-keystone .bg-face::after {
  left: 8px; right: 8px; top: 4px; height: 1px; background: #ffffff;
}
.studio-button-skin.bg-style-luminous-glass-keystone .bg-play .bg-art i:nth-child(1) {
  display: block; bottom: 0; left: 12px; right: 12px; height: 2px; background: #a2b6be;
}

.studio-button-skin.bg-style-luminous-glass-hinge {
  --btn-bg: #eaf0ed; --btn-ink: #354d46; --btn-edge: #a8bdb5; --btn-radius: 5px 15px 15px 5px;
  --btn-shadow: none; --sample-bg: #e1e7e2; --sample-ink: #3c4e43; --fx-color: #abc4b9;
}
.studio-button-skin.bg-style-luminous-glass-hinge .bg-face::before {
  left: 3px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #a0b2ab, #f8fcfa 50%, #bdcfc7);
}
.studio-button-skin.bg-style-luminous-glass-hinge .bg-face::after {
  inset: 3px 3px 3px 8px; border-top: 1px solid #ffffff; border-right: 1px solid #d0ddd7;
  border-radius: 0 11px 11px 0;
}
.studio-button-skin.bg-style-luminous-glass-hinge .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-luminous-glass-hinge .bg-play .bg-art i:nth-child(2) {
  display: block; left: 1px; width: 3px; height: 4px; border-radius: 1px; background: #7e9990;
}
.studio-button-skin.bg-style-luminous-glass-hinge .bg-play .bg-art i:nth-child(1) { top: -1px; }
.studio-button-skin.bg-style-luminous-glass-hinge .bg-play .bg-art i:nth-child(2) { bottom: -1px; }

.studio-button-skin.bg-style-luminous-glass-arch {
  --btn-bg: #e7eff1; --btn-ink: #304b58; --btn-edge: #a4b9c1; --btn-radius: 25px 25px 6px 6px;
  --btn-shadow: none; --sample-bg: #e0e6e9; --sample-ink: #3b505b; --fx-color: #a6c5cf;
}
.studio-button-skin.bg-style-luminous-glass-arch .bg-face::before {
  inset: 3px 4px 5px; border-top: 1px solid #ffffff; border-left: 1px solid #ccdadf;
  border-right: 1px solid #ccdadf; border-radius: 23px 23px 2px 2px;
}
.studio-button-skin.bg-style-luminous-glass-arch .bg-face::after {
  left: 8px; right: 8px; bottom: 3px; height: 2px;
  background: linear-gradient(#b4c7ce 0 1px, #faffff 1px);
}

.studio-button-skin.bg-style-luminous-glass-pleat {
  --btn-bg: #e9eef0; --btn-ink: #35444f; --btn-edge: #b2c0c8; --btn-radius: 2px;
  --btn-shadow: none; --sample-bg: #e2e5e8; --sample-ink: #40505b; --fx-color: #b8cbd5;
}
.studio-button-skin.bg-style-luminous-glass-pleat .bg-face {
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.studio-button-skin.bg-style-luminous-glass-pleat .bg-face::before {
  left: 7px; right: 7px; top: 2px; height: 3px;
  background: repeating-linear-gradient(90deg, #afbec7 0 1px, #f9fdff 1px 2px, transparent 2px 4px);
}
.studio-button-skin.bg-style-luminous-glass-pleat .bg-face::after {
  left: 6px; right: 6px; bottom: 2px; height: 2px; border-bottom: 1px solid #a2b4bf;
  background: #f9fcff;
}

.studio-button-skin.bg-style-luminous-glass-waist {
  --btn-bg: linear-gradient(90deg, #a4b4bc, #f5f8f9 7px, #f5f8f9 calc(100% - 7px), #a4b4bc);
  --btn-ink: #364954; --btn-edge: transparent; --btn-radius: 5px; --btn-shadow: none;
  --sample-bg: #e1e5e7; --sample-ink: #3e4d56; --fx-color: #b0c7d1;
}
.studio-button-skin.bg-style-luminous-glass-waist .bg-face {
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%, 3px 50%);
}
.studio-button-skin.bg-style-luminous-glass-waist .bg-face::before {
  inset: 2px; clip-path: inherit; background: #eaf0f2;
}
.studio-button-skin.bg-style-luminous-glass-waist .bg-face::after {
  inset: 2px 8px; border-top: 1px solid #ffffff; border-bottom: 1px solid #b7c8cf;
}

.studio-button-skin.bg-style-luminous-glass-lamella {
  --btn-bg: #f1efea; --btn-ink: #514b41; --btn-edge: #c6c1b6; --btn-radius: 11px;
  --btn-shadow: none; --sample-bg: #e8e5df; --sample-ink: #565043; --fx-color: #d6cdbd;
}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-face::before {
  left: 8px; right: 8px; top: 3px; height: 1px; background: #ffffff;
}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-face::after {
  left: 4px; right: 4px; bottom: 3px; height: 3px; border-bottom: 1px solid #d2ccc0; border-radius: 0 0 7px 7px;
}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-art i:nth-child(1) {
  display: block; left: 3px; right: 3px; bottom: -1px; height: 6px;
  border: 1px solid #b8b4aa; border-radius: 0 0 8px 8px; background: #e8e7e0;
}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-play .bg-art i:nth-child(2) {
  display: block; left: 6px; right: 6px; bottom: -2px; height: 2px;
  border-bottom: 1px solid #a6b6b7; border-radius: 0 0 5px 5px;
}

.studio-button-skin.bg-style-luminous-glass-pebble {
  --btn-bg: #e7eeec; --btn-ink: #334e4a; --btn-edge: #a7bfba;
  --btn-radius: 46% 54% 52% 48% / 60% 45% 55% 40%; --btn-shadow: none;
  --sample-bg: #dfe6e4; --sample-ink: #3f544e; --fx-color: #aac9c1;
}
.studio-button-skin.bg-style-luminous-glass-pebble .bg-face::before {
  inset: 3px; border-left: 2px solid #fcfffe; border-top: 1px solid #fcfffe; border-radius: inherit;
}
.studio-button-skin.bg-style-luminous-glass-pebble .bg-face::after {
  left: 10px; right: 5px; bottom: 4px; height: 6px; border-bottom: 1px solid #92b1a9;
  border-radius: 0 0 60% 40%;
}
.studio-button-skin.bg-style-luminous-glass-pebble .bg-text .bg-face { border-radius: 20px 15px 20px 15px; }

.studio-button-skin.bg-style-luminous-glass-folio {
  --btn-bg: #39464e; --btn-ink: #eff5f6; --btn-edge: #86979e; --btn-radius: 3px;
  --btn-shadow: none; --sample-bg: #252f35; --sample-ink: #dbe3e6; --fx-color: #b8d2d6;
}
.studio-button-skin.bg-style-luminous-glass-folio .bg-face {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.studio-button-skin.bg-style-luminous-glass-folio .bg-face::before {
  top: 2px; right: 2px; width: 8px; height: 8px;
  background: repeating-linear-gradient(45deg, transparent 0 2px, #b8c7cc 2px 3px);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.studio-button-skin.bg-style-luminous-glass-folio .bg-face::after {
  left: 2px; bottom: 2px; width: 8px; height: 8px;
  background: linear-gradient(45deg, #a9bdc1 0 1px, #5b747d 2px 4px, transparent 5px);
}

/* CYBER: quiet instrument construction, no bloom or moving rails. */
.studio-button-skin.bg-style-luminous-cyber-iris {
  --btn-bg: conic-gradient(from 22deg, #8caaaa 0 50deg, #40545a 50deg 120deg, #b2c2c4 120deg 175deg, #40545a 175deg 240deg, #849da4 240deg 290deg, #40545a 290deg);
  --btn-ink: #eaf1f2; --btn-edge: transparent; --btn-radius: 3px; --btn-shadow: none;
  --sample-bg: #202a30; --sample-ink: #dbe4e7; --fx-color: #a5cbca;
}
.studio-button-skin.bg-style-luminous-cyber-iris .bg-face {
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.studio-button-skin.bg-style-luminous-cyber-iris .bg-face::before { inset: 2px; clip-path: inherit; background: #2a3941; }
.studio-button-skin.bg-style-luminous-cyber-iris .bg-face::after {
  top: 4px; left: 12px; right: 12px; height: 1px; background: #749696;
}

.studio-button-skin.bg-style-luminous-cyber-bayonet {
  --btn-bg: #303e45; --btn-ink: #edf5f5; --btn-edge: #71878d; --btn-radius: 8px;
  --btn-shadow: none; --sample-bg: #222e34; --sample-ink: #dce6e8; --fx-color: #a0c6c5;
}
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-face::before {
  left: 10px; right: 10px; top: 3px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #789799, #aecbca, #789799);
}
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-art i:nth-child(1),
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-art i:nth-child(2) {
  display: block; top: calc(50% - 5px); width: 3px; height: 10px;
  background: #91a2a5; border-radius: 1px;
}
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-art i:nth-child(1) { left: -1px; }
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-art i:nth-child(2) { right: -1px; }
.studio-button-skin.bg-style-luminous-cyber-bayonet .bg-play .bg-face::after {
  left: calc(50% - 1px); bottom: 4px; width: 2px; height: 2px; border-radius: 50%; background: #b8d1cf;
}

.studio-button-skin.bg-style-luminous-cyber-cantilever {
  --btn-bg: #35424f; --btn-ink: #f0f3f8; --btn-edge: #81919f; --btn-radius: 3px 16px 3px 3px;
  --btn-shadow: none; --sample-bg: #242e39; --sample-ink: #dfe6ed; --fx-color: #b1c7d8;
}
.studio-button-skin.bg-style-luminous-cyber-cantilever .bg-face::before {
  left: 5px; top: 4px; width: 13px; height: 1px; background: #b6cdda;
}
.studio-button-skin.bg-style-luminous-cyber-cantilever .bg-face::after {
  left: 4px; right: 7px; bottom: 3px; height: 6px; border-left: 1px solid #8cabbc;
  border-bottom: 1px solid #8cabbc; border-radius: 0 0 0 3px;
}
.studio-button-skin.bg-style-luminous-cyber-cantilever .bg-play .bg-art i:nth-child(1) {
  display: block; right: 3px; bottom: -1px; width: 5px; height: 3px; background: #94a8b5; border-radius: 1px;
}

.studio-button-skin.bg-style-luminous-cyber-twin-fin {
  --btn-bg: #37434a; --btn-ink: #edf2f5; --btn-edge: #778b94; --btn-radius: 18px 5px 18px 5px;
  --btn-shadow: none; --sample-bg: #242e35; --sample-ink: #dde6eb; --fx-color: #b0c3cd;
}
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-face { inset: 0 3px; }
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-face::before {
  inset: 3px; border-top: 1px solid #9aafb9; border-bottom: 1px solid #596e79; border-radius: inherit;
}
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-art i:nth-child(1),
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-art i:nth-child(2) {
  display: block; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(#6b8792, #b2cad3 50%, #6b8792);
}
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-art i:nth-child(1) { left: 0; }
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-art i:nth-child(2) { right: 0; }

.studio-button-skin.bg-style-luminous-cyber-vernier {
  --btn-bg: #293943; --btn-ink: #eaf3f6; --btn-edge: #718a98; --btn-radius: 4px;
  --btn-shadow: none; --sample-bg: #202d36; --sample-ink: #dbe8ee; --fx-color: #abcbd6;
}
.studio-button-skin.bg-style-luminous-cyber-vernier .bg-face::before {
  bottom: 3px; left: 7px; right: 7px; height: 3px; border-bottom: 1px solid #57717f;
  background: repeating-linear-gradient(90deg, #819faa 0 1px, transparent 1px 5px);
}
.studio-button-skin.bg-style-luminous-cyber-vernier .bg-play .bg-face::after {
  left: calc(50% - 2px); bottom: 8px; width: 4px; height: 3px;
  clip-path: polygon(0 0, 100% 0, 50% 100%); background: #c6dadf;
}

.studio-button-skin.bg-style-luminous-cyber-relay {
  --btn-bg: #e3ebe8; --btn-ink: #324b46; --btn-edge: #9cafaa; --btn-radius: 22px;
  --btn-shadow: none; --sample-bg: #dce3df; --sample-ink: #3c5149; --fx-color: #9dbab0;
}
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::before,
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::after {
  top: calc(50% - 5px); width: 3px; height: 10px; border-left: 1px solid #8ea79e;
  border-right: 1px solid #fcfffd; border-radius: 2px;
}
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::before { left: 4px; }
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::after { right: 4px; }
.studio-button-skin.bg-style-luminous-cyber-relay .bg-play .bg-art i:nth-child(1) {
  display: block; left: calc(50% - 5px); top: -1px; width: 10px; height: 2px;
  border-radius: 1px; background: #819e95;
}

/* JEWEL: setting construction, muted materials and an empty center. */
.studio-button-skin.bg-style-luminous-jewel-tension {
  --btn-bg: #e4e8df; --btn-ink: #414b3c; --btn-edge: #b8bdac; --btn-radius: 15px;
  --btn-shadow: none; --sample-bg: #e5e5dc; --sample-ink: #4b5143; --fx-color: #bec4ac;
}
.studio-button-skin.bg-style-luminous-jewel-tension .bg-face { inset: 0 3px; }
.studio-button-skin.bg-style-luminous-jewel-tension .bg-face::before {
  inset: 3px; border-top: 1px solid #fafbf6; border-bottom: 1px solid #cad1bf; border-radius: 11px;
}
.studio-button-skin.bg-style-luminous-jewel-tension .bg-art i:nth-child(1),
.studio-button-skin.bg-style-luminous-jewel-tension .bg-art i:nth-child(2) {
  display: block; top: calc(50% - 5px); width: 5px; height: 10px; border-radius: 2px;
  background: linear-gradient(#958975, #e2d6bd 40%, #b4a68e);
}
.studio-button-skin.bg-style-luminous-jewel-tension .bg-art i:nth-child(1) { left: 0; }
.studio-button-skin.bg-style-luminous-jewel-tension .bg-art i:nth-child(2) { right: 0; }
.studio-button-skin.bg-style-luminous-jewel-tension .bg-play .bg-face::after {
  left: calc(50% - 3px); bottom: 4px; width: 6px; height: 1px; background: #a6987d;
}

.studio-button-skin.bg-style-luminous-jewel-baguette {
  --btn-bg: #d1c4ae; --btn-ink: #514635; --btn-edge: transparent; --btn-radius: 2px;
  --btn-shadow: none; --sample-bg: #e9e4da; --sample-ink: #584e3e; --fx-color: #cfbf9f;
}
.studio-button-skin.bg-style-luminous-jewel-baguette .bg-face {
  clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 5px) calc(100% - 3px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 5px 3px);
}
.studio-button-skin.bg-style-luminous-jewel-baguette .bg-face::before {
  inset: 2px; clip-path: inherit; background: #f0ece3;
}
.studio-button-skin.bg-style-luminous-jewel-baguette .bg-face::after {
  inset: 4px 7px; border-top: 1px solid #ffffff; border-bottom: 1px solid #d7cbb6;
}

.studio-button-skin.bg-style-luminous-jewel-signet {
  --btn-bg: #3f3b36; --btn-ink: #f7f0e4; --btn-edge: #aa9e8b; --btn-radius: 42%;
  --btn-shadow: none; --sample-bg: #2d2a27; --sample-ink: #e8e1d4; --fx-color: #cbbd9f;
}
.studio-button-skin.bg-style-luminous-jewel-signet .bg-face { inset: 0 3px; }
.studio-button-skin.bg-style-luminous-jewel-signet .bg-face::before {
  inset: 3px; border: 1px solid #6c6254; border-radius: inherit;
}
.studio-button-skin.bg-style-luminous-jewel-signet .bg-art i:nth-child(1),
.studio-button-skin.bg-style-luminous-jewel-signet .bg-art i:nth-child(2) {
  display: block; top: 12px; bottom: 12px; width: 5px;
  background: linear-gradient(#9e927d, #d1c5a9, #9e927d);
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
.studio-button-skin.bg-style-luminous-jewel-signet .bg-art i:nth-child(1) { left: 0; }
.studio-button-skin.bg-style-luminous-jewel-signet .bg-art i:nth-child(2) { right: 0; transform: scaleX(-1); }
.studio-button-skin.bg-style-luminous-jewel-signet .bg-text .bg-face { border-radius: 18px; }

.studio-button-skin.bg-style-luminous-jewel-marquise {
  --btn-bg: #efedee; --btn-ink: #514750; --btn-edge: #bdb3bc; --btn-radius: 50% 5px 50% 5px;
  --btn-shadow: none; --sample-bg: #e5e1e6; --sample-ink: #574e59; --fx-color: #cbbdcc;
}
.studio-button-skin.bg-style-luminous-jewel-marquise .bg-face::before {
  inset: 3px; border-top: 1px solid #ffffff; border-bottom: 1px solid #d4cbd3; border-radius: inherit;
}
.studio-button-skin.bg-style-luminous-jewel-marquise .bg-face::after {
  inset: 0;
  background: linear-gradient(135deg, transparent 42%, #9d94a0 45% 55%, transparent 58%) right top / 7px 7px no-repeat,
    linear-gradient(135deg, transparent 42%, #9d94a0 45% 55%, transparent 58%) left bottom / 7px 7px no-repeat;
}

.studio-button-skin.bg-style-luminous-jewel-fluted {
  --btn-bg: #42474b; --btn-ink: #f1f3f3; --btn-edge: #a8afb0; --btn-radius: 17px;
  --btn-shadow: none; --sample-bg: #2d3336; --sample-ink: #dfe4e4; --fx-color: #c7d0d0;
}
.studio-button-skin.bg-style-luminous-jewel-fluted .bg-face::before {
  inset: 3px; border-top: 1px solid #8a969c; border-radius: 13px;
}
.studio-button-skin.bg-style-luminous-jewel-fluted .bg-face::after {
  left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #b6c1c5 0 1px, #626e74 1px 2px, transparent 2px 4px);
}

.studio-button-skin.bg-style-luminous-jewel-bail {
  --btn-bg: #f0eade; --btn-ink: #554a37; --btn-edge: #c7baa1; --btn-radius: 16px 16px 7px 7px;
  --btn-shadow: none; --sample-bg: #e8e2d6; --sample-ink: #594f3d; --fx-color: #cfbf9b;
}
.studio-button-skin.bg-style-luminous-jewel-bail .bg-face::before {
  inset: 3px; border-top: 1px solid #fffdf8; border-radius: 13px 13px 4px 4px;
}
.studio-button-skin.bg-style-luminous-jewel-bail .bg-face::after {
  left: calc(50% - 4px); bottom: 3px; width: 8px; height: 2px; border-radius: 1px; background: #b6a583;
}
.studio-button-skin.bg-style-luminous-jewel-bail .bg-play .bg-art i:nth-child(1) {
  display: block; top: -2px; left: calc(50% - 5px); width: 10px; height: 6px;
  border: 1px solid #a18f6c; border-radius: 5px; background: #e6dcc8;
}

.studio-button-skin.bg-style-folio-outline.studio-button-play{--studio-button-glyph-color:#f7fbff;}
.studio-button-skin.bg-style-architect-frame.studio-button-play{--studio-button-glyph-color:#f4f8ff;}
.studio-button-skin.bg-style-precision-pill.studio-button-play{--studio-button-glyph-color:#f4f9ff;}
.studio-button-skin.bg-style-refined-portico.studio-button-play{--studio-button-glyph-color:#fafaf3;}
.studio-button-skin.bg-style-refined-slate-keystone.studio-button-play{--studio-button-glyph-color:#f8fcfd;}
.studio-button-skin{--btn-shadow:0 2px 3px color-mix(in srgb, #142a251a var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin .bg-face{border:calc(1px * var(--studio-button-border-factor)) solid var(--btn-edge);}
.studio-button-skin:is(
  .bg-style-playful-catnap, .bg-style-playful-bunny-loop,
  .bg-style-playful-cloud-puff, .bg-style-playful-mochi-stack,
  .bg-style-playful-bear-biscuit, .bg-style-playful-little-ghost,
  .bg-style-playful-paw-cushion, .bg-style-playful-jelly-star,
  .bg-style-playful-milk-wrap, .bg-style-playful-custard-cup,
  .bg-style-sweet-berry-seed, .bg-style-sweet-bow-knot,
  .bg-style-sweet-cherry-pair, .bg-style-sweet-macaron-shell,
  .bg-style-sweet-lace-medallion, .bg-style-sweet-satin-ribbon,
  .bg-style-sweet-cream-rosette, .bg-style-sweet-candy-fold,
  .bg-style-sweet-heart-envelope, .bg-style-sweet-pearl-halo,
  .bg-style-fresh-leaf-tip, .bg-style-fresh-dewdrop,
  .bg-style-fresh-lime-slice, .bg-style-fresh-fern-vein,
  .bg-style-fresh-petal-cup, .bg-style-fresh-lake-rings,
  .bg-style-fresh-shell-fan, .bg-style-fresh-rain-window,
  .bg-style-fresh-moss-stone, .bg-style-fresh-celadon-glaze
) .bg-face{border:calc(1px * var(--studio-button-border-factor)) solid var(--btn-edge);}
.studio-button-skin.bg-style-playful-catnap{--btn-shadow:inset 0 2px 2px color-mix(in srgb, #fffdf3 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 3px color-mix(in srgb, #c6927038 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #bb8c72 var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #49302426 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-catnap .bg-art i:nth-child(-n + 2){border:calc(1px * var(--studio-button-border-factor)) solid #be947d;}
.studio-button-skin.bg-style-playful-catnap .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b67b5c80;box-shadow:0 2px 0 color-mix(in srgb, #fff3df var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-catnap .bg-play .bg-face::after{border-top:calc(2px * var(--studio-button-border-factor)) solid #fffaf0b3;}
.studio-button-skin.bg-style-playful-bunny-loop{--btn-shadow:inset 2px 2px 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset -2px -3px 4px color-mix(in srgb, #bd94bf40 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #b29ab8 var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #42304c24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-bunny-loop .bg-art i:nth-child(-n + 2){border:calc(1px * var(--studio-button-border-factor)) solid #c2a3c2;}
.studio-button-skin.bg-style-playful-bunny-loop .bg-art i:nth-child(2){box-shadow:inset -2px 3px 1px color-mix(in srgb, #fff8 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-bunny-loop .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #fffdfce6;}
.studio-button-skin.bg-style-playful-bunny-loop .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #d5bdd4;box-shadow:0 1px 1px color-mix(in srgb, #79578330 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-cloud-puff{--btn-shadow:inset 0 2px 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -3px 4px color-mix(in srgb, #9cc9df55 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #a8c7d8 var(--studio-button-shadow-alpha), transparent), 0 6px 9px color-mix(in srgb, #254b631f var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-cloud-puff .bg-art i{border:calc(1px * var(--studio-button-border-factor)) solid #afcedc;box-shadow:inset 1px 2px 1px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-cloud-puff .bg-face::before{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #fff9;}
.studio-button-skin.bg-style-playful-cloud-puff .bg-play .bg-face::after{border-top:calc(2px * var(--studio-button-border-factor)) solid #fff;}
.studio-button-skin.bg-style-playful-mochi-stack{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #ffffee var(--studio-button-shadow-alpha), transparent), inset 0 -4px 4px color-mix(in srgb, #96996432 var(--studio-button-shadow-alpha), transparent), 0 2px 1px color-mix(in srgb, #9b9e76 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-mochi-stack .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b49392;box-shadow:0 3px 5px color-mix(in srgb, #5643312b var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-mochi-stack .bg-face::before{border-top:calc(2px * var(--studio-button-border-factor)) solid #fffef09c;}
.studio-button-skin.bg-style-playful-mochi-stack .bg-face::after{box-shadow:-5px 1px 0 -1px color-mix(in srgb, #aa8176 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-bear-biscuit{--btn-shadow:inset 0 2px 1px color-mix(in srgb, #fff0d0 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 2px color-mix(in srgb, #c08b55 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #a57748 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #53371c26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-bear-biscuit .bg-art i:nth-child(-n + 2){border:calc(1px * var(--studio-button-border-factor)) solid #aa7747;}
.studio-button-skin.bg-style-playful-bear-biscuit .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #b6814b80;box-shadow:0 1px 0 color-mix(in srgb, #fff1d7a1 var(--studio-button-shadow-alpha), transparent), inset 0 1px 0 color-mix(in srgb, #fff1d780 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-little-ghost{--btn-shadow:inset 2px 0 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset -3px 0 4px color-mix(in srgb, #a6c0dc40 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #9daec3 var(--studio-button-shadow-alpha), transparent), 0 6px 8px color-mix(in srgb, #35445c24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-little-ghost .bg-art i{border:calc(1px * var(--studio-button-border-factor)) solid #aebfd2;box-shadow:0 2px 1px color-mix(in srgb, #748ba130 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-little-ghost .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #fff;}
.studio-button-skin.bg-style-playful-little-ghost .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #bdcde580;}
.studio-button-skin.bg-style-playful-paw-cushion{--btn-shadow:inset 0 2px 3px color-mix(in srgb, #ffede3 var(--studio-button-shadow-alpha), transparent), inset 0 -4px 4px color-mix(in srgb, #c3837040 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #be8d7c var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #6a372629 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c58e7f;box-shadow:14px 0 0 -1px color-mix(in srgb, #f7d0c4 var(--studio-button-shadow-alpha), transparent), 14px 0 0 0 color-mix(in srgb, #c58e7f var(--studio-button-shadow-alpha), transparent), inset 0 2px 1px color-mix(in srgb, #ffebdf var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(2),
.studio-button-skin.bg-style-playful-paw-cushion .bg-art i:nth-child(3){border:calc(1px * var(--studio-button-border-factor)) solid #c58e7f;box-shadow:inset 0 2px 1px color-mix(in srgb, #ffe8dc var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-paw-cushion .bg-face::before{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #ffe5d6b3;}
.studio-button-skin.bg-style-playful-paw-cushion .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c88a7780;}
.studio-button-skin.bg-style-playful-jelly-star{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #fff5ff var(--studio-button-shadow-alpha), transparent), inset -2px -3px 3px color-mix(in srgb, #8f70b24d var(--studio-button-shadow-alpha), transparent), 0 2px 1px color-mix(in srgb, #856f9c66 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-jelly-star .bg-face::after{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #efe0ff;}
.studio-button-skin.bg-style-playful-milk-wrap{--btn-shadow:inset 0 2px 1px color-mix(in srgb, #fffef8 var(--studio-button-shadow-alpha), transparent), inset 0 -2px 1px color-mix(in srgb, #bdcbb7 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #94aa98 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #294b3524 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-milk-wrap .bg-face::before{border-inline:calc(2px * var(--studio-button-border-factor)) solid #8bb09b70;}
.studio-button-skin.bg-style-playful-milk-wrap .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c3d3bc;}
.studio-button-skin.bg-style-playful-custard-cup{--btn-shadow:inset 2px 0 2px color-mix(in srgb, #fff3c4 var(--studio-button-shadow-alpha), transparent), inset -2px 0 3px color-mix(in srgb, #b98f4940 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #c19b67 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-custard-cup .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c8b393;box-shadow:0 3px 4px color-mix(in srgb, #6b542726 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-playful-custard-cup .bg-face::after{border-left:calc(2px * var(--studio-button-border-factor)) solid #fff5d7a6;}
.studio-button-skin.bg-style-sweet-berry-seed{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #fff2e7 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 3px color-mix(in srgb, #b55d7740 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #b57779 var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #64303a24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-berry-seed .bg-art i{border:calc(1px * var(--studio-button-border-factor)) solid #6c966e;}
.studio-button-skin.bg-style-sweet-berry-seed .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff8edcc;}
.studio-button-skin.bg-style-sweet-bow-knot{--btn-shadow:inset 0 2px 1px color-mix(in srgb, #fff6fa var(--studio-button-shadow-alpha), transparent), inset 0 -2px 3px color-mix(in srgb, #b7819b33 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #b18a9d var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #5c304c24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(-n + 2){border:calc(1px * var(--studio-button-border-factor)) solid #b67a96;box-shadow:inset 0 1px 1px color-mix(in srgb, #fff4 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-bow-knot .bg-art i:nth-child(3){border:calc(1px * var(--studio-button-border-factor)) solid #b781a0;}
.studio-button-skin.bg-style-sweet-bow-knot .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #d4a3bc;box-shadow:inset 0 1px 0 color-mix(in srgb, #fff4f8b3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cherry-pair{--btn-shadow:inset 0 1px 2px color-mix(in srgb, #fffdf7 var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #c0ad8650 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #b6a384 var(--studio-button-shadow-alpha), transparent), 0 4px 7px color-mix(in srgb, #4a382824 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #739474;}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(2),
.studio-button-skin.bg-style-sweet-cherry-pair .bg-art i:nth-child(3){border:calc(1px * var(--studio-button-border-factor)) solid #a85162;}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #b4707866;box-shadow:0 0 0 2px color-mix(in srgb, #fff6e8 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cherry-pair .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b8778266;}
.studio-button-skin.bg-style-sweet-macaron-shell{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #fff0ff var(--studio-button-shadow-alpha), transparent), inset 0 -2px 1px color-mix(in srgb, #b18aba var(--studio-button-shadow-alpha), transparent), 0 1px 0 color-mix(in srgb, #a27cb0 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #ab86b6;box-shadow:0 3px 0 color-mix(in srgb, #bb93c4 var(--studio-button-shadow-alpha), transparent), 0 6px 7px color-mix(in srgb, #4b2e5826 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #e9cdcc;box-shadow:inset 0 -2px 0 color-mix(in srgb, #ecd4bc var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-face::before{border-bottom:calc(2px * var(--studio-button-border-factor)) dotted #a174ae;}
.studio-button-skin.bg-style-sweet-macaron-shell .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff1ffc9;}
.studio-button-skin.bg-style-sweet-lace-medallion{--btn-shadow:inset 0 1px 1px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -1px 2px color-mix(in srgb, #bfa28f50 var(--studio-button-shadow-alpha), transparent), 0 2px 2px color-mix(in srgb, #7b50452e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-art i:nth-child(1){border:calc(5px * var(--studio-button-border-factor)) dotted #fff8ed;box-shadow:0 0 0 1px color-mix(in srgb, #cbb6a799 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) dashed #b39187;}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) dashed #bd9a93;}
.studio-button-skin.bg-style-sweet-lace-medallion .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #d7bcb12e;}
.studio-button-skin.bg-style-sweet-satin-ribbon{--btn-shadow:inset 0 1px 1px color-mix(in srgb, #ffe6ee var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #ad78943b var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #986d80 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #5d324826 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #fff0f06b;}
.studio-button-skin.bg-style-sweet-satin-ribbon .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #a96f8699;border-right:calc(1px * var(--studio-button-border-factor)) solid #ffe9f080;}
.studio-button-skin.bg-style-sweet-cream-rosette{--btn-shadow:inset 0 1px 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #c8a46d30 var(--studio-button-shadow-alpha), transparent), 0 2px 2px color-mix(in srgb, #926e4a40 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-art i:nth-child(1){box-shadow:0 2px 3px color-mix(in srgb, #9870493d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #d7b98d;}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #ddbf94;box-shadow:0 0 0 1px color-mix(in srgb, #fff7e5 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-cream-rosette .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff;}
.studio-button-skin.bg-style-sweet-candy-fold{--btn-shadow:inset 1px 1px 0 color-mix(in srgb, #faffff var(--studio-button-shadow-alpha), transparent), inset -1px -1px 0 color-mix(in srgb, #9aadd366 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #93a3c5 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #2c3e6424 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-candy-fold .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a1b3d58c;}
.studio-button-skin.bg-style-sweet-heart-envelope{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fffaf2 var(--studio-button-shadow-alpha), transparent), inset 0 -1px 0 color-mix(in srgb, #d6b6a4 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #b99784 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #60332924 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c092815c;}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-art i:nth-child(1){box-shadow:inset 0 2px 1px color-mix(in srgb, #ffd8cd var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-heart-envelope .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #e0c5b2;}
.studio-button-skin.bg-style-sweet-pearl-halo{--btn-shadow:inset 0 1px 2px color-mix(in srgb, #fff6ff var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #957fac45 var(--studio-button-shadow-alpha), transparent), 0 2px 1px color-mix(in srgb, #9b875e80 var(--studio-button-shadow-alpha), transparent), 0 4px 8px color-mix(in srgb, #39304724 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(1),
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #cbbda8;box-shadow:0 -9px 0 -1px color-mix(in srgb, #f7eddf var(--studio-button-shadow-alpha), transparent), 0 9px 0 -1px color-mix(in srgb, #f7eddf var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-art i:nth-child(3){border-top:calc(5px * var(--studio-button-border-factor)) dotted #fff4e6;border-bottom:calc(5px * var(--studio-button-border-factor)) dotted #fff4e6;}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #c4ae88;box-shadow:0 0 0 1px color-mix(in srgb, #fff6e37a var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-sweet-pearl-halo .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #a68c64;}
.studio-button-skin.bg-style-fresh-leaf-tip{--btn-shadow:inset 1px 2px 1px color-mix(in srgb, #f6ffdf var(--studio-button-shadow-alpha), transparent), inset -2px -2px 2px color-mix(in srgb, #6c8c5840 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #809567 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #314b2426 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #f2ffd5cc;border-right:calc(1px * var(--studio-button-border-factor)) solid #69885380;}
.studio-button-skin.bg-style-fresh-leaf-tip .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #d9eeb699;}
.studio-button-skin.bg-style-fresh-dewdrop{--btn-shadow:inset 2px 2px 2px color-mix(in srgb, #f3fff2 var(--studio-button-shadow-alpha), transparent), inset -2px -3px 3px color-mix(in srgb, #689d884d var(--studio-button-shadow-alpha), transparent), 0 3px 2px color-mix(in srgb, #698e7c80 var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #28543c24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-dewdrop .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #85a278;}
.studio-button-skin.bg-style-fresh-dewdrop .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #eaffdf96;}
.studio-button-skin.bg-style-fresh-dewdrop .bg-face::after{border-left:calc(2px * var(--studio-button-border-factor)) solid #fffdf1e6;}
.studio-button-skin.bg-style-fresh-lime-slice{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #aac86e var(--studio-button-shadow-alpha), transparent), inset 0 0 0 4px color-mix(in srgb, #fbf4bd var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #8fa451 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #3b531f24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-lime-slice .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #fffad496;}
.studio-button-skin.bg-style-fresh-lime-slice .bg-face::after{box-shadow:1px 1px 0 color-mix(in srgb, #a8aa5e66 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-fern-vein{--btn-shadow:inset 0 1px 1px color-mix(in srgb, #c5db9c59 var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #162c2080 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #25392c var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #243e2d33 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-fern-vein .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #b9cd947a;}
.studio-button-skin.bg-style-fresh-fern-vein .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #9bb78480;}
.studio-button-skin.bg-style-fresh-fern-vein .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #6e9468;}
.studio-button-skin.bg-style-fresh-petal-cup{--btn-shadow:inset 0 2px 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -2px 3px color-mix(in srgb, #9aab8950 var(--studio-button-shadow-alpha), transparent), 0 2px 2px color-mix(in srgb, #6c7e5b4d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b0bfa4;}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #aebe9f;}
.studio-button-skin.bg-style-fresh-petal-cup .bg-art i:nth-child(3){border-top:calc(1px * var(--studio-button-border-factor)) solid #9fb18c;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #9fb18c;}
.studio-button-skin.bg-style-fresh-petal-cup .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #b3c0a975;box-shadow:0 1px 0 color-mix(in srgb, #fffdf2 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-petal-cup .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff;}
.studio-button-skin.bg-style-fresh-lake-rings{--btn-shadow:inset 0 1px 1px color-mix(in srgb, #effff6 var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #689aa254 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #8db1b3 var(--studio-button-shadow-alpha), transparent), 0 4px 7px color-mix(in srgb, #274c5224 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-lake-rings .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #f3fff1a3;}
.studio-button-skin.bg-style-fresh-lake-rings .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #7eaeb038;}
.studio-button-skin.bg-style-fresh-lake-rings .bg-art i:nth-child(1){border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c8ebe6;}
.studio-button-skin.bg-style-fresh-shell-fan{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #fffff3 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 3px color-mix(in srgb, #a89b794d var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #a69c83 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #51432b26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-shell-fan .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #fff8d9;}
.studio-button-skin.bg-style-fresh-shell-fan .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b4a78c;}
.studio-button-skin.bg-style-fresh-rain-window{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #f9fffc var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #e5ece9 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 4px color-mix(in srgb, #a8bfc6 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #92a7af var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #2d434f24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-rain-window .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #769caa61;}
.studio-button-skin.bg-style-fresh-rain-window .bg-art i:nth-child(1){border-bottom:calc(1px * var(--studio-button-border-factor)) solid #819da6;}
.studio-button-skin.bg-style-fresh-moss-stone{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #f4f3e8a6 var(--studio-button-shadow-alpha), transparent), inset -2px -3px 4px color-mix(in srgb, #727f634a var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #88917b var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #32422b26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-moss-stone .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #81905e;box-shadow:inset 0 -2px 1px color-mix(in srgb, #5c75465c var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-moss-stone .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #fcf9e4a3;}
.studio-button-skin.bg-style-fresh-celadon-glaze{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #eaffdf var(--studio-button-shadow-alpha), transparent), inset -2px -3px 3px color-mix(in srgb, #68927350 var(--studio-button-shadow-alpha), transparent), 0 2px 1px color-mix(in srgb, #78998299 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a69170;box-shadow:inset 0 -2px 0 color-mix(in srgb, #b2a284 var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #3d4e3326 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #709c7f80;box-shadow:0 0 0 1px color-mix(in srgb, #e7f4d273 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-fresh-celadon-glaze .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #f7ffe19c;}
.studio-button-skin.bg-card[class*="bg-style-heritage-"] .bg-face{border:calc(1px * var(--studio-button-border-factor)) solid var(--btn-edge);}
.studio-button-skin.bg-style-heritage-cloud-collar{--btn-shadow:inset 0 2px 1px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -3px 3px color-mix(in srgb, #90b6a575 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #77988b var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #233c3526 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #86a99b;}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-face::after{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #b79451;}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #73998b;box-shadow:-9px 3px 0 -2px color-mix(in srgb, #e5f1e6 var(--studio-button-shadow-alpha), transparent), 9px 3px 0 -2px color-mix(in srgb, #e5f1e6 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cloud-collar .bg-play .bg-face::before{border-width:calc(1px * var(--studio-button-border-factor)) calc(2px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-heritage-jade-disc{--btn-shadow:inset 0 1px 1px color-mix(in srgb, #efffe8 var(--studio-button-shadow-alpha), transparent), inset 0 -2px 2px color-mix(in srgb, #355e4755 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #45765e var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #24433330 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-jade-disc .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #618a6e;box-shadow:0 0 0 3px color-mix(in srgb, #ffffff3d var(--studio-button-shadow-alpha), transparent), inset 0 2px 3px color-mix(in srgb, #426f5a45 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-jade-disc .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #ebffe691;}
.studio-button-skin.bg-style-heritage-jade-disc .bg-art i:nth-child(1){box-shadow:inset 1px 0 color-mix(in srgb, #fff1be var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-jade-disc .bg-art i:nth-child(2){box-shadow:inset 1px 0 color-mix(in srgb, #f8e7b7 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-bronze-mirror{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #d7c287 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #675e35 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-face::before{border:calc(2px * var(--studio-button-border-factor)) dashed #555c368c;box-shadow:0 0 0 1px color-mix(in srgb, #ece0ab8a var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-bronze-mirror .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #f1df9d;box-shadow:0 0 0 1px color-mix(in srgb, #6d633e var(--studio-button-shadow-alpha), transparent), inset 0 1px 3px color-mix(in srgb, #fff3c075 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cinnabar-seal{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #e08468 var(--studio-button-shadow-alpha), transparent), 1px 3px 0 color-mix(in srgb, #632c24 var(--studio-button-shadow-alpha), transparent), 0 5px 5px color-mix(in srgb, #68342a24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #e8b693;box-shadow:inset 0 0 0 2px color-mix(in srgb, #993e32 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #d28b6c var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #e3a080;}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-art i:nth-child(1){border-bottom:calc(1px * var(--studio-button-border-factor)) solid #ffdab0;}
.studio-button-skin.bg-style-heritage-cinnabar-seal .bg-play .bg-face::before{border-width:calc(2px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-heritage-silk-scroll{--btn-shadow:inset 0 1px color-mix(in srgb, #fff3d8 var(--studio-button-shadow-alpha), transparent), inset 0 -1px color-mix(in srgb, #a58b60 var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #43352729 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-silk-scroll .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #b8a274;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b8a274;}
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-silk-scroll .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #6b543a;box-shadow:1px 0 2px color-mix(in srgb, #4d36222e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-bamboo-joint{--btn-shadow:inset 2px 0 2px color-mix(in srgb, #edf0c2 var(--studio-button-shadow-alpha), transparent), inset -2px 0 3px color-mix(in srgb, #64783b4f var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #6a7e45 var(--studio-button-shadow-alpha), transparent), 0 5px 5px color-mix(in srgb, #35462424 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::before,
.studio-button-skin.bg-style-heritage-bamboo-joint .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #e6edbb;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #6c8042;box-shadow:0 2px 1px color-mix(in srgb, #4a62262b var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lacquer-tray{--btn-shadow:inset 0 1px color-mix(in srgb, #e2b085 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 2px color-mix(in srgb, #100e12 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #0e1013 var(--studio-button-shadow-alpha), transparent), 0 5px 8px color-mix(in srgb, #0004 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-face::before{border:calc(2px * var(--studio-button-border-factor)) solid #984936;box-shadow:inset 0 1px 2px color-mix(in srgb, #efb27845 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #ddbd75;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #ddbd75;}
.studio-button-skin.bg-style-heritage-lacquer-tray .bg-art i:nth-child(1){border-top:calc(1px * var(--studio-button-border-factor)) solid #fff3d08c;}
.studio-button-skin.bg-style-heritage-silk-fan{--btn-shadow:inset 0 2px color-mix(in srgb, #fffcf0 var(--studio-button-shadow-alpha), transparent), inset 0 -2px color-mix(in srgb, #c4a17c var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #af8d6c var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #66474024 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-silk-fan .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #c4a084;}
.studio-button-skin.bg-style-heritage-silk-fan .bg-art i:nth-child(1){box-shadow:0 1px color-mix(in srgb, #f4d7aa var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lattice-window{--btn-shadow:inset 1px 1px color-mix(in srgb, #b6956c var(--studio-button-shadow-alpha), transparent), inset -1px -1px color-mix(in srgb, #312a24 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #49372b var(--studio-button-shadow-alpha), transparent), 0 5px 5px color-mix(in srgb, #49382b20 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lattice-window .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #c0a17a;box-shadow:inset 0 1px 2px color-mix(in srgb, #735b4140 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lattice-window .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #b2966b;}
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-lattice-window .bg-art i:nth-child(2){border-left:calc(1px * var(--studio-button-border-factor)) solid #c6a878;border-right:calc(1px * var(--studio-button-border-factor)) solid #c6a878;}
.studio-button-skin.bg-style-heritage-thread-bound{--btn-shadow:1px 1px 0 color-mix(in srgb, #e7dfc8 var(--studio-button-shadow-alpha), transparent), 1px 2px 0 color-mix(in srgb, #8d9b90 var(--studio-button-shadow-alpha), transparent), 1px 3px 0 color-mix(in srgb, #e7dfc8 var(--studio-button-shadow-alpha), transparent), 1px 4px 0 color-mix(in srgb, #7c8b83 var(--studio-button-shadow-alpha), transparent), 0 6px 6px color-mix(in srgb, #273a3520 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-thread-bound .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #a2ada0;}
.studio-button-skin.bg-style-heritage-thread-bound .bg-face::after{box-shadow:0 13px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent), 0 26px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-thread-bound .bg-play .bg-face::after{box-shadow:0 18px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent), 0 36px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-thread-bound .bg-text .bg-face::after{box-shadow:0 12px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent), 0 24px color-mix(in srgb, #decfaf var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-tape-deck{--btn-shadow:inset 0 1px color-mix(in srgb, #a4a999 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #30382f var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #26312633 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-tape-deck .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #393f36;box-shadow:inset 0 1px 2px color-mix(in srgb, #20271f70 var(--studio-button-shadow-alpha), transparent), 0 1px color-mix(in srgb, #929781 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-tape-deck .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #a7a88c;}
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-tape-deck .bg-art i:nth-child(2){border:calc(2px * var(--studio-button-border-factor)) solid #c9c6a6;box-shadow:0 0 0 1px color-mix(in srgb, #232d24 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-typewriter-key{--btn-shadow:0 3px 0 color-mix(in srgb, #222b25 var(--studio-button-shadow-alpha), transparent), 0 5px 5px color-mix(in srgb, #0005 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-typewriter-key .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #f2e8d4;box-shadow:inset 0 -1px 2px color-mix(in srgb, #ab987c5c var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-typewriter-key .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #584d3b;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #e6d6b9;}
.studio-button-skin.bg-style-heritage-enamel-tin{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #47778a var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #dce7db var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #294c5b var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #294c5b26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-enamel-tin .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #bdcfc8;box-shadow:inset 0 1px 2px color-mix(in srgb, #c9d2bf55 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-enamel-tin .bg-face::after{box-shadow:-1px 1px color-mix(in srgb, #a7b9b0 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-leather-tab{--btn-shadow:inset 0 1px color-mix(in srgb, #ca986d var(--studio-button-shadow-alpha), transparent), inset 0 -2px color-mix(in srgb, #623c28 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #573723 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #4426142b var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-leather-tab .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) dashed #e5bb89;box-shadow:0 0 0 1px color-mix(in srgb, #623a222b var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-leather-tab .bg-art i:nth-child(2){box-shadow:0 1px 1px color-mix(in srgb, #432817 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-leather-tab .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #e9ba842b;}
.studio-button-skin.bg-style-heritage-vinyl-label{--btn-shadow:inset 0 1px color-mix(in srgb, #7d8373 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #121a14 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #15211940 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #e4b47b;box-shadow:0 0 0 2px color-mix(in srgb, #131c16 var(--studio-button-shadow-alpha), transparent), inset 0 1px color-mix(in srgb, #cb82577d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #95927f66;}
.studio-button-skin.bg-style-heritage-vinyl-label .bg-art i:nth-child(1){box-shadow:1px 1px 1px color-mix(in srgb, #0005 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-radio-dial{--btn-shadow:inset 0 1px color-mix(in srgb, #ecce90 var(--studio-button-shadow-alpha), transparent), inset 0 -1px color-mix(in srgb, #5e4c36 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #3d3427 var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #0003 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-radio-dial .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #56482f;box-shadow:inset 0 1px 2px color-mix(in srgb, #15221980 var(--studio-button-shadow-alpha), transparent), 0 1px color-mix(in srgb, #e0c48c var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-radio-dial .bg-art i:nth-child(1){box-shadow:1px 0 color-mix(in srgb, #241e1880 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cloisonne{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #7c693d var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #d4b16c var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #1b2e32 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #10252844 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::before,
.studio-button-skin.bg-style-heritage-cloisonne .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #d3b071;box-shadow:inset 0 1px color-mix(in srgb, #b2c89c66 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-cloisonne .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #dfbf7e;}
.studio-button-skin.bg-style-heritage-film-frame{--btn-shadow:inset 0 1px color-mix(in srgb, #697363 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #20251d var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #202b2529 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-film-frame .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #9c927a;box-shadow:inset 0 1px 3px color-mix(in srgb, #524d3850 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-film-frame .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #f3e7c88f;border-top:calc(1px * var(--studio-button-border-factor)) solid #f3e7c88f;}
.studio-button-skin.bg-style-heritage-tweed-patch{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #384a36 var(--studio-button-shadow-alpha), transparent), inset 0 3px 2px color-mix(in srgb, #d3d4ac36 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #2e3d2b var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #24332326 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-tweed-patch .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) dashed #b0b595;}
.studio-button-skin.bg-style-heritage-reel-hub{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #dee6d5 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #77897a var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #29382d var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #12241a47 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-reel-hub .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #748775;box-shadow:0 0 0 2px color-mix(in srgb, #cad4c2 var(--studio-button-shadow-alpha), transparent), 0 1px 2px 3px color-mix(in srgb, #192e2366 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-pearl-stud{--btn-shadow:inset 0 1px 2px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -3px 4px color-mix(in srgb, #a68b7754 var(--studio-button-shadow-alpha), transparent), 0 3px 6px color-mix(in srgb, #73513e30 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #fff8eaad;}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-face::after{border:calc(2px * var(--studio-button-border-factor)) solid #b89a70;box-shadow:0 1px 0 color-mix(in srgb, #f7e3b5 var(--studio-button-shadow-alpha), transparent), inset 0 -1px 0 color-mix(in srgb, #fff4d8 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-pearl-stud .bg-art i:nth-child(1){box-shadow:-8px -1px 0 color-mix(in srgb, #d2b480 var(--studio-button-shadow-alpha), transparent), 8px -1px 0 color-mix(in srgb, #d2b480 var(--studio-button-shadow-alpha), transparent), 0 1px 1px color-mix(in srgb, #8e7045 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-gold-rim{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #f9e7b1 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 3px color-mix(in srgb, #b39656 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #a18a5c var(--studio-button-shadow-alpha), transparent), 0 4px 6px color-mix(in srgb, #77623b26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-gold-rim .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #e2d2b0;box-shadow:inset 0 1px 2px color-mix(in srgb, #a7936330 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-emerald-cut{--btn-shadow:inset 0 0 0 1px color-mix(in srgb, #b9d9a4 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-emerald-cut .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #80b497;box-shadow:inset 0 1px 1px color-mix(in srgb, #bdfbe24d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-pave-setting{--btn-shadow:inset 0 1px color-mix(in srgb, #effbff var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #6a818e var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #29495726 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::before,
.studio-button-skin.bg-style-heritage-pave-setting .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #b2c6d1;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #6d83928a;}
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(1),
.studio-button-skin.bg-style-heritage-pave-setting .bg-art i:nth-child(2){box-shadow:1px 0 color-mix(in srgb, #6b829057 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-rose-knot{--btn-shadow:inset 0 1px color-mix(in srgb, #fff5e7 var(--studio-button-shadow-alpha), transparent), inset 0 -2px color-mix(in srgb, #bd8d7959 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #ad7c70 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #713e3e26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-rose-knot .bg-face::before{border:calc(2px * var(--studio-button-border-factor)) solid #b88171;box-shadow:0 1px 0 color-mix(in srgb, #fff1d6 var(--studio-button-shadow-alpha), transparent), inset 0 1px 0 color-mix(in srgb, #ffe4c8 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-rose-knot .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #fff2d5;box-shadow:1px 0 0 color-mix(in srgb, #af7763 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-rose-knot .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b8856d;}
.studio-button-skin.bg-style-heritage-platinum-rail{--btn-shadow:inset 0 0 0 3px color-mix(in srgb, #667e8b var(--studio-button-shadow-alpha), transparent), inset 0 0 0 4px color-mix(in srgb, #263842 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #182b35 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #061a2747 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::before,
.studio-button-skin.bg-style-heritage-platinum-rail .bg-face::after{box-shadow:0 1px 0 color-mix(in srgb, #f1fdff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-diamond-crown{--btn-shadow:inset 0 0 0 1px color-mix(in srgb, #f1fbff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-diamond-crown .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #9bb4c8;box-shadow:0 0 0 1px color-mix(in srgb, #effbffb3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-moonstone{--btn-shadow:inset 2px 2px 3px color-mix(in srgb, #ffffffb3 var(--studio-button-shadow-alpha), transparent), inset -2px -3px 4px color-mix(in srgb, #7d92b357 var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #13223755 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-moonstone .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffffe0;border-right:calc(1px * var(--studio-button-border-factor)) solid #e8faff80;}
.studio-button-skin.bg-style-heritage-moonstone .bg-face::after{border-left:calc(3px * var(--studio-button-border-factor)) solid #bccbd2;border-bottom:calc(3px * var(--studio-button-border-factor)) solid #91a9bd;box-shadow:-1px 1px 0 color-mix(in srgb, #e6f5ff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lacquer-gilt{--btn-shadow:inset 0 1px color-mix(in srgb, #66625c var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #11161b var(--studio-button-shadow-alpha), transparent), 0 5px 6px color-mix(in srgb, #0004 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-lacquer-gilt .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a88c547d;}
.studio-button-skin.bg-style-heritage-nacre-mosaic{--btn-shadow:inset 0 1px color-mix(in srgb, #fffdf0 var(--studio-button-shadow-alpha), transparent), inset 0 -2px color-mix(in srgb, #94b0ad7a var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #86a5a0 var(--studio-button-shadow-alpha), transparent), 0 5px 7px color-mix(in srgb, #3d615d26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-heritage-nacre-mosaic .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #fffdefb3;}
.studio-button-skin:where(.bg-card[class*="bg-style-modern-"]) .bg-face{border:calc(1px * var(--studio-button-border-factor)) solid var(--btn-edge);}
.studio-button-skin.bg-style-modern-cyber-chamfer{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #d2ffff45 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 0 color-mix(in srgb, #040e19 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #a1ffeb66;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #5ae7ec52;}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-art i:nth-child(1){box-shadow:0 0 5px color-mix(in srgb, #45dfe875 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-chamfer .bg-play .bg-face::before{border-top-width:calc(2px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-modern-cyber-rail{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #a4d9ff25 var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #060e242b var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-rail .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #afdfff55;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #afdfff30;}
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-rail .bg-art i:nth-child(2){box-shadow:0 0 4px color-mix(in srgb, #89c5ff55 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-bracket{--btn-shadow:inset 0 0 0 3px color-mix(in srgb, #141b28 var(--studio-button-shadow-alpha), transparent), 0 2px 3px color-mix(in srgb, #05081822 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-circuit{--btn-shadow:inset 0 0 0 3px color-mix(in srgb, #102823 var(--studio-button-shadow-alpha), transparent), inset 0 0 0 4px color-mix(in srgb, #376c5d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #afffc5;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #afffc5;}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #9be4be;border-top:calc(1px * var(--studio-button-border-factor)) solid #9be4be;}
.studio-button-skin.bg-style-modern-cyber-circuit .bg-art i:nth-child(1){box-shadow:-5px 0 0 color-mix(in srgb, #78c39b var(--studio-button-shadow-alpha), transparent), -10px 0 0 color-mix(in srgb, #508c73 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-louver{--btn-shadow:inset 0 2px 0 color-mix(in srgb, #9fbed133 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 0 color-mix(in srgb, #101722 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-reactor{--btn-shadow:inset 0 1px 2px color-mix(in srgb, #cefff14d var(--studio-button-shadow-alpha), transparent), 0 3px 6px color-mix(in srgb, #00192333 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) dashed #a2f2d48c;}
.studio-button-skin.bg-style-modern-cyber-reactor .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #749e925c;}
.studio-button-skin.bg-style-modern-cyber-tab{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #f5edff29 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #141426 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-tab .bg-art i:nth-child(1){border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffd2;}
.studio-button-skin.bg-style-modern-cyber-wafer{--btn-shadow:inset 1px 1px 0 color-mix(in srgb, #d4faff3b var(--studio-button-shadow-alpha), transparent), 0 2px 2px color-mix(in srgb, #07162755 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(1),
.studio-button-skin.bg-style-modern-cyber-wafer .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #76a3c2;}
.studio-button-skin.bg-style-modern-cyber-wafer .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #e2faff5e;border-left:calc(1px * var(--studio-button-border-factor)) solid #e2faff26;}
.studio-button-skin.bg-style-modern-cyber-port{--btn-shadow:inset 0 0 0 1px color-mix(in srgb, #95afcc var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-port .bg-face::after{border-top:calc(2px * var(--studio-button-border-factor)) solid #c4e8ff;border-bottom:calc(2px * var(--studio-button-border-factor)) solid #648bbc;}
.studio-button-skin.bg-style-modern-cyber-spine{--btn-shadow:inset 3px 0 3px color-mix(in srgb, #0e1f27 var(--studio-button-shadow-alpha), transparent), inset -3px 0 3px color-mix(in srgb, #0e1f27 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-cyber-spine .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #d1f5ad8c;border-right:calc(1px * var(--studio-button-border-factor)) solid #d1f5ad8c;}
.studio-button-skin.bg-style-modern-glass-prism{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -3px 0 color-mix(in srgb, #739abc50 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-prism .bg-face::before{border-top:calc(2px * var(--studio-button-border-factor)) solid #fff;border-left:calc(2px * var(--studio-button-border-factor)) solid #ffffffb3;border-right:calc(2px * var(--studio-button-border-factor)) solid #548aa452;border-bottom:calc(2px * var(--studio-button-border-factor)) solid #548aa42e;}
.studio-button-skin.bg-style-modern-glass-prism .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #ffffff70;}
.studio-button-skin.bg-style-modern-glass-ice{--btn-shadow:inset 3px 3px 0 color-mix(in srgb, #ffffffb3 var(--studio-button-shadow-alpha), transparent), inset -3px -4px 0 color-mix(in srgb, #74abc044 var(--studio-button-shadow-alpha), transparent), 0 4px 0 color-mix(in srgb, #74a0b5 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-ice .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #ffffff9c;box-shadow:1px 1px 0 color-mix(in srgb, #78aabe38 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-ice .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #ffffffde;box-shadow:25px 29px 0 -1px color-mix(in srgb, #fff9 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-ice .bg-play .bg-face::after{box-shadow:36px 40px 0 -1px color-mix(in srgb, #fff9 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-drop{--btn-shadow:inset 2px 2px 3px color-mix(in srgb, #fff9 var(--studio-button-shadow-alpha), transparent), inset -2px -3px 3px color-mix(in srgb, #4c939454 var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #426b7033 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-drop .bg-face::before{border-top:calc(3px * var(--studio-button-border-factor)) solid #ffffffe6;}
.studio-button-skin.bg-style-modern-glass-drop .bg-face::after{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #e5ffffb3;}
.studio-button-skin.bg-style-modern-glass-fog{--btn-shadow:inset 0 0 0 1px color-mix(in srgb, #ffffffd9 var(--studio-button-shadow-alpha), transparent), 0 3px 7px color-mix(in srgb, #49647726 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-fog .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #9aaeb51f;}
.studio-button-skin.bg-style-modern-glass-mirror{--btn-shadow:inset 1px 1px 0 color-mix(in srgb, #f0ffffab var(--studio-button-shadow-alpha), transparent), inset -1px -1px 0 color-mix(in srgb, #0b1c2d var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #1f36462e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-mirror .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #ffffff45;}
.studio-button-skin.bg-style-modern-glass-mirror .bg-play .bg-face{box-shadow:var(--btn-shadow), 0 0 0 1px color-mix(in srgb, #4b667d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-lens{--btn-shadow:inset 1px 2px 2px color-mix(in srgb, #ffffffd9 var(--studio-button-shadow-alpha), transparent), inset -1px -2px 2px color-mix(in srgb, #608ba366 var(--studio-button-shadow-alpha), transparent), 0 3px 6px color-mix(in srgb, #43647a33 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-lens .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #ffffffb3;box-shadow:0 0 0 1px color-mix(in srgb, #517a8c29 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-lens .bg-face::after{border-bottom:calc(3px * var(--studio-button-border-factor)) solid #eaffffc7;}
.studio-button-skin.bg-style-modern-glass-ampoule{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), inset 0 -2px 1px color-mix(in srgb, #8298644a var(--studio-button-shadow-alpha), transparent), 0 2px 4px color-mix(in srgb, #57664321 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-ampoule .bg-face::after{border-left:calc(3px * var(--studio-button-border-factor)) double #7f936b80;border-right:calc(3px * var(--studio-button-border-factor)) double #7f936b80;}
.studio-button-skin.bg-style-modern-glass-slide{--btn-shadow:inset 1px 1px 0 color-mix(in srgb, #ffffffc7 var(--studio-button-shadow-alpha), transparent), inset -1px -1px 0 color-mix(in srgb, #a1c4bd var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-slide .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #8fafaa;}
.studio-button-skin.bg-style-modern-glass-slide .bg-face::before{box-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-slide .bg-face::after{box-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-opal{--btn-shadow:inset 3px 0 3px color-mix(in srgb, #9bddde85 var(--studio-button-shadow-alpha), transparent), inset -3px 0 3px color-mix(in srgb, #eab7d885 var(--studio-button-shadow-alpha), transparent), inset 0 -3px 3px color-mix(in srgb, #bec4f394 var(--studio-button-shadow-alpha), transparent), 0 3px 6px color-mix(in srgb, #53607f21 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-opal .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #ffffffde;box-shadow:inset 0 1px 2px color-mix(in srgb, #a6b0c42e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-meniscus{--btn-shadow:inset 2px 2px 3px color-mix(in srgb, #ffffffb3 var(--studio-button-shadow-alpha), transparent), inset -2px -2px 3px color-mix(in srgb, #588fa45c var(--studio-button-shadow-alpha), transparent), 0 3px 5px color-mix(in srgb, #466c7e26 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-glass-meniscus .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #75adbb;border-top:calc(2px * var(--studio-button-border-factor)) solid #ffffffc7;}
.studio-button-skin.bg-style-modern-glass-meniscus .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #ffffffa6;border-right:calc(1px * var(--studio-button-border-factor)) solid #ffffff66;border-bottom:calc(2px * var(--studio-button-border-factor)) solid #e9ffff;}
.studio-button-skin.bg-style-modern-pop-cutblock{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #ffffff85 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #243852 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-cutblock .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #cedbff;border-left:calc(1px * var(--studio-button-border-factor)) solid #cedbff;}
.studio-button-skin.bg-style-modern-pop-offset{--btn-shadow:3px 4px 0 color-mix(in srgb, #273954 var(--studio-button-shadow-alpha), transparent), inset 0 2px 0 color-mix(in srgb, #fff0b2 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-offset .bg-face{border-width:calc(2px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-modern-pop-offset .bg-play .bg-face{box-shadow:4px 5px 0 color-mix(in srgb, #273954 var(--studio-button-shadow-alpha), transparent), inset 0 2px 0 color-mix(in srgb, #fff0b2 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-ticket{--btn-shadow:inset 0 2px 0 color-mix(in srgb, #ffffffcc var(--studio-button-shadow-alpha), transparent), inset 0 -2px 0 color-mix(in srgb, #bdcce355 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-ticket .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) dashed #59749e;}
.studio-button-skin.bg-style-modern-pop-sticker{--btn-shadow:0 0 0 1px color-mix(in srgb, #bd9d91 var(--studio-button-shadow-alpha), transparent), 1px 3px 3px color-mix(in srgb, #684c3f2e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-sticker .bg-face{border-width:calc(3px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-modern-pop-sticker .bg-face::before{box-shadow:-1px 1px 1px color-mix(in srgb, #835b4233 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-sticker .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #fff5e885;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #fff5e885;}
.studio-button-skin.bg-style-modern-pop-paint{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #bbc4b5 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-paint .bg-face::after{box-shadow:5px 1px 0 -1px color-mix(in srgb, #317d6f var(--studio-button-shadow-alpha), transparent), 10px 0 0 -1px color-mix(in srgb, #317d6f var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-pixel{--btn-shadow:inset 0 3px 0 color-mix(in srgb, #f0ffe9 var(--studio-button-shadow-alpha), transparent), inset 3px 0 0 color-mix(in srgb, #e5ffdf var(--studio-button-shadow-alpha), transparent), inset 0 -3px 0 color-mix(in srgb, #81b89d var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-wave{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #7babc4 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-wave .bg-face::before{border-bottom:calc(3px * var(--studio-button-border-factor)) solid #3679b6;border-left:calc(2px * var(--studio-button-border-factor)) solid #3679b6;}
.studio-button-skin.bg-style-modern-pop-wave .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #63add2;}
.studio-button-skin.bg-style-modern-pop-wave .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #9a5446;}
.studio-button-skin.bg-style-modern-pop-tongue{--btn-shadow:inset 0 0 0 2px color-mix(in srgb, #779b91 var(--studio-button-shadow-alpha), transparent), 0 3px 0 color-mix(in srgb, #355657 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-tongue .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) dashed #55766f94;}
.studio-button-skin.bg-style-modern-pop-tongue .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #8e673e;}
.studio-button-skin.bg-style-modern-pop-duoring{--btn-shadow:0 2px 0 color-mix(in srgb, #36547a var(--studio-button-shadow-alpha), transparent), inset 0 0 0 1px color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-duoring .bg-face{border-width:calc(4px * var(--studio-button-border-factor));}
.studio-button-skin.bg-style-modern-pop-duoring .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #b8b7aa;}
.studio-button-skin.bg-style-modern-pop-duoring .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #617887;}
.studio-button-skin.bg-style-modern-pop-punch{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #ffffff47 var(--studio-button-shadow-alpha), transparent), 0 2px 0 color-mix(in srgb, #8a9c9f var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-modern-pop-punch .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #d7e1dc52;}
.studio-button-skin.bg-style-modern-pop-punch .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #697f86;}
.studio-button-skin.bg-style-graphite-disc{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #78828c var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-graphite-disc .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #8a97a633;}
.studio-button-skin.bg-style-folio-outline .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #d7e0e5;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #d7e0e5;}
.studio-button-skin.bg-style-navy-inlay .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #9bafcb65;}
.studio-button-skin.bg-style-satin-steel{--btn-shadow:inset 0 1px 0 white,0 2px 0 color-mix(in srgb, #919fa9 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-satin-steel .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #9eaab655;}
.studio-button-skin.bg-style-split-console{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #8293a6 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-recessed-key{--btn-shadow:0 1px 0 color-mix(in srgb, #61707d var(--studio-button-shadow-alpha), transparent),inset 0 2px 4px color-mix(in srgb, #111a23 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-recessed-key .bg-face::before{box-shadow:0 1px 3px color-mix(in srgb, #152333 var(--studio-button-shadow-alpha), transparent),inset 0 1px 0 color-mix(in srgb, #677788 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-editorial-tab{--btn-shadow:2px 3px 0 color-mix(in srgb, #aec2b3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-architect-frame .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #50749b;}
.studio-button-skin.bg-style-signal-dial .bg-face::before{box-shadow:inset 0 1px 0 color-mix(in srgb, #fff var(--studio-button-shadow-alpha), transparent),0 1px 2px color-mix(in srgb, #68828f var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-precision-pill{--btn-shadow:inset 0 -3px 0 color-mix(in srgb, #d6e1ea var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-precision-pill .bg-play .bg-face{box-shadow:inset 0 -3px 0 color-mix(in srgb, #1c3c58 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-refined-portico .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #adb7ae;}
.studio-button-skin.bg-style-refined-linen-binding .bg-face::before{border-right:calc(1px * var(--studio-button-border-factor)) solid #c2b9a5;}
.studio-button-skin.bg-style-refined-travertine-sill .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #c8baa3;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #dfd2bb;}
.studio-button-skin.bg-style-refined-porcelain-step{--btn-shadow:inset 0 -2px 0 color-mix(in srgb, #d5e0e4 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-refined-porcelain-step .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #d6e6eb;}
.studio-button-skin.bg-style-refined-porcelain-step .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b0c0c8;}
.studio-button-skin.bg-style-refined-brass-cantilever .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #aa9973;border-right:calc(1px * var(--studio-button-border-factor)) solid #aa9973;}
.studio-button-skin.bg-style-refined-twin-flange .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a9bbbd;}
.studio-button-skin.bg-style-refined-twin-flange .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #a9bbbd;}
.studio-button-skin.bg-style-refined-archive-cap .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b7c1ae;}
.studio-button-skin.bg-style-refined-archive-cap .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c6cfbd;}
.studio-button-skin.bg-style-refined-ink-well .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #c0cec2;}
.studio-button-skin.bg-style-refined-plinth-oval .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b7b29e;}
.studio-button-skin.bg-style-refined-plinth-oval .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #d4d0c1;}
.studio-button-skin.bg-style-refined-silver-seam .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b6c3d3;border-right:calc(1px * var(--studio-button-border-factor)) solid #b6c3d3;}
.studio-button-skin.bg-style-refined-faceted-seal{--btn-shadow:inset 0 0 0 1px color-mix(in srgb, #bbc8b5 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-refined-offset-mat .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #d3cab7;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #d3cab7;}
.studio-button-skin.bg-style-refined-offset-mat .bg-play .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #a59d80;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #a59d80;}
.studio-button-skin.bg-style-refined-ginkgo-fold .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b9bb82;}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #d6c1c5;}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #d6c1c5;}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b5bdaa;}
.studio-button-skin.bg-style-refined-magnolia-cup .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #b5bdaa;}
.studio-button-skin.bg-style-refined-willow-slip .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #c1cfae;}
.studio-button-skin.bg-style-refined-willow-slip .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #cfdbc1;}
.studio-button-skin.bg-style-refined-olive-pair .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #cad4ba;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #cad4ba;}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-face::before{border-bottom:calc(2px * var(--studio-button-border-factor)) solid #b9d0ba;}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #abc3ac;}
.studio-button-skin.bg-style-refined-lotus-cradle .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #abc3ac;}
.studio-button-skin.bg-style-refined-seed-pod .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #c2cfab;}
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b0c7a4;}
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #b0c7a4;}
.studio-button-skin.bg-style-refined-clover-cushion .bg-art i:nth-child(3){border:calc(1px * var(--studio-button-border-factor)) solid #b0c7a4;}
.studio-button-skin.bg-style-refined-camellia-rim .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #d5b9a8;}
.studio-button-skin.bg-style-refined-camellia-rim .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #d5b9a8;}
.studio-button-skin.bg-style-refined-camellia-rim .bg-play .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #e4cbbc;}
.studio-button-skin.bg-style-refined-sage-wax .bg-face::before{border-right:calc(1px * var(--studio-button-border-factor)) solid #c7d6c1;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c7d6c1;}
.studio-button-skin.bg-style-refined-sage-wax .bg-play .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #c0cfb9;}
.studio-button-skin.bg-style-refined-poppy-petal .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #e1c4af;}
.studio-button-skin.bg-style-refined-poppy-petal .bg-play .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #e7cbb8;}
.studio-button-skin.bg-style-refined-aloe-cove .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #c4dfc7;border-right:calc(2px * var(--studio-button-border-factor)) solid #c4dfc7;}
.studio-button-skin.bg-style-refined-cotton-husk .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #e0d7c5;}
.studio-button-skin.bg-style-refined-cotton-husk .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c2b59b;}
.studio-button-skin.bg-style-refined-cotton-husk .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #c2b59b;}
.studio-button-skin.bg-style-crafted-xuan-deckle .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-left:calc(1px * var(--studio-button-border-factor)) solid #dedbcb;}
.studio-button-skin.bg-style-crafted-bamboo-weave .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #c5bea5;}
.studio-button-skin.bg-style-crafted-celadon-foot{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #fbfffa var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-celadon-foot .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #98b3a46b;}
.studio-button-skin.bg-style-crafted-celadon-foot .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #a7a692;}
.studio-button-skin.bg-style-crafted-clay-lip{--btn-shadow:inset 0 -2px 0 color-mix(in srgb, #b9a28e var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-clay-lip .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ede0cc;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #ad917d66;}
.studio-button-skin.bg-style-crafted-silk-piping .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #fff9fd;box-shadow:0 0 0 1px color-mix(in srgb, #cbbcc666 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-lacquer-joint .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #95a194;}
.studio-button-skin.bg-style-crafted-lacquer-joint .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #95a194;}
.studio-button-skin.bg-style-crafted-inkstone-slab .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #aab1a4;}
.studio-button-skin.bg-style-crafted-inkstone-slab .bg-face::after{box-shadow:inset 0 1px 0 color-mix(in srgb, #84958055 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #fbfffc;}
.studio-button-skin.bg-style-crafted-porcelain-rim .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #bac9c655;}
.studio-button-skin.bg-style-crafted-bakelite-rocker{--btn-shadow:inset 0 -3px 0 color-mix(in srgb, #383934 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-bakelite-rocker .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #b6a68c66;border-left:calc(1px * var(--studio-button-border-factor)) solid #82776777;}
.studio-button-skin.bg-style-crafted-chrome-capsule{--btn-shadow:inset 0 1px 0 color-mix(in srgb, #ffffff var(--studio-button-shadow-alpha), transparent), inset 0 -1px 0 color-mix(in srgb, #b4bec2 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-chrome-capsule .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b2bec4;}
.studio-button-skin.bg-style-crafted-chrome-capsule .bg-face::after{border-left:calc(2px * var(--studio-button-border-factor)) solid #bbc5c8;border-right:calc(2px * var(--studio-button-border-factor)) solid #bbc5c8;}
.studio-button-skin.bg-style-crafted-ivory-piano{--btn-shadow:inset 0 -3px 0 color-mix(in srgb, #d0ccb9 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-ivory-piano .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-right:calc(1px * var(--studio-button-border-factor)) solid #dcd8c8;}
.studio-button-skin.bg-style-crafted-camera-release .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #aab7ba;box-shadow:inset 0 1px 0 color-mix(in srgb, #ffffff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-meter-glass .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #a8b29e77;}
.studio-button-skin.bg-style-crafted-slider-cap{--btn-shadow:inset 1px 0 0 color-mix(in srgb, #f8fdff var(--studio-button-shadow-alpha), transparent), inset -1px 0 0 color-mix(in srgb, #bdc8cd var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-toggle-saddle .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #adbec0;box-shadow:inset 0 1px 0 color-mix(in srgb, #f7ffff var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-crafted-toggle-saddle .bg-face::after{border-left:calc(2px * var(--studio-button-border-factor)) solid #e9eff0;border-right:calc(2px * var(--studio-button-border-factor)) solid #e9eff0;}
.studio-button-skin.bg-style-charm-patch-pup{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #d9c6b0 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-patch-pup .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) dashed #b29b84;}
.studio-button-skin.bg-style-charm-patch-pup .bg-face::after{border:calc(1px * var(--studio-button-border-factor)) solid #c6ad96;}
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-patch-pup .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #a38b74;}
.studio-button-skin.bg-style-charm-koala-pocket .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #9aaa9d;}
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-koala-pocket .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #90a296;box-shadow:inset 0 0 0 3px color-mix(in srgb, #e2e9e3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-penguin-pebble{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #d0d8dc var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-penguin-pebble .bg-play .bg-art i:nth-child(3){box-shadow:17px 0 0 color-mix(in srgb, #c3a17f var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-axolotl-frill{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #ddc5c7 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-axolotl-frill .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c4a2a5;}
.studio-button-skin.bg-style-charm-toy-brick{--btn-shadow:inset 0 -2px 0 color-mix(in srgb, #ddd5b8 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-toy-brick .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #bcb18a;}
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-toy-brick .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #a89e7a;}
.studio-button-skin.bg-style-charm-balloon-tab .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #f8fbfb;}
.studio-button-skin.bg-style-charm-puzzle-bud .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #a8b59a;}
.studio-button-skin.bg-style-charm-puzzle-bud .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #97a48b;}
.studio-button-skin.bg-style-charm-felt-whale{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #c6d8dc var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-felt-whale .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) dashed #9cb4ba;}
.studio-button-skin.bg-style-charm-duvet-tuck{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #d9d0bd var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) dashed #aea087;border-right:calc(1px * var(--studio-button-border-factor)) solid #c5b99e;}
.studio-button-skin.bg-style-charm-duvet-tuck .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c6bba4;}
.studio-button-skin.bg-style-charm-daruma-pod{--btn-shadow:inset 0 -2px 0 color-mix(in srgb, #c5a091 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-daruma-pod .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a77866;}
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-ribbon-cuff .bg-play .bg-art i:nth-child(2){border:calc(2px * var(--studio-button-border-factor)) solid #c2a3ad;}
.studio-button-skin.bg-style-charm-pleat-bonnet .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #afa0bb;}
.studio-button-skin.bg-style-charm-petit-four{--btn-shadow:inset 0 -2px 0 color-mix(in srgb, #ddc6b3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-petit-four .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #bba089;}
.studio-button-skin.bg-style-charm-petit-four .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b59d89;}
.studio-button-skin.bg-style-charm-sugar-plum .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #faf5fa;}
.studio-button-skin.bg-style-charm-sugar-plum .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) dotted #b294b7;}
.studio-button-skin.bg-style-charm-meringue-kiss{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #dfcdb3 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #fffaf0;}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #cbb79b;}
.studio-button-skin.bg-style-charm-meringue-kiss .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c2b098;}
.studio-button-skin.bg-style-charm-honey-petal .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c2ad78;}
.studio-button-skin.bg-style-charm-honey-petal .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #d0bd88;}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-face::before{border-left:calc(1px * var(--studio-button-border-factor)) solid #cfb4c0;}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-face::after{border-right:calc(1px * var(--studio-button-border-factor)) solid #cfb4c0;}
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(1),
.studio-button-skin.bg-style-charm-ribbon-spool .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #b99ca8;}
.studio-button-skin.bg-style-charm-wafer-seal .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #fff9ee;}
.studio-button-skin.bg-style-charm-knit-pocket .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) dashed #c5b49d;border-right:calc(1px * var(--studio-button-border-factor)) dashed #c5b49d;}
.studio-button-skin.bg-style-charm-knit-pocket .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b7987a;}
.studio-button-skin.bg-style-charm-tab-stack .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #bdc4b5;}
.studio-button-skin.bg-style-charm-tab-stack .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #91a078;}
.studio-button-skin.bg-style-charm-tab-stack .bg-play .bg-art i:nth-child(2){border:calc(1px * var(--studio-button-border-factor)) solid #8e9e98;}
.studio-button-skin.bg-style-charm-notch-disc .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b5c3c3;}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #b7c8cc;}
.studio-button-skin.bg-style-charm-jigsaw-grid .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #c9b6a7;}
.studio-button-skin.bg-style-charm-offset-arch{--btn-shadow:inset 0 -1px 0 color-mix(in srgb, #d8c6b9 var(--studio-button-shadow-alpha), transparent);}
.studio-button-skin.bg-style-charm-offset-arch .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #bba496;}
.studio-button-skin.bg-style-charm-offset-arch .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b99c8d;}
.studio-button-skin.bg-style-charm-studio-bracket .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #b2cbbd;}
.studio-button-skin.bg-style-charm-studio-bracket .bg-face::after{border-right:calc(2px * var(--studio-button-border-factor)) solid #b0c1c9;}
.studio-button-skin.bg-style-charm-studio-bracket .bg-play .bg-art i:nth-child(1){border:calc(2px * var(--studio-button-border-factor)) solid #98b6a9;}
.studio-button-skin.bg-style-charm-studio-bracket .bg-play .bg-art i:nth-child(2){border:calc(2px * var(--studio-button-border-factor)) solid #96afbd;}
.studio-button-skin.bg-style-charm-capsule-split .bg-face::before{border-right:calc(1px * var(--studio-button-border-factor)) solid #acbaa1;}
.studio-button-skin.bg-style-charm-capsule-split .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #c3ad94;}
.studio-button-skin.bg-style-charm-capsule-split .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #c5cbb8;}
.studio-button-skin.bg-style-charm-loop-label .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b0bbd0;}
.studio-button-skin.bg-style-charm-loop-label .bg-play .bg-art i:nth-child(1){border:calc(2px * var(--studio-button-border-factor)) solid #aab5ca;}
.studio-button-skin.bg-style-charm-step-totem .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #bbc7c9;}
.studio-button-skin.bg-style-luminous-glass-hinge .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-right:calc(1px * var(--studio-button-border-factor)) solid #d0ddd7;}
.studio-button-skin.bg-style-luminous-glass-arch .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-left:calc(1px * var(--studio-button-border-factor)) solid #ccdadf;border-right:calc(1px * var(--studio-button-border-factor)) solid #ccdadf;}
.studio-button-skin.bg-style-luminous-glass-pleat .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #a2b4bf;}
.studio-button-skin.bg-style-luminous-glass-waist .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #b7c8cf;}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #d2ccc0;}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #b8b4aa;}
.studio-button-skin.bg-style-luminous-glass-lamella .bg-play .bg-art i:nth-child(2){border-bottom:calc(1px * var(--studio-button-border-factor)) solid #a6b6b7;}
.studio-button-skin.bg-style-luminous-glass-pebble .bg-face::before{border-left:calc(2px * var(--studio-button-border-factor)) solid #fcfffe;border-top:calc(1px * var(--studio-button-border-factor)) solid #fcfffe;}
.studio-button-skin.bg-style-luminous-glass-pebble .bg-face::after{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #92b1a9;}
.studio-button-skin.bg-style-luminous-cyber-cantilever .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #8cabbc;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #8cabbc;}
.studio-button-skin.bg-style-luminous-cyber-twin-fin .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #9aafb9;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #596e79;}
.studio-button-skin.bg-style-luminous-cyber-vernier .bg-face::before{border-bottom:calc(1px * var(--studio-button-border-factor)) solid #57717f;}
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::before,
.studio-button-skin.bg-style-luminous-cyber-relay .bg-face::after{border-left:calc(1px * var(--studio-button-border-factor)) solid #8ea79e;border-right:calc(1px * var(--studio-button-border-factor)) solid #fcfffd;}
.studio-button-skin.bg-style-luminous-jewel-tension .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #fafbf6;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #cad1bf;}
.studio-button-skin.bg-style-luminous-jewel-baguette .bg-face::after{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #d7cbb6;}
.studio-button-skin.bg-style-luminous-jewel-signet .bg-face::before{border:calc(1px * var(--studio-button-border-factor)) solid #6c6254;}
.studio-button-skin.bg-style-luminous-jewel-marquise .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #ffffff;border-bottom:calc(1px * var(--studio-button-border-factor)) solid #d4cbd3;}
.studio-button-skin.bg-style-luminous-jewel-fluted .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #8a969c;}
.studio-button-skin.bg-style-luminous-jewel-bail .bg-face::before{border-top:calc(1px * var(--studio-button-border-factor)) solid #fffdf8;}
.studio-button-skin.bg-style-luminous-jewel-bail .bg-play .bg-art i:nth-child(1){border:calc(1px * var(--studio-button-border-factor)) solid #a18f6c;}
/* Load after buildStudioButtonsCSS() and the existing preview styles. Geometry belongs
   to the host; only the added art uses the gallery's 100 original constructions. */
.studio-button-skin {
  --studio-button-role-scale: 1; --studio-button-role-border: 1; --studio-button-role-shadow: 1;
  --studio-button-visual-scale: calc(var(--studio-button-scale, .88) * var(--studio-button-role-scale));
  --studio-button-border-factor: calc(var(--studio-button-border-weight, .65) * var(--studio-button-role-border));
  --studio-button-shadow-alpha: calc(var(--studio-button-shadow-strength, .45) * var(--studio-button-role-shadow) * 100%);
}
.studio-button-secondary { --studio-button-role-scale: .9; --studio-button-role-border: .8; --studio-button-role-shadow: .6; }
.studio-button-secondary.studio-button-text { --studio-button-role-scale: .96; }
.studio-button-control { --pressed-opacity: 1 !important; }
.studio-button-control > .button-visual {
  background: transparent !important; border-width: 0 !important; box-shadow: none !important;
  overflow: visible; transform: none !important; transition: none; z-index: 0;
}
/* Icon controls scale their face and glyph together around the same center.
   Host hitbox, padding, focus outline and content flow stay untouched. */
.studio-button-control > .button-visual,
.studio-button-control > .sample-content,
.studio-button-thumbnail > .studio-button-artwork,
.studio-button-thumbnail > .sample-content { scale: var(--studio-button-visual-scale); transform-origin: center; }
/* Text labels (including tiny quality labels) retain their original type and inline
   icon size. Only the background height contracts, by at most 20%; width stays fitted. */
.studio-button-control.studio-button-text > .button-visual { scale: 1 clamp(.8, var(--studio-button-visual-scale), 1); }
.studio-button-control.studio-button-text > .sample-content { scale: none; }
.studio-button-control > .button-visual > :not(.studio-button-artwork) { visibility: hidden; }
.studio-button-skin .studio-button-artwork.bg-button {
  position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
  margin: 0; padding: 0; pointer-events: none;
}
.studio-button-control > .sample-content,
.studio-button-thumbnail > .sample-content { color: var(--studio-button-glyph-color, var(--btn-ink)); }
.studio-button-skin .studio-button-artwork,
.studio-button-skin .studio-button-artwork *,
.studio-button-skin .studio-button-artwork *::before,
.studio-button-skin .studio-button-artwork *::after { box-sizing: border-box; pointer-events: none; }
.studio-button-surface > .studio-button-surface-edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 calc(1px * var(--studio-button-border-factor)) var(--btn-edge); opacity: .5;
}
/* Static is the default. Only the shared press owner may enable the finite fx rules. */
.studio-button-skin .studio-button-artwork:not([data-preview='true']) .bg-fx,
.studio-button-skin .studio-button-artwork:not([data-preview='true']) .bg-fx *,
.studio-button-skin .studio-button-artwork:not([data-preview='true']) .bg-fx::before { animation: none !important; }
.studio-button-control:disabled .studio-button-artwork .bg-fx,
.studio-button-control[aria-disabled='true'] .studio-button-artwork .bg-fx,
[data-page-hidden='true'] .studio-button-skin .bg-fx { display: none !important; }
.studio-button-thumbnail .bg-fx { display: none !important; }
.studio-button-thumbnail .bg-face { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .studio-button-skin .bg-fx { display: none !important; }
  .studio-button-skin .bg-fx, .studio-button-skin .bg-fx *, .studio-button-skin .bg-fx::before { animation: none !important; }
  .studio-button-skin .bg-face { transition: none; }
}
@media (forced-colors: active) {
  .studio-button-control > .sample-content, .studio-button-thumbnail > .sample-content { color: ButtonText; }
  .studio-button-surface > .studio-button-surface-edge { box-shadow: none; }
}

.studio-buttons-panel .studio-buttons-boundary { padding-left: 10px; border-left: 2px solid var(--line); }
.studio-buttons-panel .studio-buttons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.studio-buttons-panel .studio-button-choice {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0;
  padding: 18px 10px 10px; text-align: left; border: 1px solid var(--line); background: var(--sheet);
  border-radius: 7px; transition: none; transform: none;
}
.studio-buttons-panel .studio-button-choice[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.studio-buttons-panel .studio-button-thumbnail { position: relative; display: block; width: 60px; height: 60px; margin: 2px auto 4px; isolation: isolate; }
.studio-buttons-panel .studio-button-thumbnail > .sample-content { position: absolute; inset: 0; display: grid; place-items: center; font-size: 25px; line-height: 1; pointer-events: none; }
.studio-buttons-panel .studio-button-caption { display: flex; flex-direction: column; gap: 3px; }
.studio-buttons-panel .studio-button-caption small { color: var(--muted); font: 10px ui-monospace, monospace; }
.studio-buttons-panel .studio-button-caption strong { color: var(--ink); font-size: 12px; font-weight: 550; }
.studio-buttons-panel .studio-button-caption > span { color: var(--muted); font-size: 10px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.studio-buttons-panel .studio-buttons-pagination { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 16px; font-size: 11px; font-variant-numeric: tabular-nums; }
.studio-buttons-panel .studio-buttons-pagination button { padding: 7px 10px; }
.studio-buttons-panel [hidden] { display: none !important; }

/* Authoring chrome only. The device canvas keeps its original logical size. */
[hidden] { display: none !important; }
#app { height: 100dvh; min-height: 480px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.app-header { min-height: 64px; padding: 10px 20px; gap: 24px; }
.brand-mark { width: 32px; height: 32px; font-size: 21px; border-radius: 8px; }
.identity { gap: 10px; }
.identity h1 { font-size: 15px; letter-spacing: .015em; white-space: nowrap; }
.identity p { margin-top: 2px; font-size: 10px; letter-spacing: 0; }
.project-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; padding-left: 24px; border-left: 1px solid var(--line); }
.project-name { padding: 0; min-height: 20px; max-width: 30vw; text-align: left; background: transparent; border: 0; border-radius: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-name:hover { background: transparent; color: var(--accent); }
.project-status { font-size: 10px; color: var(--muted); }
.project-status[data-dirty=true]::before { content: ''; width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #9f641c; margin: 0 5px 2px 0; }
.header-actions { gap: 8px; }
.header-actions button, .header-actions .open-button { font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.studio-icon { display: inline-block; width: 17px; height: 17px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--studio-icon) center / contain no-repeat; mask: var(--studio-icon) center / contain no-repeat; }
.app-footer { min-height: 32px; padding: 7px 20px; align-items: center; }
.app-footer > span:last-child { flex-shrink: 0; }
.status-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workbench { width: 100%; max-width: none; min-height: 0; margin: 0; grid-template-columns: 272px minmax(280px, 1fr) 340px; overflow: hidden; }
.editor, .inspector { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--sheet); }
.editor-heading { padding: 16px 16px 12px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.editor-heading h2 { font-size: 13px; }
.editor-heading .segmented { align-self: auto; }
.segmented button { padding: 5px 10px; }
.editor-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 12px 12px; }
.editor-tabs button { min-height: 34px; font-size: 12px; padding: 6px 3px; border-radius: 5px; }
.editor-tabs button[aria-selected=true] { background: var(--wash); box-shadow: none; }
.editor-panel { flex: 1; min-height: 0; max-height: none; padding: 0 16px 20px; overflow-y: auto; }
.editor-panel, .inspector-content, .validation-panel { scrollbar-gutter: stable; overscroll-behavior: contain; }
.form-group { padding-top: 16px; }
.form-group + .form-group { margin-top: 18px; }
.form-group > h3 { margin-bottom: 12px; font-size: 13px; }
.form-group > .hint { margin-top: 8px; }
.field { margin-top: 12px; gap: 6px; }
.hint { font-size: 11px; line-height: 1.65; }
.catalog-inspect { display: none; margin: 10px 16px; }
.workspace-switcher { display: none; }
.inspector { border-left: 1px solid var(--line); }
.inspector-heading { padding: 20px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inspector-heading h2 { font-size: 13px; }
.inspector-status { font-size: 10px; color: var(--muted); white-space: nowrap; }
.inspector-status.error { color: var(--error); }
.inspector-tabs { display: flex; padding: 0 16px; gap: 18px; border-bottom: 1px solid var(--line); }
.inspector-tabs button { border: 0; background: transparent; border-radius: 0; color: var(--muted); padding: 10px 2px; font-size: 12px; }
.inspector-tabs button[aria-selected=true] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); font-weight: 600; }
.inspector-parameters { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.inspector-sections { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.inspector-sections button { font-size: 11px; min-height: 30px; padding: 5px 8px; border: 0; background: transparent; color: var(--muted); }
.inspector-sections button[aria-selected=true] { background: var(--wash); color: var(--accent); font-weight: 600; }
.inspector-content { overflow-y: auto; min-height: 0; flex: 1; padding: 0 18px 24px; }
.inspector-content > .form-group { border: 0; margin: 0; padding-top: 10px; }
.inspector-content > .form-group > h3 { display: none; }
.inspector-content .field { margin-top: 18px; }
.inspector-content .field > label { color: var(--muted); font-size: 12px; }
.inspector-content input[type=number] { font-variant-numeric: tabular-nums; }
.inspector-selected { font-size: 16px; font-weight: 600; }
.inspector-help { margin: 2px 0 8px; }
.inspector-help summary { color: var(--muted); font-size: 11px; }
.inspector-content .scene-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.inspector-content .scene-colors input[type=color] { width: 100%; height: 32px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--sheet); cursor: pointer; }
.inspector-content .form-group .form-group { padding: 0; }
.inspector-content .form-group .form-group > h3 { display: none; }
.inspector-content .text-button { margin-top: 10px; }
.validation-panel { border: 0; background: var(--sheet); overflow-y: auto; padding: 18px; min-height: 0; flex: 1; grid-column: auto; }
.validation-panel > div { display: block; }
.validation-panel h2 { font-size: 14px; margin-bottom: 12px; }
.validation-panel h3 { margin-top: 20px; }
.inspector-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.palette-shortcut { display: flex; align-items: center; gap: 12px; padding: 12px 8px; font-size: 12px; text-align: left; }
.palette-shortcut .swatches i { width: 14px; height: 24px; }
.studio-effect-option { min-height: 96px; padding: 10px; }
.studio-effect-option strong { font-size: 12px; }
.studio-effect-option small { font-size: 10px; }
.studio-effect-grid { margin-top: 12px; }
.studio-effect-filter button { padding: 6px 8px; font-size: 11px; }
.studio-buttons-panel .studio-buttons-grid { grid-template-columns: 1fr; }
.studio-buttons-panel .studio-button-choice { min-height: 106px; }
.studio-buttons-panel .studio-button-thumbnail { flex-shrink: 0; }
.studio-buttons-panel .studio-buttons-pagination { position: sticky; top: 0; z-index: 2; background: var(--sheet); padding: 8px 0; border-bottom: 1px solid var(--line); }
.inspector-content .field:has(> .studio-precision) { display: grid; grid-template-columns: minmax(0, 1fr) 70px 28px; align-items: center; gap: 0 7px; }
.inspector-content .field:has(> .studio-precision) > label { grid-row: 1; grid-column: 1; }
.inspector-content .studio-precision { display: contents; }
.inspector-content .studio-precision input[type=range] { grid-column: 1 / -1; grid-row: 2; }
.inspector-content .field .studio-precision input[type=number] { grid-column: 2; grid-row: 1; width: 70px; min-height: 30px; height: 30px; font-size: 12px; padding: 4px 6px; }
.inspector-content .studio-precision button { grid-column: 3; grid-row: 1; min-height: 30px; width: 28px; border-color: transparent; color: var(--muted); }
.editor input[type=range], .inspector input[type=range] { height: 32px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.inspector input[type=range] { appearance: none; background: transparent; }
.inspector input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line); }
.inspector input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 3px solid var(--sheet); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); margin-top: -6px; }
.inspector input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.inspector input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--sheet); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.preview-workspace { min-height: 0; padding: 16px 20px 10px; display: flex; flex-direction: column; overflow: hidden; }
.preview-toolbar { gap: 10px; flex-shrink: 0; }
.preview-toolbar .field { margin-top: 0; min-width: 0; flex: 1; }
.preview-toolbar .field:nth-child(2) { flex: 1.2; }
.preview-toolbar .field:last-child { flex: .7; }
.preview-toolbar select { font-size: 11px; min-height: 32px; padding: 6px 8px; border-color: transparent; background: var(--sheet); }
.preview-toolbar label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.preview-heading { margin: 4px 0 0; min-height: 20px; flex-shrink: 0; }
.preview-area { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.preview-sheet { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 18px; align-items: center; justify-content: center; }
.preview-sheet[data-zoom=actual] { display: block; }
.preview-frame { position: relative; flex-shrink: 0; margin: auto; }
.preview-sheet[data-zoom=fit] .preview-frame { overflow: hidden; border-radius: 23px; outline: 5px solid #282e31; box-shadow: 0 14px 24px #20292e1e; }
.preview-frame > .device { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; min-height: 0; max-width: none; margin: 0; }
.preview-samples { flex-shrink: 0; margin: 0; text-align: center; max-height: 150px; overflow: auto; }
.preview-samples summary { font-size: 10px; color: var(--muted); padding: 5px; }
.preview-samples .button-sampler { margin: 0 auto 5px; padding: 6px; }
.preview-caption { font-size: 10px; }
.preview-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 5px 0; flex-shrink: 0; }
.preview-pages button { min-height: 30px; padding: 4px 10px; font-size: 11px; color: var(--muted); border: 0; background: transparent; }
.preview-pages button:hover { background: #ffffff80; }
.preview-pages button[aria-pressed=true] { color: var(--ink); font-weight: 600; background: var(--sheet); box-shadow: 0 1px 3px #142b2012; }
.studio-audition { flex-shrink: 0; width: 100%; max-width: 520px; align-self: center; margin: 4px auto 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; }
.studio-audition > small { font-size: 10px; }
.studio-audio-heading { gap: 8px 12px; justify-content: center; flex-wrap: wrap; text-align: center; }
.studio-audio-status { font-size: 11px; max-width: 100%; }
.studio-audio-heading button { min-height: 30px; font-size: 11px; padding: 5px 8px; border: 0; background: var(--sheet); }
.studio-audio-transport { margin-top: 6px; gap: 8px; }
.workbench:not([data-panel=effects]) .studio-audition:not(:has(.studio-audio-transport:not([hidden]))) { display: none; }
.studio-audition > small { display: none; }
@media (min-width: 1500px) { .workbench { grid-template-columns: 300px minmax(320px, 1fr) 368px; } .preview-workspace { padding-inline: 28px; } }
@media (max-width: 1040px) {
  .workbench { grid-template-columns: minmax(280px, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); }
  .workspace-switcher { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--sheet); }
  .workspace-switcher [data-value=preview] { display: none; }
  .preview-workspace { grid-column: 1; grid-row: 2; }
  .editor, .inspector { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line); border-right: 0; }
  .workbench[data-side=catalog] .inspector, .workbench:not([data-side=catalog]) .editor { display: none; }
  .catalog-inspect { display: block; }
  .offline-label { display: none; }
}
@media (max-width: 700px) {
  #app { min-height: 500px; }
  .app-header { padding: 9px 12px; gap: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .identity p, .brand-mark { display: none; }
  .identity h1 { font-size: 15px; }
  .project-heading { border: 0; padding: 0; margin: 0; flex-direction: row; align-items: center; gap: 8px; justify-self: end; }
  .project-name { max-width: 38vw; font-size: 11px; }
  .header-actions { width: 100%; justify-content: stretch; gap: 6px; grid-column: 1 / -1; }
  .header-actions > button, .header-actions > label { flex: 1; padding: 6px 4px; min-height: 36px; font-size: 11px; white-space: nowrap; justify-content: center; }
  .header-actions .history-actions button { padding-inline: 7px; min-width: 30px; font-size: 11px; min-height: 36px; }
  .header-actions > button .studio-icon, .open-button .studio-icon { display: none; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .workspace-switcher { justify-content: center; }
  .workspace-switcher [data-value=preview] { display: block; }
  .preview-workspace, .editor, .inspector { grid-column: 1; border: 0; }
  .workbench:not([data-side=preview]) .preview-workspace, .workbench[data-side=preview] .inspector { display: none; }
  .workspace-switcher .segmented button { min-height: 40px; }
  .inspector-sections button { min-height: 40px; }
  .editor-heading { padding-block: 12px; }
  .editor-panel { max-height: none; }
  .studio-buttons-panel .studio-buttons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-footer { flex-direction: row; padding-inline: 12px; }
  .app-footer > span:last-child { display: none; }
}

/* Authoring history and recovery stay outside the simulated app. */
#app { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.app-header { grid-row: 1; }
.draft-banner { grid-row: 2; }
.workbench { grid-row: 3; }
.app-footer { grid-row: 4; }
.history-actions { display: flex; gap: 2px; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.history-actions button { min-width: 32px; padding: 7px; border: 0; background: transparent; }
.history-actions button:hover { background: var(--field); }
.draft-banner { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--field); border-bottom: 1px solid var(--line); font-size: 12px; }
.draft-banner > span { flex: 1; }
.draft-banner button { min-height: 30px; font-size: 12px; padding: 4px 10px; }
.draft-status { font-size: 11px; color: var(--muted); }
.draft-status[data-state=unavailable], .draft-status[data-state=invalid] { color: var(--error); }
@media (max-width:700px) {
  .header-actions { flex-wrap: wrap; }
  .history-actions { border-right: 0; padding: 0; }
  .draft-banner { flex-wrap: wrap; padding: 8px 12px; }
  .draft-banner > span { flex-basis: 100%; }
}

.contact-sheet { width: min(1400px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--sheet); }
.contact-sheet::backdrop { background: #172b2655; }
.contact-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; position: sticky; top: 0; background: var(--sheet); border-bottom: 1px solid var(--line); z-index: 2; }
.contact-sheet h2 { font-size: 17px; margin: 0 0 5px; }
.contact-sheet p { font-size: 12px; color: var(--muted); }
.contact-sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 24px; padding: 24px; }
.contact-sheet-page { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; border-radius: 8px; padding: 12px; background: var(--wash); }
.contact-sheet-page small { font-size: 11px; color: var(--muted); }
.contact-sheet-frame { position: relative; overflow: hidden; pointer-events: none; }
.contact-sheet-frame > .device { margin: 0; max-width: none; position: absolute; inset: 0 auto auto 0; }
.preview-tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.preview-tools button { min-height: 30px; font-size: 11px; }
.preview-tools > button { margin-left: auto; border: 0; padding: 6px 8px; background: transparent; color: var(--muted); }
.preview-tools > button:hover { background: var(--sheet); }
.authoring-mode { display: flex; align-items: center; gap: 4px; padding: 3px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.authoring-mode button { border: 0; background: none; }
.authoring-mode button[aria-pressed=true] { background: var(--wash); color: var(--accent); }
.preview-checks-toggle { position: static; }
.preview-checks-toggle > summary { font-size: 11px; cursor: pointer; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.preview-checks-toggle > summary:hover, .preview-checks-toggle[open] > summary { background: var(--sheet); }
.preview-checks-toggle > section { position: absolute; z-index: 15; right: 0; top: 100%; width: min(330px, 100%); max-height: min(65vh, var(--preview-checks-height, 65vh)); overflow: auto; padding: 18px; background: var(--sheet); border: 0; border-radius: 9px; box-shadow: 0 4px 8px #132a2429; }
.contact-sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.canvas-selection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-block: 6px; }
.canvas-selection-controls .segmented button { min-height: 32px; padding: 5px 14px; }
.canvas-selection-hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
[data-canvas-mode='edit'], [data-canvas-mode='edit'] button, [data-canvas-mode='edit'] input { cursor: crosshair; }
.canvas-selection-overlay {
  position: fixed; z-index: 80; box-sizing: border-box; pointer-events: none;
  border: 2px solid var(--accent, #365c46); border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sheet, #fff); margin: 0; padding: 0;
}
.canvas-selection-label {
  position: absolute; left: -2px; top: -2px; transform: translateY(-100%);
  box-sizing: border-box; max-width: min(280px, 80vw); padding: 4px 8px;
  background: var(--accent, #365c46); color: var(--sheet, #fff);
  border: 1px solid var(--sheet, #fff); border-radius: 4px 4px 4px 0;
  font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.canvas-selection-overlay[data-label-inside='true'] .canvas-selection-label { top: 0; transform: none; }
@media (forced-colors: active) {
  .canvas-selection-overlay { border-color: Highlight; }
  .canvas-selection-label { background: Highlight; color: HighlightText; }
}

/* The catalog follows its available width, including the compact three-column workspace. */
.theme-kits-catalog { container: theme-catalog / inline-size; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 24px; }
.theme-kits-catalog > h3 { font-size: 16px; margin-bottom: 8px; }
.theme-kits-catalog > .theme-kit-intro { margin: 0; }
.theme-kits-catalog > .theme-kit-preview-note { margin: 4px 0 22px; max-width: 65ch; font-size: 12px; }
.theme-kits { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px 24px; }
.theme-kit-card { min-width: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.theme-kit-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.theme-kit-heading h4 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; text-wrap: balance; }
.theme-kit-number { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.theme-kit-current { margin-left: auto; font-size: 12px; color: var(--accent); }
.theme-kit-note { margin: 6px 0 14px; min-height: 3.3em; font-size: 12px; line-height: 1.65; color: var(--muted); }
.theme-kit-sample { padding: 10px 14px 14px; border-radius: 8px; background: var(--kit-surface); color: var(--kit-ink); }
.theme-kit-sample-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 14px; }
.theme-kit-modes { display: flex; gap: 2px; }
.theme-kit-mode { min-width: 48px; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--kit-muted); font-size: 12px; }
.theme-kit-mode[aria-pressed='true'] { border-color: var(--kit-line); background: var(--kit-raised); color: var(--kit-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.theme-kit-mode:not([aria-pressed='true']):hover { background: var(--kit-raised); color: var(--kit-ink); }
.theme-kit-swatches { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
.theme-kit-swatches > span { width: 13px; height: 13px; border: 1px solid var(--kit-line); border-radius: 50%; }
.theme-kit-thumbnails { display: grid; grid-template-columns: repeat(2, minmax(0, 128px)); justify-content: center; gap: 14px; }
.theme-kit-page { min-width: 0; margin: 0; }
.theme-kit-viewport { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 4px; pointer-events: none; contain: layout paint; }
.theme-kit-viewport > .device { position: absolute; top: 0; left: 0; margin: 0; transform-origin: 0 0; max-width: none; }
.theme-kit-viewport *, .theme-kit-viewport *::before, .theme-kit-viewport *::after { animation: none !important; transition: none !important; }
.theme-kit-page figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.theme-kit-sample .theme-kit-page figcaption { color: var(--kit-muted); }
.theme-kit-recipe { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; font-size: 12px; line-height: 1.65; }
.theme-kit-recipe > span { flex-shrink: 0; color: var(--muted); }
.theme-kit-recipe > strong { font-size: inherit; font-weight: 500; overflow-wrap: anywhere; }
.theme-kit-details { margin-top: 0; }
.theme-kit-details summary { min-height: 40px; padding: 10px 0; cursor: pointer; font-size: 12px; color: var(--muted); }
.theme-kit-details summary:hover { color: var(--ink); }
.theme-kit-details > .field { margin: 0 0 12px; }
.theme-kit-details select { min-height: 40px; }
.theme-kit-expanded-preview { max-width: 280px; margin: 0 auto 14px; }
.theme-kit-expanded-preview:empty { display: none; }
.theme-kit-page-large figcaption { font-size: 12px; }
.theme-kit-apply { display: block; width: 100%; min-height: 40px; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); font-size: 13px; font-weight: 500; }
.theme-kit-apply:hover { border-color: var(--ink); background: var(--desk); }
.theme-kit-apply:active { background: var(--line); }
.theme-kit-apply:focus-visible, .theme-kit-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.theme-kit-mode:focus-visible { outline: 2px solid var(--kit-ink); outline-offset: 3px; }
@container theme-catalog (min-width: 600px) {
  .theme-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container theme-catalog (min-width: 980px) {
  .theme-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .theme-kit-thumbnails { gap: 10px; }
}

/* Start and restore controls are owned here; shell spacing uses shared tokens. */
.quick-start.start-workspace { container: start-workspace / inline-size; padding-top: 20px; }
.original-start-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.original-start-heading > div { flex: 1 1 180px; min-width: 0; }
.original-start-heading h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.original-start-heading > button { flex-shrink: 0; min-height: 40px; color: var(--accent); border-color: var(--accent); }
.quick-start.start-workspace .quick-start-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 16px 0 0; }
.quick-start.start-workspace .quick-start-choice { display: flex; align-items: center; min-width: 0; min-height: 64px; padding: 10px 0; gap: 12px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.quick-start.start-workspace .quick-start-choice:hover { background: var(--desk); }
.quick-start.start-workspace .studio-icon { flex-shrink: 0; color: var(--muted); margin-inline: 2px; }
.quick-start.start-workspace .quick-start-choice > span:not(.quick-start-arrow) { min-width: 0; }
.quick-start.start-workspace .quick-start-choice strong { display: block; font-size: 13px; font-weight: 550; }
.quick-start.start-workspace .quick-start-choice small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.quick-start.start-workspace .quick-start-arrow { margin-left: auto; padding-right: 4px; color: var(--muted); }
.quick-start-originals { margin-top: 6px; }
.quick-start-originals > summary { min-height: 40px; padding: 10px 0; color: var(--muted); font-size: 12px; }
.quick-start-originals > summary:hover { color: var(--ink); }
.quick-start-originals-content { padding-bottom: 4px; }
.original-images-action.image-restore { padding: 12px 0; border: 0; }
.original-images-action.image-restore strong { font-size: 12px; font-weight: 550; }
.original-images-action.image-restore .original-images-controls { display: flex; flex-wrap: wrap; margin-top: 8px; gap: 6px; }
.original-images-action.image-restore .original-images-controls select { flex: 1; width: auto; min-width: 120px; min-height: 40px; font-size: 12px; }
.original-images-action.image-restore .original-images-controls button { min-height: 40px; font-size: 12px; }
.original-images-action.image-restore .hint { margin-top: 4px; }
@container start-workspace (min-width: 600px) {
  .quick-start.start-workspace .quick-start-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0; border-block: 1px solid var(--line); }
  .quick-start.start-workspace .quick-start-choice { padding: 8px 12px; border-bottom: 0; }
  .quick-start.start-workspace .quick-start-choice:first-child { padding-left: 0; }
  .quick-start.start-workspace .quick-start-choice + .quick-start-choice { border-inline-start: 1px solid var(--line); }
  .quick-start-originals-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-kit-apply, .theme-kit-mode, .quick-start.start-workspace button { transition: none; }
}
.library-panel .library-kind-nav { margin: 8px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.library-panel .library-kind-nav button { font-size: 12px; }
.library-panel .library-kind-nav button:not([aria-pressed=true]):hover { background: var(--desk); }
.library-panel .library-style, .library-panel .library-material { border-radius: 4px; box-shadow: none; }
.library-panel .library-material { border-color: transparent; background: transparent; }
.library-panel .library-material:hover, .library-panel .library-style:not([aria-pressed=true]):hover { background: var(--desk); }
.library-panel .library-style strong, .library-panel .library-material strong { font-family: inherit; font-size: 13px; font-weight: 550; }
.library-panel .library-material strong, .library-panel .library-material small { margin-inline: 0; }
.library-panel .library-material-sample { border: 0; border-radius: 3px; }
@media (pointer: coarse) {
  .original-images-action.image-restore .original-images-controls select,
  .original-images-action.image-restore .original-images-controls button,
  .library-panel .library-kind-nav button { min-height: 40px; }
}

.preview-checks { min-width: 0; }
.preview-checks > .hint { margin-top: 9px; }
.preview-checks fieldset { min-width: 0; margin: 10px 0 14px; padding: 0; border: 0; }
.preview-checks legend { padding: 0; font-size: 12px; color: var(--muted); }
.contact-sheet-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.contact-sheet-pages .check-label { margin: 0; min-height: 36px; align-items: center; color: var(--ink); }
.contact-sheet-pages input { flex-shrink: 0; }
.contact-sheet-options > button { margin-top: 12px; }
.compatibility-targets { display: grid; gap: 16px; }
.compatibility-target { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.compatibility-target .field { margin-top: 8px; }
.compatibility-target .target-result { margin-top: 10px; font-size: 12px; }
.target-result[data-status='supported'] { color: var(--accent); }
.target-result[data-status='upgrade-required'] { color: var(--error); }
.target-result[data-status='unverified'] { color: var(--muted); }
.compatibility-summary .device-acceptance { color: var(--muted); font-size: 12px; }
.compatibility-summary .cost-note { border-left: 2px solid var(--line); padding-left: 10px; margin-top: 12px; }

.material-preferences h3 { margin-bottom: 8px; }
.material-preferences-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.material-preferences-actions > button { flex: 1 1 auto; }
.material-preferences-status { min-height: 2.8em; }
.material-presets { border-top: 1px solid var(--line); padding-top: 12px; }
.material-presets > summary { cursor: pointer; min-height: 36px; color: var(--accent); font-size: 12px; }
.material-presets > button { margin-top: 10px; }
.material-presets > .hint { margin-top: 12px; }
.palette-extractor .palette-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.palette-swatches button { flex: 1 1 64px; padding: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.palette-swatches button[aria-pressed='true'] { outline: 2px solid var(--accent); outline-offset: 2px; }
.palette-swatch { display: block; height: 30px; margin-bottom: 5px; border: 1px solid #0002; border-radius: 3px; }
.palette-preview { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.palette-preview-surface { padding: 12px; border-radius: 4px; }
.palette-preview-surface p { margin: 6px 0 12px; }
.palette-preview-accent { display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 12px; }
.palette-extractor [hidden] { display: none; }

/* Append after the normal preview styles. These are browser text simulations,
   never a device zoom, native Dynamic Type setting, or saved theme mutation. */
.preview-artwork-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.preview-artwork-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; background: var(--theme-surface); color: var(--theme-textSecondary); }
.app-mini-cover .preview-artwork-empty small, .app-track-art .preview-artwork-empty small { display: none; }
.app-device .preview-lyrics-empty { color: var(--theme-textSecondary); }
.app-device [data-preview-transport]:disabled { cursor: not-allowed; opacity: .5; }

.app-device[data-preview-font-scale='1.5'] { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] h1 { font-size: calc(20.6px * 1.5); line-height: 42px; }
.app-device[data-preview-font-scale='1.5'] h3 { font-size: 25.5px; }
.app-device[data-preview-font-scale='1.5'] small { font-size: 16.5px; }
.app-device[data-preview-font-scale='1.5'] .app-status-bar { font-size: 21px; }
.app-device.tablet[data-preview-font-scale='1.5'] .app-status-bar { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] :is(.app-action, .app-link, .app-section-subtitle) { font-size: 17.25px; }
.app-device[data-preview-font-scale='1.5'] .app-copy > strong { font-size: 19.5px; line-height: 28.5px; }
.app-device[data-preview-font-scale='1.5'] .app-copy > small { font-size: 16.2px; line-height: 24px; }
.app-device[data-preview-font-scale='1.5'] .app-image-tile .app-copy > strong { font-size: 18px; line-height: 25.5px; }
.app-device[data-preview-font-scale='1.5'] .app-image-tile .app-copy > small { font-size: 15px; }
.app-device[data-preview-font-scale='1.5'] .app-home-header h1 { font-size: 31.5px; line-height: 40.5px; }
.app-device[data-preview-font-scale='1.5'] .app-hero-copy > small { font-size: 15.75px; }
.app-device[data-preview-font-scale='1.5'] .app-hero-copy h2 { font-size: 37.5px; line-height: 45px; }
.app-device[data-preview-font-scale='1.5'] .app-hero-copy p { font-size: 18px; line-height: 27px; }
.app-device[data-preview-font-scale='1.5'] .app-mood .app-copy > strong { font-size: 21px; }
.app-device[data-preview-font-scale='1.5'] .app-mood .app-copy > small { font-size: 15.75px; }
.app-device[data-preview-font-scale='1.5'] .app-recent .app-copy > strong { font-size: 16.2px; }
.app-device[data-preview-font-scale='1.5'] .app-track-number { font-size: 16.5px; }
.app-device[data-preview-font-scale='1.5'] .app-track-row .app-copy > strong { font-size: 18.3px; }
.app-device[data-preview-font-scale='1.5'] .app-track-row .app-copy > small { font-size: 16.2px; }
.app-device[data-preview-font-scale='1.5'] .app-track-home .app-copy > strong { font-size: 21px; }
.app-device[data-preview-font-scale='1.5'] .app-track-home .app-copy > small { font-size: 17.25px; }
.app-device[data-preview-font-scale='1.5'] .app-duration { font-size: 15.45px; }
.app-device[data-preview-font-scale='1.5'] .app-search-input { font-size: 18.9px; }
.app-device[data-preview-font-scale='1.5'] :is(.app-search-header-copy, .app-page-heading, .app-rankings-header-copy) p { font-size: 16.95px; }
.app-device[data-preview-font-scale='1.5'] :is(.app-segment, .app-track-toolbar > span) { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] .app-favorite-count strong { font-size: 30.75px; line-height: 39px; }
.app-device[data-preview-font-scale='1.5'] .app-favorite-count small { font-size: 16.65px; }
.app-device[data-preview-font-scale='1.5'] .app-profile-copy > strong { font-size: 26.25px; }
.app-device[data-preview-font-scale='1.5'] .app-profile-detail { font-size: 16.8px; line-height: 24px; }
.app-device[data-preview-font-scale='1.5'] .app-profile-copy > small { font-size: 16.05px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-section { font-size: 16.8px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-tile .app-copy > strong { font-size: 23.1px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-tile .app-copy > small { font-size: 16.8px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-tool .app-copy > strong { font-size: 20.55px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-about .app-copy > strong { font-size: 18.6px; }
.app-device[data-preview-font-scale='1.5'] .app-mine-about .app-copy > small { font-size: 15.9px; line-height: 22.5px; }
.app-device[data-preview-font-scale='1.5'] .app-tab { font-size: 15.75px; line-height: 19.5px; }
.app-device[data-preview-font-scale='1.5'] .app-mini-copy strong { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] .app-mini-copy small { font-size: 15px; }
.app-device[data-preview-font-scale='1.5'] .app-mini-copy .app-mini-time { font-size: 13.2px; }
.app-device[data-preview-font-scale='1.5'] .app-panel-header h1 { font-size: 27px; }
.app-device[data-preview-font-scale='1.5'] .app-sample-note { font-size: 15px; line-height: 24px; }
.app-device[data-preview-font-scale='1.5'] :is(.app-settings-group h3, .app-setting-row > span) { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] .app-setting-row small { font-size: 15px; }
.app-device[data-preview-font-scale='1.5'] .app-playlist-hero .app-copy > strong { font-size: 28.5px; line-height: 40.5px; }
.app-device[data-preview-font-scale='1.5'] .app-account-hero .app-copy > strong { font-size: 25.5px; }
.app-device[data-preview-font-scale='1.5'] :is(.app-account-note, .app-server-note, .app-preview-notice) { font-size: 16.5px; }
.app-device[data-preview-font-scale='1.5'] .app-server-note { line-height: 27px; }
.app-device[data-preview-font-scale='1.5'] .app-preview-notice { line-height: 25.5px; }
.app-device[data-preview-font-scale='1.5'] .app-download-meta { font-size: 13.5px !important; }

.app-device[data-preview-font-scale='1.5'] .layout-track-info h2 { font-size: 26.7px; line-height: 36px; }
.app-device[data-preview-font-scale='1.5'] .layout-track-info > p { font-size: 18px; }
.app-device[data-preview-font-scale='1.5'] .layout-quality .sample-component { font-size: 15.15px; }
.app-device[data-preview-font-scale='1.5'] .layout-quality { flex-wrap: wrap; }
.app-device[data-preview-font-scale='1.5'] .layout-inline-lyrics { font-size: 22.65px; height: auto !important; }
.app-device[data-preview-font-scale='1.5'] .layout-inline-lyrics span { height: 43.5px; line-height: 43.5px; }
.app-device[data-preview-font-scale='1.5'] .layout-visual-area { overflow-y: auto !important; }
.app-device[data-preview-font-scale='1.5'] .layout-times { font-size: 15.6px; line-height: 21px; }
.app-device[data-preview-font-scale='1.5'] .full-lyrics-title strong { font-size: 22.5px; }
.app-device[data-preview-font-scale='1.5'] .full-lyrics-title span { font-size: 16.5px; }
.app-device[data-preview-font-scale='1.5'] .workshop-full-lyrics .layout-player-top { height: auto; min-height: 64px; }
.app-device[data-preview-font-scale='1.5'] .full-lyrics-scroll p { font-size: 24px; line-height: 36px; }
.app-device[data-preview-font-scale='1.5'] .full-lyrics-footer { font-size: 16.5px; height: auto; min-height: 44px; }

/* Clear task navigation; editable controls keep their existing owners. */
#app { grid-template-columns: minmax(0, 1fr); }
.workbench { grid-template-columns: clamp(340px, 26vw, 480px) minmax(440px, 1fr) clamp(340px, 26vw, 480px); grid-template-rows: auto minmax(0, 1fr); }
.workspace-navigation { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 7px 20px; background: var(--sheet); border-bottom: 1px solid var(--line); min-width: 0; }
.workspace-navigation .editor-tabs { display: flex; flex: 0 1 auto; justify-content: safe center; min-width: 0; max-width: 100%; gap: 6px; overflow-x: auto; padding: 2px; border: 0; scrollbar-width: thin; }
.workspace-navigation .editor-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-width: 112px; min-height: 42px; padding: 9px 16px; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid transparent; color: var(--ink); }
.workspace-navigation .editor-tabs button:hover { background: var(--field); }
.workspace-navigation .editor-tabs button[aria-selected=true] { background: var(--wash); color: var(--accent); border-color: color-mix(in oklch, var(--accent) 24%, var(--sheet)); box-shadow: 0 1px 2px #20382c10; font-weight: 650; }
.workspace-navigation .editor-tabs button:focus-visible { outline-offset: -3px; }
.workspace-navigation .editor-tabs .studio-icon { width: 18px; height: 18px; }
.workspace-mode { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.workspace-mode-compact { display: none; }
.workspace-mode .segmented { background: var(--sheet); border: 1px solid var(--line); padding: 3px; border-radius: 10px; }
.workspace-mode .segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 78px; min-height: 38px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 7px; }
.workspace-mode .segmented button[aria-pressed=true] { color: var(--sheet); background: var(--accent); box-shadow: 0 1px 3px #182c2020; }
.workspace-mode .studio-icon { width: 16px; height: 16px; }
.preview-checks-toggle { margin-top: 0; }
.canvas-selection-hint { display: none; }
.canvas-selection-controls { margin-block: 0; }
.canvas-selection-controls .segmented { background: transparent; padding: 0; }
.canvas-selection-controls .segmented button { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.workbench > .editor, .workbench > .preview-workspace, .workbench > .inspector { grid-row: 2; }
.workbench > .editor { grid-column: 1; }
.workbench > .preview-workspace { grid-column: 2; }
.workbench > .inspector { grid-column: 3; }
.editor-heading { padding: 22px 20px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.editor-heading h2 { font-size: 18px; letter-spacing: -.015em; }
.editor-heading p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.editor-panel { padding: 0 18px 24px; }
.editor-heading > div { min-width: 0; }
.start-settings, .start-catalog-return { display: none; }
.workbench[data-panel=basics] .start-settings { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; min-height: 32px; padding: 6px 9px; }
.workbench[data-panel=basics] .start-catalog-return { display: inline-flex; align-items: center; gap: 8px; margin: 12px 18px 0; align-self: flex-start; min-height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.canvas-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; flex-shrink: 0; margin-bottom: 12px; }
.canvas-page-title { display: flex; min-width: 0; align-items: baseline; }
.canvas-page-title strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-heading > .workspace-mode { justify-self: center; }
.canvas-heading > .canvas-focus { justify-self: end; white-space: nowrap; }
.canvas-focus { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 30px; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
.canvas-focus:hover { background: var(--sheet); color: var(--ink); }
.preview-workspace { background: oklch(94% .005 220); padding-top: 14px; }
.preview-sheet { background-image: radial-gradient(oklch(84% .008 220) .65px, transparent .65px); background-size: 18px 18px; border-radius: 12px; }
.preview-frame { background: var(--sheet); }
.preview-pages { gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.preview-pages button { border-radius: 6px; min-height: 32px; }
.preview-tools .preview-motion { margin: 0 0 0 6px; font-size: 11px; white-space: nowrap; }
.preview-tools .preview-keep-effect { margin: 0 0 0 6px; font-size: 11px; white-space: nowrap; }
.inspector-heading { padding: 23px 18px 18px; }
.inspector-heading h2 { font-size: 14px; }
.inspector-status:not(.error)::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; margin-bottom: 2px; border-radius: 50%; background: var(--accent); }
.inspector-sections { padding-block: 12px; border-bottom: 1px solid var(--line); }
.inspector-content .form-group { padding-top: 20px; }
.inspector-content .field + .field { margin-top: 18px; }
.inspector-content input:not([type=range]):not([type=color]):not([type=checkbox]), .inspector-content select, .inspector-content textarea { border-color: var(--line); background: var(--sheet); }
.inspector-content input:focus, .inspector-content select:focus, .inspector-content textarea:focus { border-color: var(--accent); }
@media (min-width: 1121px) {
  .workbench[data-panel=basics][data-side=catalog] { grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); }
  .workbench[data-panel=basics][data-side=catalog] > .editor { grid-column: 1; border-right: 0; }
  .workbench[data-panel=basics][data-side=catalog] > .preview-workspace { grid-column: 2; border-left: 1px solid var(--line); }
  .workbench[data-panel=basics][data-side=catalog] > .inspector { display: none; }
  .workbench[data-panel=basics][data-side=catalog] .editor-heading { padding: 26px 30px 18px; border: 0; }
  .workbench[data-panel=basics][data-side=catalog] .editor-heading h2 { font-size: 23px; }
  .workbench[data-panel=basics][data-side=catalog] .editor-heading p { font-size: 12px; }
  .workbench[data-panel=basics][data-side=catalog] .editor-panel { padding-inline: 30px; }
}
.library-kind-nav { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; }
.library-kind-nav button { border-color: transparent; background: transparent; font-size: 11px; min-height: 32px; padding: 5px 10px; }
.library-kind-nav button[aria-pressed=true] { background: var(--wash); color: var(--accent); }
@media (max-width: 1120px) {
  .workbench, .workbench[data-panel=library] { grid-template-columns: minmax(340px, 1fr) clamp(340px, 40vw, 400px); grid-template-rows: auto auto minmax(0, 1fr); }
  .workspace-navigation { padding-inline: 12px; gap: 12px; }
  .workspace-navigation .editor-tabs { gap: 4px; }
  .workspace-navigation .editor-tabs button { min-width: 98px; padding-inline: 10px; font-size: 13px; }
  .workspace-switcher { grid-row: 2; grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--sheet); }
  .workspace-switcher [data-value=preview] { display: none; }
  .workbench > .preview-workspace { grid-column: 1; grid-row: 3; }
  .workbench > .editor, .workbench > .inspector { grid-column: 2; grid-row: 3; border-left: 1px solid var(--line); border-right: 0; }
  .workbench[data-side=catalog] .inspector, .workbench:not([data-side=catalog]) .editor { display: none; }
  .catalog-inspect { display: block; background: var(--accent); color: var(--sheet); border-color: var(--accent); min-height: 36px; }
  .offline-label { display: none; }
}
@media (max-width: 760px) {
  .workbench, .workbench[data-panel=library] { grid-template-columns: minmax(0, 1fr); }
  .workspace-navigation { align-items: stretch; gap: 6px; padding-inline: 8px; }
  .workspace-navigation .editor-tabs { flex: 1; }
  .workspace-navigation .editor-tabs button { min-width: 80px; min-height: 44px; padding: 10px; }
  .workspace-navigation .editor-tabs .studio-icon { display: none; }
  .workspace-mode-compact { display: flex; }
  .workbench[data-side=preview] .workspace-mode-compact { display: none; }
  .workspace-mode .segmented { gap: 0; padding: 2px; }
  .workspace-mode-compact .segmented button { min-width: 58px; padding: 5px 8px; font-size: 12px; }
  .workspace-mode-compact .studio-icon { display: none; }
  .workspace-switcher { justify-content: center; }
  .workspace-switcher [data-value=preview] { display: block; }
  .workbench > .preview-workspace, .workbench > .editor, .workbench > .inspector { grid-column: 1; border: 0; }
  .workbench:not([data-side=preview]) .preview-workspace, .workbench[data-side=preview] .inspector { display: none; }
  .editor-heading { padding: 12px 16px; }
  .editor-panel { padding-inline: 16px; }
  .preview-workspace { padding-inline: 14px; }
  .preview-pages button { min-height: 36px; padding-inline: 8px; }
  .workspace-mode .segmented button { min-height: 40px; }
}
/* Focus changes only the workspace. The same device, document and editor remain mounted. */
.workbench[data-side=preview] > .editor, .workbench[data-side=preview] > .inspector { display: none; }
.workbench[data-side=preview] > .preview-workspace { grid-column: 1 / -1; width: 100%; }
.workbench[data-side=preview] .preview-toolbar, .workbench[data-side=preview] .preview-tools { max-width: 720px; width: 100%; align-self: center; }
.workbench[data-side=preview] .preview-tools { justify-content: space-between; }
.workbench[data-side=preview] .canvas-heading { margin-bottom: 8px; }
@media (max-height: 860px) {
  /* The page selector still exposes every destination without a duplicate row. */
  .preview-pages { display: none; }
  .canvas-heading { margin-bottom: 8px; }
  .preview-sheet { padding: 10px; }
}
@media (max-width: 760px) {
  .canvas-heading { margin-bottom: 8px; }
  .canvas-focus, .workbench[data-panel=basics] .start-settings { min-height: 40px; }
  .canvas-page-title { gap: 6px; }
}

/* Authoring catalog only. Load after workspace.css and preview/studio-buttons.css.
   The shell owns column widths; the same controls move with the existing inspector. */
.button-browser { container: button-browser / inline-size; padding-top: 12px; }
.button-browser-search { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; }
.button-browser-search input, .button-browser-search select { font-size: 12px; }
.button-browser-shortcuts { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.button-browser-collections { display: flex; gap: 4px; }
.button-browser-shortcuts button { padding: 6px 10px; min-height: 36px; font-size: 12px; white-space: nowrap; }
.button-browser-collections button { border-color: transparent; background: transparent; }
.button-browser-collections button[aria-pressed=true] { background: var(--wash); color: var(--accent); font-weight: 600; }
.button-browser-collections button:not([aria-pressed=true]):hover { background: var(--desk); }
.button-browser-application { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.button-browser-application .field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; }
.button-browser-application select { font-size: 12px; }
.button-browser-application-note { margin-top: 5px; }
.button-browser-selection { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.button-browser-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button-browser-selection button { flex-shrink: 0; min-height: 32px; padding: 4px 0 4px 8px; font-size: 12px; border-color: transparent; background: transparent; }
.button-browser-results { margin-top: 4px; }
.studio-buttons-panel .button-browser .studio-buttons-pagination {
  position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 0;
  background: var(--sheet); border-bottom: 1px solid var(--line); font-size: 12px;
}
.button-browser-pages { display: flex; align-items: center; gap: 8px; }
.button-browser-pages > span { min-width: 36px; text-align: center; }
.button-browser .studio-buttons-pagination button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.studio-buttons-panel .button-browser .studio-buttons-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; scroll-margin-top: 64px;
}
.studio-button-entry { position: relative; min-width: 0; }
.studio-buttons-panel .button-browser .studio-button-choice {
  width: 100%; height: 100%; min-height: 158px; padding: 6px; gap: 8px; scroll-margin-block: 64px;
  border-color: var(--line); border-radius: 10px; background: var(--sheet); box-shadow: none;
}
.studio-buttons-panel .button-browser .studio-button-choice[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.studio-buttons-panel .button-browser .studio-button-choice:hover { background: var(--desk); }
.studio-button-preview-stage { display: grid; place-items: center; width: 100%; height: 76px; border-radius: 6px; background: oklch(95% .008 220); }
.studio-buttons-panel .button-browser .studio-button-thumbnail { width: 64px; height: 64px; margin: 0; }
.studio-buttons-panel .button-browser .studio-button-caption { gap: 4px; padding: 0 6px 3px; }
.studio-buttons-panel .button-browser .studio-button-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.studio-buttons-panel .button-browser .studio-button-caption small { position: static; flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.studio-buttons-panel .button-browser .studio-button-caption strong { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.studio-buttons-panel .button-browser .studio-button-material { font-size: 12px; line-height: 1.4; }
.button-browser-favorite { position: absolute; top: 6px; right: 6px; width: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 18px; line-height: 1; color: var(--muted); }
.button-browser-favorite:hover { background: var(--desk); }
.button-browser-favorite[aria-pressed=true] { color: var(--accent); }
.button-browser-favorite:focus-visible { outline-offset: -4px; }
.button-browser-empty { padding: 24px 8px; text-align: center; }
.button-browser-empty button { margin-top: 12px; font-size: 12px; }
.button-browser-details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.button-browser-details > summary { cursor: pointer; font-size: 12px; color: var(--ink); }
@container button-browser (max-width: 320px) {
  .button-browser-search { grid-template-columns: minmax(0, 1fr) 112px; }
  .button-browser-shortcuts button { padding-inline: 7px; }
}
@container button-browser (max-width: 280px) {
  .studio-buttons-panel .button-browser .studio-buttons-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .button-browser-favorite { width: 44px; min-height: 44px; }
  .button-browser-search input, .button-browser-search select, .button-browser-shortcuts button,
  .button-browser-application select, .button-browser-selection button, .button-browser-pages button { min-height: 40px; }
}

/* Image catalog: originals stay in the asset owner; tiles only frame previews. */
.images-panel .form-group { padding-top: 16px; }
.images-panel .form-group > h3 { font-size: 14px; margin-bottom: 12px; }
.images-panel .image-browser-toolbar { display: flex; align-items: center; gap: 10px; }
.images-panel .image-browser-toolbar select { flex: 1; width: auto; min-width: 0; font-size: 12px; }
.images-panel .image-browser-count { flex-shrink: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.images-panel .image-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.images-panel .image-slot-choice { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 7px; padding: 4px; text-align: left; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.images-panel .image-slot-choice:hover { background: var(--desk); }
.images-panel .image-slot-choice[aria-pressed=true] { border-color: var(--accent); background: transparent; }
.images-panel .image-slot-preview { display: block; overflow: hidden; background: var(--desk); border-radius: 2px; }
.images-panel .image-slot-preview img, .images-panel .image-slot-empty { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 0; }
.images-panel .image-slot-empty { display: grid; place-items: center; background: transparent; }
.images-panel .image-slot-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; padding: 0 2px 3px; }
.images-panel .image-slot-caption strong { font-size: 12px; font-weight: 500; }
.images-panel .image-slot-caption small { color: var(--muted); font-size: 12px; }
.images-panel .image-browser-help, .images-panel .image-browser-restore { margin-top: 18px; font-size: 12px; color: var(--muted); }
.images-panel .image-browser-restore { border-top: 1px solid var(--line); padding-top: 12px; }
.images-panel summary { cursor: pointer; }
.images-panel .image-browser-help .hint { margin-top: 8px; }
@media (pointer: coarse) {
  .images-panel select, .images-panel summary { min-height: 40px; }
}

.color-panel { min-width: 0; color: var(--ink); }
.color-panel-quick { padding-top: 20px; }
.color-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.color-panel-heading h3 { font-size: 15px; }
.color-panel-scope { display: flex; gap: 2px; }
.color-panel-scope button { min-height: 32px; padding: 5px 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; }
.color-panel-scope button[aria-pressed='true'] { color: var(--ink); box-shadow: inset 0 -1px var(--accent); }
.color-tone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.color-tone { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 104px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sheet); text-align: left; }
.color-tone:hover, .color-tone[aria-pressed='true'] { background: var(--wash); }
.color-tone-caption strong { display: block; font-size: 13px; font-weight: 500; }
.color-tone-caption small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.color-tone-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; height: 30px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; grid-row: 2; grid-column: 1 / -1; }
.color-tone-strip i { display: block; }
.color-tone-selected { grid-row: 1; grid-column: 2; color: var(--accent); opacity: 0; text-align: center; font-size: 14px; }
.color-tone[aria-pressed='true'] .color-tone-selected { opacity: 1; }
.color-panel-accent { margin-top: 24px; }
.color-panel-accent-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(140px, 1.3fr); align-items: center; gap: 12px; }
.color-panel-accent-row h3 { font-size: 14px; font-weight: 500; }
.color-panel-accent > .hint { margin-top: 8px; }
.color-input.color-control { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; }
.color-input.color-control input[type='color'] { width: 32px; height: 32px; min-height: 32px; padding: 5px; border: 0; border-radius: 4px 0 0 4px; background: transparent; }
.color-input input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
.color-input input[type='color']::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 50%; }
.color-input input[type='color']::-moz-color-swatch { border: 1px solid var(--line); border-radius: 50%; }
:is(.color-panel, .color-semantic-section) .color-input.color-control input[type='text'] { min-height: 32px; padding: 5px 8px; border: 1px solid transparent; border-radius: 0 4px 4px 0; background: transparent; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.color-panel-status { margin-top: 8px; overflow-wrap: anywhere; }
.color-panel-status:empty { margin-top: 0; }
.color-panel > .form-group { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
.color-panel > .form-group > h3 { margin-bottom: 6px; font-size: 14px; }
.color-panel .inspector-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 10px; }
.color-panel .palette-shortcut { min-width: 0; min-height: 36px; gap: 8px; padding: 5px 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; text-align: left; }
.color-panel .palette-shortcut:hover { color: var(--accent); }
.color-panel .palette-shortcut .swatches i { width: 7px; height: 16px; }
.color-panel-extraction { border-top: 1px solid var(--line); margin-top: 24px; }
.color-panel-extraction > summary { min-height: 40px; padding: 12px 0; color: var(--ink); font-size: 13px; }
.color-panel-extraction .form-group { padding-top: 4px; }
.color-panel-extraction .form-group > h3 { font-size: 12px; font-weight: 500; }
.color-panel .palette-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.color-panel .palette-swatches button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-family: ui-monospace, monospace; font-size: 12px; }
.color-panel .palette-swatches button[aria-pressed='true'] { outline: 0; background: var(--wash); box-shadow: inset 0 -1px var(--accent); }
.color-panel .palette-swatches button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-panel .palette-swatch { flex: 0 0 20px; height: 20px; margin: 0; border: 1px solid var(--line); border-radius: 50%; }
.color-panel .palette-preview { margin-top: 12px; padding: 10px; border-radius: 3px; }
.color-panel .palette-preview-surface { padding: 10px; }
.color-panel-restore { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.color-panel-restore button { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.color-panel-restore button:hover { color: var(--ink); }
.color-panel-restore .hint { font-size: 11px; }
/* These rows keep this class when the existing inspector reparents them. */
.color-semantic-section .color-semantic-field { display: grid; grid-template-columns: minmax(76px, 1fr) minmax(130px, 1.3fr); align-items: center; gap: 12px; margin-top: 10px; }
.color-semantic-field label { font-size: 12px; font-weight: 400; color: var(--ink); }
@media (max-width: 820px), (pointer: coarse) {
  .color-panel-scope button, .color-panel .palette-shortcut, .color-panel .palette-swatches button, .color-panel-restore button { min-height: 40px; }
  .color-input.color-control { grid-template-columns: 40px minmax(0, 1fr); }
  .color-input.color-control input[type='color'] { width: 40px; height: 40px; min-height: 40px; padding: 8px; }
  :is(.color-panel, .color-semantic-section) .color-input.color-control input[type='text'] { min-height: 40px; }
}