/* A quiet, live blend study, using the same palette as the rest of the lab. */
#panel-layering #layer-analysis { padding: 22px; }
#layer-animation {
  --mix-one: var(--tone-water);
  --mix-two: var(--tone-rose);
  --mix-three: var(--tone-citrus);
  --mix-glass-light: color-mix(in srgb, var(--ink) 10%, var(--bg-card));
  --mix-motion: paused;
  min-width: 0;
}
#layer-animation[data-playing=true] { --mix-motion: running; }
#layer-animation .layer-visual-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#layer-animation .layer-visual-header .eyebrow { display: block; margin: 0 0 7px; font-size: .6rem; letter-spacing: .14em; color: var(--accent-color); }
#layer-animation .layer-visual-header h2 { font: clamp(1.3rem,1.9vw,1.65rem)/1.2 var(--studio-serif); letter-spacing: -.02em; margin: 0; color: var(--ink); }
#layer-animation .layer-motion-toggle { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-height: 35px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: var(--bg-card); color: var(--muted); font: inherit; font-size: .65rem; }
#layer-animation .layer-motion-toggle:hover:not(:disabled) { color: var(--ink); background: var(--soft); border-color: var(--accent-color); }
#layer-animation .layer-motion-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#layer-animation .layer-motion-toggle:disabled { opacity: .8; cursor: default; }
#layer-animation .layer-mix-scene { position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 16px -6px 14px; border-radius: 18px; background: radial-gradient(ellipse at 50% 60%,var(--soft),transparent 72%); }
#layer-animation .layer-mix-art { position: relative; display: block; width: 100%; height: auto; min-height: 235px; max-height: 325px; overflow: visible; }
#layer-animation .layer-mix-aura { position: absolute; width: 43%; height: 59%; top: 22%; border-radius: 50%; filter: blur(22px); opacity: .16; pointer-events: none; animation: layer-aura-breathe 9s ease-in-out infinite alternate; animation-play-state: var(--mix-motion); }
#layer-animation .layer-mix-aura-one { left: 17%; background: var(--mix-one); }
#layer-animation .layer-mix-aura-two { right: 17%; background: var(--mix-two); animation-delay: -4s; }
#layer-animation .layer-mix-aura-three { width: 24%; height: 36%; left: 48%; top: 15%; background: var(--mix-three); opacity: 0; animation-delay: -2s; transition: opacity .7s; }
#layer-animation[data-layers="3"] .layer-mix-aura-three { opacity: .16; }
#layer-animation .layer-mix-ground { fill: var(--ink); opacity: .045; }
#layer-animation .layer-mix-orbit { fill: none; stroke-width: .8; opacity: .34; transform-origin: 300px 204px; animation: layer-orbit-drift 12s ease-in-out infinite alternate; animation-play-state: var(--mix-motion); }
#layer-animation .layer-mix-orbit-one { stroke: var(--mix-one); }
#layer-animation .layer-mix-orbit-two { stroke: var(--mix-two); animation-delay: -6s; }
#layer-animation .layer-mix-channel { color: var(--mix-one); opacity: .75; transition: opacity .6s; }
#layer-animation .layer-mix-channel[data-channel="1"] { color: var(--mix-two); }
#layer-animation .layer-mix-channel[data-channel="2"] { color: var(--mix-three); opacity: .2; }
#layer-animation[data-state=ready] .layer-mix-channel[data-selected=false] { opacity: .38; }
#layer-animation .layer-mix-channel[data-selected=true] { opacity: 1; }
#layer-animation .layer-mix-trace { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .25; stroke-dasharray: 2 5; }
#layer-animation .layer-mix-stream { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 235; stroke-dashoffset: 253; animation: layer-scent-flow 4.8s linear infinite; animation-play-state: var(--mix-motion); }
#layer-animation [data-channel="1"] .layer-mix-stream { animation-delay: -2.4s; }
#layer-animation [data-channel="2"] .layer-mix-stream { animation-delay: -1.2s; }
#layer-animation .layer-mix-source { fill: var(--bg-card); stroke: currentColor; stroke-width: 1; }
#layer-animation .layer-node-placeholder { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#layer-animation .layer-mix-source { fill: var(--photo-bg); stroke-width: 1.5; }
#layer-animation .layer-mix-source-node { filter: drop-shadow(0 3px 7px var(--shadow)); }
#layer-animation .layer-mix-bottle { transform-origin: 300px 300px; animation: layer-vessel-float 8s ease-in-out infinite; animation-play-state: var(--mix-motion); }
#layer-animation .layer-mix-glass { fill: url(#layer-glass); stroke: color-mix(in srgb, var(--muted) 38%, var(--bg-card)); stroke-width: 1.3; }
#layer-animation .layer-mix-liquid { opacity: .58; transition: opacity .6s; }
#layer-animation[data-state=empty] .layer-mix-liquid { opacity: .3; }
#layer-animation .layer-mix-layer { fill: var(--mix-one); transition: y .75s var(--ease-out), height .75s var(--ease-out); }
#layer-animation [data-liquid="1"] { fill: var(--mix-two); }
#layer-animation [data-liquid="2"] { fill: var(--mix-three); }
#layer-animation .layer-mix-wave { fill: var(--mix-glass-light); opacity: .18; animation: layer-liquid-sway 6s ease-in-out infinite alternate; animation-play-state: var(--mix-motion); }
#layer-animation .layer-mix-wave-two { fill: white; opacity: .12; animation-direction: alternate-reverse; animation-delay: -3s; }
#layer-animation .layer-mix-glint { fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; opacity: .65; }
#layer-animation .layer-mix-label { fill: var(--bg-card); fill-opacity: .78; stroke: var(--bg-card); stroke-opacity: .8; stroke-width: .7; }
#layer-animation .layer-mix-monogram { font: 23px Georgia,serif; letter-spacing: -1px; fill: var(--ink); }
#layer-animation .layer-mix-word { font: 6px system-ui,sans-serif; letter-spacing: 1.6px; fill: var(--muted); }
#layer-animation .layer-mix-sparkles { fill: var(--accent-color); opacity: .35; animation: layer-sparkle-drift 7s ease-in-out infinite alternate; animation-play-state: var(--mix-motion); }
#layer-animation .layer-mix-caption { position: absolute; bottom: 1px; width: 100%; text-align: center; color: var(--muted); font-size: .5rem; letter-spacing: .15em; }
#layer-animation .layer-mix-legend { display: grid; gap: 7px; }
#layer-animation .layer-mix-scent { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-surface); }
#layer-animation .layer-mix-scent-copy { flex: 1; min-width: 0; }
#layer-animation .layer-mix-scent strong { display: block; font-size: .76rem; font-weight: 500; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
#layer-animation .layer-mix-scent small { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; overflow-wrap: anywhere; }
#layer-animation .layer-mix-scent b { font-size: .73rem; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
#layer-animation .layer-mix-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--mix-one); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mix-one) 10%,transparent); }
#layer-animation [data-scent="1"] .layer-mix-dot { background: var(--mix-two); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mix-two) 10%,transparent); }
#layer-animation [data-scent="2"] .layer-mix-dot { background: var(--mix-three); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mix-three) 10%,transparent); }
#layer-animation .layer-mix-scent[data-selected=false] { border-style: dashed; background: transparent; opacity: .65; }
#layer-animation .layer-mix-thumb { display: grid; place-items: center; width: 48px; height: 58px; border: 1px solid var(--line); border-radius: 9px; background: var(--photo-bg); overflow: hidden; flex-shrink: 0; }
#layer-animation .layer-mix-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
#layer-animation .layer-mix-thumb svg { width: 25px; height: 30px; stroke: var(--muted); stroke-width: 1.25; stroke-linejoin: round; }
#layer-animation .layer-mix-value { display: grid; justify-items: end; flex-shrink: 0; }
#layer-animation .layer-mix-value small { font-size: .62rem; }
#layer-analysis #layer-animation .layer-mix-summary { margin: 11px 2px 0; font-size: .67rem; line-height: 1.65; color: var(--muted); }
#layer-analysis-content { min-width: 0; }
#layer-analysis-content .advanced-empty { padding: 22px 3px 3px; gap: 8px; }
#layer-analysis-content .advanced-empty .layer-empty-mark { display: none; }
#layer-analysis-content .advanced-empty h2 { font: 1.25rem/1.3 var(--studio-serif); margin: 0; }
#layer-analysis-content .advanced-empty p { font-size: .75rem; }
#layer-analysis-content:not(:has(.advanced-empty)) { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
@keyframes layer-scent-flow { to { stroke-dashoffset: 0; } }
@keyframes layer-vessel-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes layer-liquid-sway { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
@keyframes layer-aura-breathe { from { transform: translate(-4px,3px) scale(.94); } to { transform: translate(5px,-5px) scale(1.08); } }
@keyframes layer-orbit-drift { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes layer-sparkle-drift { from { transform: translateY(0); opacity: .2; } to { transform: translateY(-7px); opacity: .5; } }
@media (max-width: 760px) {
  #panel-layering #layer-analysis { padding: 17px; }
  #layer-animation .layer-visual-header h2 { font-size: 1.35rem; }
  #layer-animation .layer-mix-art { min-height: 220px; }
  #layer-animation .layer-mix-scene { margin-block: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #layer-animation *, #layer-animation *::before, #layer-animation *::after { animation: none !important; transition: none !important; }
}

/* Two equal work surfaces: choose and balance on the left, preview on the right. */
#panel-layering { --mix-one: var(--tone-water); --mix-two: var(--tone-rose); --mix-three: var(--tone-citrus); }
#panel-layering .layering-layout { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 20px; margin-bottom: 20px; }
#panel-layering .layering-layout > .advanced-card { margin: 0; padding: 22px; border-radius: 17px; }
#panel-layering .layer-builder { display: flex; flex-direction: column; }
#panel-layering .layer-builder-header, #layer-animation .layer-visual-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 51px; }
#panel-layering .layer-builder-header .eyebrow, #layer-animation .layer-visual-header .eyebrow { display: block; color: var(--accent-color); font-size: .61rem; letter-spacing: .13em; margin: 0 0 7px; }
#panel-layering .layer-builder-header h2, #layer-animation .layer-visual-header h2 { font: 1.65rem/1.2 var(--studio-serif); color: var(--ink); margin: 0; letter-spacing: -.02em; }
#panel-layering .layer-reset { display: inline-flex; align-items: center; gap: 5px; min-height: 35px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .65rem; color: var(--muted); text-decoration: none; }
#panel-layering .layer-reset:hover { background: var(--soft); color: var(--ink); }
#panel-layering .layer-reset svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#panel-layering .layer-builder-intro { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 9px 0 17px; }
#panel-layering .layer-builder-intro p, #layer-animation .layer-visual-intro { color: var(--muted); font-size: .75rem; line-height: 1.6; margin: 0; }
#panel-layering .layer-builder-intro .compact-check { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; color: var(--muted); }
#panel-layering .layer-builder-intro input[type=checkbox] { width: 13px; height: 13px; min-height: 0; padding: 0; }
#panel-layering .layer-builder form#layer-form { display: flex; flex: 1; flex-direction: column; gap: 13px; }
#panel-layering .layer-slots { display: grid; gap: 11px; }
#panel-layering .layer-part { --layer-color: var(--mix-one); display: block; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); min-width: 0; }
#panel-layering .layer-part[data-layer-slot="1"] { --layer-color: var(--mix-two); }
#panel-layering .layer-part[data-layer-slot="2"] { --layer-color: var(--mix-three); }
#panel-layering .layer-part[data-selected=true] { border-color: color-mix(in srgb,var(--layer-color) 38%,var(--line)); }
#panel-layering .layer-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; min-height: 24px; }
#panel-layering .layer-slot-label { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; color: var(--ink); font-weight: 600; }
#panel-layering .layer-slot-label i { width: 7px; height: 7px; background: var(--layer-color); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb,var(--layer-color) 10%,transparent); }
#panel-layering .layer-slot-label small { font-size: .6rem; font-weight: 400; color: var(--muted); padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; }
#panel-layering .layer-slot-clear { display: grid; place-items: center; width: 25px; height: 25px; padding: 3px; background: transparent; color: var(--muted); border: 0; border-radius: 6px; }
#panel-layering .layer-slot-clear:hover { background: var(--tint); color: var(--ink); }
#panel-layering .layer-slot-clear:disabled { visibility: hidden; }
#panel-layering .layer-slot-clear svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
#panel-layering .layer-slot-body { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 12px; }
#panel-layering .layer-slot-photo { display: grid; place-items: center; width: 64px; height: 76px; border: 1px solid var(--line); border-radius: 9px; background: var(--photo-bg); overflow: hidden; }
#panel-layering .layer-slot-photo img { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; }
#panel-layering .layer-slot-photo svg { width: 30px; height: 36px; fill: none; stroke: var(--layer-color); stroke-width: 1.1; stroke-linejoin: round; }
#panel-layering .layer-slot-fields { min-width: 0; }
#panel-layering .layer-search-label { display: block; }
#panel-layering .layer-search-label input { width: 100%; min-height: 37px; padding: 8px 9px; font-size: .75rem; border: 1px solid var(--control-line); background: var(--control-bg); border-radius: 7px; }
#panel-layering .layer-part .photo-picker-selection { display: none !important; }
#panel-layering .layer-slot-caption { margin-top: 6px; min-height: 30px; }
#panel-layering .layer-slot-caption strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .74rem; line-height: 1.35; color: var(--ink); font-weight: 500; }
#panel-layering .layer-slot-caption small { display: block; margin-top: 2px; font-size: .63rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-layering .layer-part[data-selected=false] .layer-slot-caption strong { color: var(--muted); }
#panel-layering .layer-search-label .photo-picker-results { inset-inline-start: -76px; width: calc(100% + 76px); max-width: none; z-index: 90; border-radius: 10px; background: var(--bg-card); }
#panel-layering .layer-search-label .photo-picker-results > button { padding: 9px 12px; gap: 12px; }
#panel-layering .layer-search-label .photo-picker-results img { width: 40px; height: 50px; border-radius: 6px; border: 1px solid var(--line); object-fit: contain; }
#panel-layering .layer-parts-control { margin-top: 10px; }
#panel-layering .layer-parts-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#panel-layering .layer-parts-label label { font-size: .63rem; color: var(--muted); }
#panel-layering .layer-parts-label output { font-size: .66rem; font-variant-numeric: tabular-nums; color: var(--layer-color); font-weight: 600; }
#panel-layering .layer-slider-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; gap: 9px; align-items: center; margin-top: 4px; }
#panel-layering .layer-slider-row button { display: grid; place-items: center; min-height: 28px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--bg-card); }
#panel-layering .layer-slider-row button:hover:not(:disabled) { color: var(--layer-color); border-color: var(--layer-color); }
#panel-layering .layer-slider-row button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#panel-layering .layer-slider-row input[type=range] { appearance: none; width: 100%; min-width: 0; height: 25px; min-height: 25px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; accent-color: var(--layer-color); }
#panel-layering .layer-slider-row input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 9px; background: linear-gradient(to right,var(--layer-color) var(--part-fill,0%),var(--line) var(--part-fill,0%)); }
#panel-layering .layer-slider-row input[type=range]::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--bg-card); background: var(--layer-color); box-shadow: 0 0 0 1px var(--layer-color); }
#panel-layering .layer-slider-row input[type=range]::-moz-range-track { height: 5px; border-radius: 9px; background: var(--line); }
#panel-layering .layer-slider-row input[type=range]::-moz-range-progress { height: 5px; border-radius: 9px; background: var(--layer-color); }
#panel-layering .layer-slider-row input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-card); background: var(--layer-color); box-shadow: 0 0 0 1px var(--layer-color); }
#panel-layering .layer-part[data-selected=false] .layer-parts-control { opacity: .42; }
#panel-layering .layer-slider-guide { display: flex; justify-content: space-between; margin: 2px 40px 0; color: var(--muted); font-size: .53rem; }
#panel-layering .layer-balance { padding: 2px 0; }
#panel-layering .layer-balance-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#panel-layering .layer-balance-title h3 { font-family: inherit; font-size: .78rem; font-weight: 500; line-height: 1.4; margin: 0; color: var(--ink); }
#panel-layering .layer-balance-title output { color: var(--accent-color); font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 600; }
#panel-layering .layer-balance-track { display: flex; gap: 3px; height: 7px; overflow: hidden; border-radius: 999px; background: var(--soft); margin: 9px 0 10px; }
#panel-layering .layer-balance-track > span { min-width: 0; transition: flex .3s var(--ease-out); background: var(--mix-one); }
#panel-layering .layer-balance-track > [data-layer-share="1"] { background: var(--mix-two); }
#panel-layering .layer-balance-track > [data-layer-share="2"] { background: var(--mix-three); }
#panel-layering .layer-balance-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#panel-layering .layer-balance-presets button { min-height: 32px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-card); color: var(--muted); font-size: .67rem; }
#panel-layering .layer-balance-presets button[aria-pressed=true] { color: var(--accent-color); background: var(--tint); border-color: var(--accent-color); }
#panel-layering .layer-balance p { font-size: .67rem; color: var(--muted); line-height: 1.6; margin: 9px 0 0; }
#panel-layering .layer-recipe-fields { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-surface); }
#panel-layering .layer-recipe-fields summary { font-size: .75rem; }
#panel-layering .layer-explore { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; }
#panel-layering #layer-status:empty { display: none; }
#panel-layering .layer-preview-card { display: flex; flex-direction: column; }
#layer-animation { display: flex; flex-direction: column; flex: 1; height: 100%; }
#layer-animation .layer-visual-intro { margin: 9px 0 0; }
#layer-animation .layer-mix-scene { flex: 1; min-height: 310px; margin: 12px -6px 18px; }
#layer-animation .layer-mix-art { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; }
#layer-animation .layer-mix-scent { min-height: 80px; padding: 10px; border-radius: 12px; border-inline-start: 3px solid var(--mix-one); }
#layer-animation .layer-mix-scent[data-scent="1"] { border-inline-start-color: var(--mix-two); }
#layer-animation .layer-mix-scent[data-scent="2"] { border-inline-start-color: var(--mix-three); }
#layer-animation .layer-mix-scent[data-selected=false] { border-style: solid; opacity: .65; }
#layer-animation .layer-mix-scent strong { font-size: .8rem; }
#layer-animation .layer-mix-scent b { font-size: .85rem; }
#layer-animation .layer-mix-summary { padding-top: 10px; }
#panel-layering #layer-analysis { padding: 22px; margin-top: 0; }
#layer-analysis-content:not(:has(.advanced-empty)) { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 20px; }
#layer-analysis-content > :not(.blend-observations,.blend-next) { grid-column: 1/-1; }
#layer-analysis-content .blend-stage { margin: 0; }
#layer-analysis-content .blend-heading h2 { margin: 0; font-size: 1.7rem; }
#layer-analysis-content :is(.blend-observations,.blend-next) { margin: 0; padding: 17px; }
#layer-analysis-content .blend-note-heading h3 { margin: 0; }
#layer-analysis-content .blend-accords { margin-bottom: 0; }
@media (max-width: 900px) {
  #panel-layering .layering-layout { grid-template-columns: minmax(0,1fr); }
  #layer-animation .layer-mix-scene { min-height: 330px; }
}
@media (max-width: 500px) {
  #panel-layering .layering-layout > .advanced-card, #panel-layering #layer-analysis { padding: 17px; }
  #panel-layering .layer-builder-header h2, #layer-animation .layer-visual-header h2 { font-size: 1.45rem; }
  #panel-layering .layer-builder-intro { align-items: start; }
  #panel-layering .layer-search-label input { font-size: 16px; }
  #layer-animation .layer-mix-scene { min-height: 255px; }
  #layer-analysis-content:not(:has(.advanced-empty)) { grid-template-columns: minmax(0,1fr); }
  #layer-analysis-content :is(.blend-observations,.blend-next) { grid-column: 1/-1; }
}