/* Knobs and the synth panel, shared by the home page and the design lab */
.lab-chart { display: block; width: 100%; height: 240px; }
.lab-chart .c-grid { stroke: currentColor; opacity: .12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lab-chart .c-area { fill: var(--c-area, rgba(124,77,255,.22)); }
.lab-chart .c-bars rect { fill: var(--c-bar, #e5484d); opacity: .7; }
.lab-chart .c-inst { fill: none; stroke: var(--c-inst, #1c1630); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lab-chart .c-max { stroke: var(--c-max, #9b7aff); stroke-dasharray: 5 5; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lab-chart .c-head { stroke: var(--c-head, #642dff); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.busy .lab-chart { opacity: .55; transition: opacity .2s; }

/* Knob basics */
.knob { display: grid; justify-items: center; gap: 6px; user-select: none; touch-action: none; }
.knob svg { width: 132px; height: auto; cursor: grab; overflow: visible; outline: none; }
.knob.turning svg { cursor: grabbing; }
.knob svg:focus-visible { filter: drop-shadow(0 0 0 2px var(--brand-9)) drop-shadow(0 0 6px var(--brand-9)); }
.knob-read { display: grid; justify-items: center; }
.knob-read span { font: 500 12px var(--f-ui); letter-spacing: .04em; }
.knob-read b { font: 400 24px/1.2 var(--f-head); }
.k-body { fill: url(#none); }
.k-pointer { stroke-width: 4; stroke-linecap: round; }

/* B · Synth panel */
.v-synth { --c-area: rgba(124,77,255,.18); --c-inst: #1c1630; --c-bar: #e5484d;
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; max-width: 1180px; margin: 0 auto; }
.sy-panel { position: relative; padding: 24px 26px; border-radius: 18px; background: linear-gradient(180deg, #f4f1ff, #e6e0fa); border: 1px solid #d6cdf5; box-shadow: inset 0 1px 0 #fff, 0 18px 40px -24px rgba(55,0,135,.45); }
.screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #b8b0d6); box-shadow: inset 0 0 0 1px #a59cc9; }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4.5px; height: 1px; background: #8f86b5; transform: rotate(35deg); }
.screw.s-tl { top: 10px; left: 10px; } .screw.s-tr { top: 10px; right: 10px; } .screw.s-bl { bottom: 10px; left: 10px; } .screw.s-br { bottom: 10px; right: 10px; }
.sy-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sy-brand b { display: block; font: 500 18px var(--f-code); letter-spacing: .1em; color: #3a0ca3; }
.sy-brand small { font: 400 12px var(--f-code); color: #6b5fa0; letter-spacing: .14em; text-transform: uppercase; }
.sy-lcd { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 8px; background: #a8d8b0; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); font-family: var(--f-code); color: #173d1f; }
.sy-lcd span { font-size: 11px; letter-spacing: .14em; }
.sy-lcd b { font: 500 26px var(--f-code); letter-spacing: .08em; }
.sy-lcd em { font: 500 16px var(--f-code); font-style: normal; }
.sy-main { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.sy-knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v-synth .knob svg { width: 112px; }
.v-synth .k-led { fill: #cfc6ee; }
.v-synth .k-led.on { fill: #7c4dff; filter: drop-shadow(0 0 3px rgba(124,77,255,.9)); }
.v-synth .k-body { fill: #2b2440; }
.v-synth .k-cap { fill: url(#none); fill: #3d3459; stroke: #5b5080; stroke-width: 1; }
.v-synth .k-pointer { stroke: #fff; stroke-width: 3; }
.v-synth .knob-read span { color: #4a3f73; text-align: center; }
.v-synth .knob-read b { color: #3a0ca3; }
.sy-vu { display: grid; justify-items: center; gap: 6px; font: 500 11px var(--f-code); color: #4a3f73; letter-spacing: .1em; }
.vu { display: grid; gap: 3px; padding: 6px; border-radius: 6px; background: #2b2440; }
.vu i { display: block; width: 26px; height: 8px; border-radius: 2px; background: #3d3459; }
.vu i.on { background: #7c4dff; box-shadow: 0 0 6px rgba(124,77,255,.8); }
.vu i.hot { background: #ff6b4a; box-shadow: 0 0 6px rgba(255,107,74,.8); }
.sy-screen { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--neutral-5); box-shadow: 0 18px 40px -24px rgba(55,0,135,.35); }
.sy-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.sy-stats span { display: block; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.sy-stats b { font: 400 24px var(--f-head); }
.sy-stats div:first-child b { color: #d13415; }
.sy-msg { margin: 10px 0 0; font: 400 14px/1.5 var(--f-ui); color: var(--neutral-11); }
@media (max-width: 1000px) { .v-synth { grid-template-columns: 1fr; } }


/* Home hero */
.hero-synth { box-shadow: none; background: none; }
.hero-synth .v-synth { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); text-align: left; }
.hero-synth .sy-panel { box-shadow: 0 30px 60px -30px rgba(20,11,51,.7), inset 0 1px 0 #fff; }
.hero-synth .sy-screen { box-shadow: 0 30px 60px -30px rgba(20,11,51,.6); }
.hero-synth .pp-themes { margin-bottom: 10px; }
.sy-hint { margin: 16px 0 0; font: 400 12px var(--f-code); color: #6b5fa0; text-align: center; }
.sy-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.sy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sy-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.sy-legend [data-scn] { margin-left: auto; color: var(--neutral-12); font-weight: 500; }
.sy-msg a { color: var(--brand-11); }
@media (max-width: 1000px) { .hero-synth .v-synth { grid-template-columns: 1fr; } .sy-legend [data-scn] { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 520px) { .sy-knobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v-synth .knob svg { width: 86px; } .sy-main { grid-template-columns: 1fr; } .sy-vu { display: none; } .sy-panel { padding: 20px 14px; } .sy-stats b { font-size: 20px; } }
.sy-vu small { white-space: nowrap; }
.sy-ceiling { grid-column: 1 / -1; margin: 4px 0 0; font: 400 11px var(--f-code); color: #6b5fa0; text-align: center; }
.hero-synth .sy-knobs { row-gap: 14px; }
/* The chart takes the height the knob panel gives it, so the right card has no empty space */
.hero-synth .v-synth { align-items: stretch; }
.hero-synth .sy-screen { display: flex; flex-direction: column; }
.hero-synth .sy-screen [data-chart] { flex: 1; display: flex; min-height: 240px; }
.hero-synth .sy-screen .lab-chart { height: auto; flex: 1; min-height: 240px; }
@media (max-width: 1000px) { .hero-synth .sy-screen [data-chart], .hero-synth .sy-screen .lab-chart { min-height: 220px; } }
.lab-chart .c-min { stroke: #16a37f; stroke-dasharray: 2 4; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lab-chart .c-max, .lab-chart .c-min { transition: d .18s ease-out; }
.sy-legend .lg-max { width: 14px; height: 0; border-top: 2px dashed #9b7aff; border-radius: 0; }
.sy-legend .lg-min { width: 14px; height: 0; border-top: 2px dotted #16a37f; border-radius: 0; }
/* "Turn me" hint and idle glow until the first touch */
.knob-wrap { position: relative; display: grid; }
.knob-hint { position: absolute; top: -6px; right: -6px; padding: 3px 8px; border-radius: 99px; background: #642dff; color: #fff; font: 500 11px var(--f-ui); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(100,45,255,.8); animation: hint-bob 1.4s ease-in-out infinite; pointer-events: none; }
.knob-hint::after { content: ""; position: absolute; left: 10px; bottom: -4px; width: 8px; height: 8px; background: #642dff; transform: rotate(45deg); }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sy-panel.idle .k-led.on { animation: led-glow 1.6s ease-in-out infinite; }
@keyframes led-glow { 50% { filter: drop-shadow(0 0 6px rgba(124,77,255,1)); } }
@media (prefers-reduced-motion: reduce) { .knob-hint, .sy-panel.idle .k-led.on { animation: none; } .lab-chart .c-max, .lab-chart .c-min { transition: none; } }