.haptic-effects {
  --effect-bg: #0b0e11;
  --effect-knob: #18191c;
  --effect-text: #f4efe6;
  --effect-dim: #c9c4bc;
  --effect-line: rgba(244, 239, 230, .12);
  --effect-accent: #a981d0;
  --effect-accent-soft: rgba(255, 207, 138, .86);
  --effect-purple: #a981d0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--effect-text);
}

.haptic-effects .study { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) auto; height: clamp(420px, 62svh, 580px); padding: 0; border: 1px solid #4b5560; border-radius: 1.2rem; background: #121316; box-shadow: 0 25px 75px #0008; overflow: hidden; }
.haptic-effects .visual-stack { grid-column: 1; grid-row: 1; position: relative; min-width: 0; min-height: 0; background: radial-gradient(circle at 50% 48%, #1b2028 0, var(--effect-bg) 76%); }
.haptic-effects .visual-stack::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#f4efe605 1px, transparent 1px), linear-gradient(90deg, #f4efe605 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.haptic-effects .effect-slide { position: absolute; inset: 0; opacity: 1; visibility: visible; pointer-events: none; }
.haptic-effects .effect-slide.is-active { z-index: 1; pointer-events: auto; }
.haptic-effects .effect-slide:not(.is-active) .knob { visibility: hidden; }
.haptic-effects .visual { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; overflow: hidden; background: transparent; }
.haptic-effects .stage-orbit { position: relative; width: min(390px, 80vw, 48svh); aspect-ratio: 1; transform: translateY(10%); }
.haptic-effects .orbit-svg { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 200ms ease; }
.haptic-effects .effect-slide.is-active .orbit-svg { opacity: 1; }
.haptic-effects .knob:focus-visible, .haptic-effects .effect-tab:focus-visible { outline: 2px solid var(--effect-accent); outline-offset: 3px; }
.haptic-effects .effect-navigation { grid-column: 1; grid-row: 2; min-width: 0; border-top: 1px solid var(--effect-line); background: #11151b; }
.haptic-effects .effect-tabs { position: relative; display: flex; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #727477 transparent; }
.haptic-effects .effect-tab { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; min-height: 4.2rem; padding: .85rem .5rem; border: 0; background: transparent; color: #bfc0c4; cursor: pointer; font-family: "Space Grotesk", "Inter", "Segoe UI", sans-serif; font-size: 1rem; font-weight: 400; text-align: center; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.haptic-effects .effect-tab:hover { color: #fff; }
.haptic-effects .effect-tab.is-current { color: var(--effect-text); }
.haptic-effects .effect-indicator { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: #be8be2; pointer-events: none; }
.haptic-effects .effect-indicator.is-ready { transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1); }
.haptic-effects .orbit-track { fill: none; stroke: #858993; stroke-width: 2; opacity: .45; stroke-linecap: round; }
.haptic-effects .effect-arc { fill: none; stroke: var(--effect-purple); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 7px #a981d066); }
.haptic-effects .effect-marks line { stroke: var(--effect-purple); stroke-width: 6; stroke-linecap: round; }
.haptic-effects .effect-slide[data-effect=center] .effect-marks line { stroke-width: 7; filter: drop-shadow(0 0 9px #a981d077); }
.haptic-effects .effect-slide[data-effect=center].is-at-center .effect-marks line { filter: drop-shadow(0 0 13px #a981d0); }
.haptic-effects .effect-slide[data-effect=boundary] .effect-arc { stroke-width: 3; opacity: .55; filter: none; }
.haptic-effects .effect-slide[data-effect=boundary] .boundary-stop path { fill: none; stroke: var(--effect-purple); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px #a981d077); }
.haptic-effects .effect-slide[data-effect=boundary] .boundary-stop path:first-child { stroke-width: 7; }
.haptic-effects .effect-slide[data-effect=boundary] .boundary-stop.is-hit path { stroke-width: 10; filter: drop-shadow(0 0 14px #a981d0); }
.haptic-effects .effect-slide[data-effect=texture] .effect-arc { stroke-width: 5; filter: drop-shadow(0 0 7px #a981d066); }
.haptic-effects .effect-slide[data-effect=texture].is-in-zone .effect-arc { filter: drop-shadow(0 0 11px #a981d0); }
.haptic-effects .effect-slide[data-effect=quantized] .effect-arc { display: none; }
.haptic-effects .effect-slide[data-effect=quantized] .effect-marks line { stroke: #858993; stroke-width: 3.5; opacity: .85; }
.haptic-effects .effect-slide[data-effect=quantized] .effect-marks line.is-active { stroke: var(--effect-purple); stroke-width: 7; opacity: 1; filter: drop-shadow(0 0 10px #a981d0); }

.haptic-effects .knob { position: absolute; z-index: 2; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 50%; touch-action: none; cursor: grab; outline: 0; }
.haptic-effects .knob:active { cursor: grabbing; }
.haptic-effects .knob:focus-visible { outline-offset: 5px; }
.haptic-effects .knob-face { position: absolute; inset: 0; border: 1px solid #73777e; border-radius: 50%; background: var(--effect-knob); box-shadow: 0 0 0 8px #aeb1b018, 0 0 0 9px #aeb1b033, 0 12px 25px #0007; transform: rotate(var(--angle, 0deg)); transition: transform .12s ease-out; }
.haptic-effects .effect-slide:not(.is-active) .knob-face { transition: none; }
.haptic-effects .knob-indicator { position: absolute; left: calc(50% - 2px); top: 3%; width: 4px; height: 33%; border-radius: 4px; background: var(--effect-accent-soft); box-shadow: 0 0 13px #f0aa5240; }
.haptic-effects .effect-slide.is-in-zone .knob-face { box-shadow: 0 0 0 8px #a981d022, 0 0 0 9px #a981d066, 0 12px 25px #0007; }
.haptic-effects .effect-slide.is-at-edge .knob-face { box-shadow: 0 0 0 8px #a981d022, 0 0 0 9px #a981d066, 0 12px 25px #0007; }
.haptic-effects .effect-slide.is-center-click .knob-indicator { animation: effect-center-click .4s ease-out; }
.haptic-effects .effect-slide.is-stop-vibrating .knob { animation: effect-stop-vibration .42s ease-out; }
.haptic-effects .effect-slide.is-in-zone .knob { animation: effect-texture-vibration .12s steps(2, end) infinite; }
.haptic-effects .effect-slide.is-detent-click .knob { animation: effect-detent-click .3s ease-out; }

@keyframes effect-center-click { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 48% { transform: rotate(6deg); } 72% { transform: rotate(-3deg); } }
@keyframes effect-stop-vibration { 0%, 100% { transform: translateX(0); } 18%, 52% { transform: translate(-4px, 1px) rotate(-.7deg); } 35%, 70% { transform: translate(4px, -1px) rotate(.7deg); } 84% { transform: translateX(-2px); } }
@keyframes effect-texture-vibration { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(var(--texture-offset)) rotate(var(--texture-tilt)); } 75% { transform: translateX(calc(0px - var(--texture-offset))) rotate(calc(0deg - var(--texture-tilt))); } }
@keyframes effect-detent-click { 0%, 100% { transform: rotate(0) scale(1); } 35% { transform: rotate(2deg) scale(.985); } 60% { transform: rotate(-1deg) scale(1.005); } }

@media (max-width: 600px) {
  .haptic-effects .study { height: clamp(390px, 64svh, 470px); grid-template-rows: minmax(250px, 1fr) auto; }
  .haptic-effects .stage-orbit { width: min(390px, 80vw, 45svh); }
  .haptic-effects .effect-tab { font-size: clamp(.9rem, 3.4vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .haptic-effects .effect-tab, .haptic-effects .knob-face { transition: none; }
}