@charset "UTF-8";
/* V4 warm-white HSV controls; every rule is confined to the palette host. */
#studioPalette { min-width: 0; width: 100%; color: #29312f; font: 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif; color-scheme: light; }
#studioPalette *, #studioPalette *::before, #studioPalette *::after { box-sizing: border-box; }
#studioPalette[hidden], #studioPalette [hidden] { display: none !important; }
#studioPalette button, #studioPalette input { font: inherit; }
#studioPalette button { cursor: pointer; }
#studioPalette button:focus-visible, #studioPalette input:focus-visible, #studioPalette summary:focus-visible { outline: 3px solid var(--studio-ui-ring,#a94232); outline-offset: 3px; }
#studioPalette .studio-palette-presets { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
#studioPalette .studio-palette-presets button { width: auto; min-height: 44px; padding: 7px 12px; border-radius: 22px; border: 1px solid #d9dfcf; background: #fffdf7; color: #4c584e; }
#studioPalette .studio-palette-presets button[aria-pressed="true"] { color: var(--studio-ui-accent,#a94232); border-color: currentColor; background: var(--studio-ui-accent-soft,#ffe8de); box-shadow: inset 0 -2px currentColor; }
#studioPalette .studio-palette-scope { max-width: 440px; margin: 12px auto; color: #53604c; font-size: 16px; overflow-wrap: anywhere; }
#studioPalette .studio-palette-details { width: min(440px,100%); min-width: 0; margin: 16px auto 0; }
#studioPalette summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; cursor: pointer; list-style: none; min-height: 48px; padding: 4px; font-size: 16px; color: #4c584e; border-radius: 12px; }
#studioPalette summary::-webkit-details-marker { display: none; }
#studioPalette summary::after { content: '+'; font-size: 22px; }
#studioPalette details[open] summary::after { content: '−'; }
#studioPalette summary:hover { background: #fff9; }
#studioPalette .studio-palette-wheel { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#ed7272,#edcf72,#a5d37d,#72ccd1,#8191e1,#c589dc,#ed7272); box-shadow: inset 0 0 0 1px #0001; }
#studioPalette .studio-palette-current { font: 16px/1.5 ui-monospace,Consolas,monospace; }
#studioPalette .studio-palette-panel { min-width: 0; background: #fffdf7; border: 1px solid #dddcd3; padding: 20px; border-radius: 20px; margin-top: 8px; box-shadow: 0 5px 0 #eee9df; overflow-wrap: anywhere; }
#studioPalette .studio-palette-intro { font-size: 16px; color: #586151; margin: 0 0 18px; line-height: 1.7; }
#studioPalette .studio-palette-hsv { min-width: 0; margin-bottom: 22px; }
#studioPalette .studio-palette-sv-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; font-size: 16px; color: #37483c; }
#studioPalette #studioPaletteSVReadout { font-variant-numeric: tabular-nums; }
#studioPalette .studio-palette-sv { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--studio-palette-hue,#ff0000); box-shadow: 0 0 0 1px #29312f44; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
#studioPalette .studio-palette-sv:focus-visible { outline: 3px solid var(--studio-ui-ring,#a94232); outline-offset: 5px; }
#studioPalette .studio-palette-sv[data-dragging="true"] { cursor: grabbing; }
#studioPalette .studio-palette-sv-thumb { position: absolute; width: 22px; height: 22px; transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #29312f,0 2px 6px #0008; background: var(--studio-palette-selected); pointer-events: none; }
#studioPalette .studio-palette-help { font-size: 16px; line-height: 1.65; color: #596153; margin: 16px 0; }
#studioPalette .studio-palette-range-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; align-items: center; margin-top: 12px; color: #37483c; font-size: 16px; }
#studioPalette .studio-palette-range-row > span { font-variant-numeric: tabular-nums; }
#studioPalette .studio-palette-range-row label { margin: 0; font: inherit; color: inherit; }
#studioPalette .studio-palette-range { --studio-palette-track: linear-gradient(to right,#000,#fff); appearance: none; -webkit-appearance: none; grid-column: 1 / -1; display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; accent-color: var(--studio-ui-accent,#a94232); }
#studioPalette .studio-palette-hue { --studio-palette-track: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
#studioPalette .studio-palette-saturation { --studio-palette-track: linear-gradient(to right,var(--studio-palette-grey),var(--studio-palette-saturated)); }
#studioPalette .studio-palette-value { --studio-palette-track: linear-gradient(to right,#000,var(--studio-palette-bright)); }
#studioPalette .studio-palette-range::-webkit-slider-runnable-track { height: 16px; border: 1px solid #29312f55; border-radius: 10px; background: var(--studio-palette-track); }
#studioPalette .studio-palette-range::-moz-range-track { height: 16px; border: 1px solid #29312f55; border-radius: 10px; background: var(--studio-palette-track); }
#studioPalette .studio-palette-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: #29312f; box-shadow: 0 0 0 2px #29312f,0 2px 5px #0003; }
#studioPalette .studio-palette-range::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: #29312f; box-shadow: 0 0 0 2px #29312f,0 2px 5px #0003; }
#studioPalette .studio-palette-inputs { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 16px; }
#studioPalette .studio-palette-inputs label { display: grid; gap: 8px; min-width: 0; margin: 0; font-size: 16px; color: #40513e; }
#studioPalette .studio-palette-inputs input { width: 100%; min-width: 0; height: 48px; border: 1px solid #cdd2c5; border-radius: 10px; background: #fff; }
#studioPalette .studio-palette-inputs input[type="color"] { padding: 4px; cursor: pointer; }
#studioPalette input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#studioPalette input[type="color"]::-webkit-color-swatch { border: 1px solid #0002; border-radius: 6px; }
#studioPalette input[type="color"]::-moz-color-swatch { border: 1px solid #0002; border-radius: 6px; }
#studioPalette #studioPaletteHex { padding: 10px 12px; font: 17px/1.5 ui-monospace,Consolas,monospace; color: #29312f; }
#studioPalette #studioPaletteHex[aria-invalid="true"] { border-color: #ad2929; }
#studioPalette .studio-palette-error { color: #a32a24; font-size: 16px; margin: 10px 0; }
#studioPalette .studio-palette-swatches { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
#studioPalette .studio-palette-swatches button { min-width: 0; width: 100%; height: 44px; padding: 4px; border: 1px solid #d9ded1; border-radius: 10px; background: #fff; position: relative; }
#studioPalette .studio-palette-swatches button::before { content: ''; display: block; height: 100%; background: var(--studio-palette-swatch); border-radius: 6px; border: 1px solid #0002; }
#studioPalette .studio-palette-swatches button[aria-pressed="true"] { outline: 2px solid #29312f; outline-offset: 2px; }
#studioPalette .studio-palette-swatches button:focus-visible { outline: 3px solid var(--studio-ui-ring,#a94232); outline-offset: 4px; }
#studioPalette .studio-palette-preview { display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; }
#studioPalette .studio-palette-sample { padding: 8px 12px; border-radius: 9px; background: var(--studio-ui-action-bg,#cf4936); color: var(--studio-ui-action-ink,#fff); border: 1px solid var(--studio-ui-accent-edge,#a94232); }
#studioPalette .studio-palette-soft-sample { padding: 8px 12px; border-radius: 9px; background: var(--studio-ui-accent-soft,#ffe8de); color: var(--studio-ui-accent,#a94232); }
#studioPalette .studio-palette-feedback { font-size: 16px; color: #53604c; margin: 16px 0; line-height: 1.7; }
#studioPalette .studio-palette-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #dfe2d6; }
#studioPalette .studio-palette-bottom span { color: #56624d; font-size: 16px; }
#studioPalette .studio-palette-bottom button { width: auto; background: #f3f3e9; border: 1px solid #d7dbcc; border-radius: 10px; padding: 9px 11px; min-height: 44px; color: #45563b; font-size: 16px; }
@media (max-width: 760px) { #studioPalette .studio-palette-panel { padding: 16px; } }
@media (max-width: 380px) {
  #studioPalette .studio-palette-swatches { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #studioPalette .studio-palette-inputs { gap: 12px; grid-template-columns: 64px minmax(0,1fr); }
  #studioPalette #studioPaletteHex { padding-inline: 8px; }
}
@media (forced-colors: active) {
  #studioPalette .studio-palette-sv, #studioPalette .studio-palette-range, #studioPalette .studio-palette-swatches button::before, #studioPalette .studio-palette-wheel { forced-color-adjust: none; }
  #studioPalette .studio-palette-sv:focus-visible, #studioPalette .studio-palette-range:focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) { #studioPalette *, #studioPalette *::before, #studioPalette *::after { transition: none !important; animation: none !important; } }
@media print { #studioPalette { display: none !important; } }