@import url("./sound-editor.css");
.ks-root, .ks-hud, .ks-mobile-host { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; }
.ks-root *, .ks-hud *, .ks-mobile-host * { box-sizing: border-box; }
.ks-root [hidden], .ks-hud[hidden] { display: none !important; }
.ks-root { position: absolute; inset: 0 425px; height: 360px; z-index: 20; display: flex; flex-direction: column; align-items: center; padding-top: 25px; pointer-events: none; color: #e5e8e6; font-size: 12px; }
.ks-root button, .ks-root select { font: inherit; color: inherit; cursor: pointer; }
.ks-root button { border: 0; background: none; }
.ks-root button:focus-visible, .ks-root select:focus-visible, .ks-volume:focus-visible, .ks-brightness:focus-visible { outline: 2px solid #a6efb6; outline-offset: 4px; }
.ks-selector { position: relative; width: min(1370px, calc(100vw - 32px)); flex: none; z-index: 5; pointer-events: auto; }
.ks-led { width: 5px; height: 5px; border-radius: 50%; background: #b6f6bd; box-shadow: 0 0 8px #88efa6; }
.ks-selector-track { display: flex; gap: 10px; padding-bottom: 5px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #52685a transparent; }
.ks-selector-track:focus-visible { outline: 2px solid #a6efb6; outline-offset: -2px; }
.ks-choice { flex: 0 0 max(214px, calc((100% - 50px) / 6)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 4px 6px 6px !important; text-align: center; scroll-snap-align: start; }
.ks-choice img { width: 140px; height: 54px; flex-shrink: 0; object-fit: contain; background: transparent; filter: drop-shadow(0 4px 3px #0005); }
.ks-choice strong { display: block; font-size: 12px; line-height: 1.2; font-weight: 500; white-space: nowrap; color: #b3beb7; }
.ks-choice:hover strong { color: #f0f7f1; }
.ks-choice[aria-pressed="true"] strong { color: #b6f6bd; }
/* The keyboard models share the reference canvas and responsive scale. */
.ks-footer-slot { --ks-board-width: min(1680px, calc(100vw - 160px)); --ks-board-height: calc(var(--ks-board-width) * 700 / 1680); --ks-selector-space: 150px; --ks-input-space: 72px; --ks-scene-height: calc(var(--ks-board-height) + 184px + var(--ks-selector-space) + var(--ks-input-space)); }
.ks-footer-slot:is([data-keyboard-scene="macbook"], [data-keyboard-scene="keychron-k3"], [data-keyboard-scene="imac-g3"], [data-keyboard-scene="sky61"], [data-keyboard-scene="picnic66"], [data-keyboard-scene="retro104"]) { height: var(--ks-scene-height) !important; }
.ks-footer-slot:is([data-keyboard-scene="macbook"], [data-keyboard-scene="keychron-k3"], [data-keyboard-scene="imac-g3"], [data-keyboard-scene="sky61"], [data-keyboard-scene="picnic66"], [data-keyboard-scene="retro104"]) > .framer-jc2ft7-container { height: 100% !important; }
.ks-footer-slot:is([data-keyboard-scene="macbook"], [data-keyboard-scene="keychron-k3"], [data-keyboard-scene="imac-g3"], [data-keyboard-scene="sky61"], [data-keyboard-scene="picnic66"], [data-keyboard-scene="retro104"]) > .framer-14nu1qe { visibility: hidden !important; }
.framer-4uvkB:is([data-simulator-mode="macbook"], [data-simulator-mode="keychron-k3"], [data-simulator-mode="imac-g3"], [data-simulator-mode="sky61"], [data-simulator-mode="picnic66"], [data-simulator-mode="retro104"]) { height: var(--ks-scene-height) !important; }
.framer-4uvkB:is([data-simulator-mode="macbook"], [data-simulator-mode="keychron-k3"], [data-simulator-mode="imac-g3"], [data-simulator-mode="sky61"], [data-simulator-mode="picnic66"], [data-simulator-mode="retro104"]) > :not(.ks-root) { visibility: hidden !important; pointer-events: none !important; }
:is([data-simulator-mode="macbook"], [data-simulator-mode="keychron-k3"], [data-simulator-mode="imac-g3"], [data-simulator-mode="sky61"], [data-simulator-mode="picnic66"], [data-simulator-mode="retro104"]) .ks-root { inset: 0; height: 100%; background: #030605; isolation: isolate; }
:is([data-simulator-mode="macbook"], [data-simulator-mode="keychron-k3"], [data-simulator-mode="imac-g3"], [data-simulator-mode="sky61"], [data-simulator-mode="picnic66"], [data-simulator-mode="retro104"]) .ks-root::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 37% at 50% 78%, #234c3738, transparent 90%); pointer-events: none; }
.ks-stage { position: relative; width: 100%; flex: 1; min-height: 0; margin-top: 20px; overflow: hidden; pointer-events: auto; animation: ks-scene-in .42s cubic-bezier(.2,.7,.2,1) both; }
.ks-console { position: absolute; bottom: calc(var(--ks-board-height) - var(--ks-case-top, 0px) + 36px); left: 50%; transform: translateX(-50%); width: min(920px, 86%); z-index: 2; }
.ks-console-title { display: flex; align-items: center; gap: 10px; height: 22px; color: #c5ceca; font: 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: 1.5px; }
.ks-console-detail { font-family: -apple-system, sans-serif; font-size: 10px; color: #5e7268; letter-spacing: 0; border-left: 1px solid #29372f; padding-left: 10px; }
.ks-toolbar { position: absolute; top: -6px; right: 0; display: flex; align-items: center; gap: 24px; }
.ks-modes { display: flex; gap: 3px; padding: 3px; border: 1px solid #24332a; border-radius: 8px; background: #0a100d; }
.ks-modes button { color: #82988b; padding: 7px 12px; border-radius: 5px; font-size: 11px; }
.ks-modes [aria-pressed="true"] { color: #d2ebd8; background: #233329; box-shadow: inset 0 1px #b4e4c010; }
.ks-audio { display: flex; align-items: center; gap: 8px; }
.ks-mute { color: #a3b4a9 !important; font-size: 10px !important; padding: 8px 2px !important; white-space: nowrap; }
.ks-volume { width: 55px; height: 14px; accent-color: #a7cdb2; cursor: pointer; }
.ks-sound-test { white-space: nowrap; color: #bce4c7 !important; font-size: 10px !important; padding: 6px 7px !important; border: 1px solid #33493b !important; border-radius: 5px; }
.ks-sound-test:hover { background: #b1f4bf0c; }
.ks-studio-open { white-space: nowrap; color: #c9edce !important; font-size: 10px !important; padding: 7px 9px !important; border: 1px solid #4d6e55 !important; border-radius: 5px; background: #a5dfb00c !important; }
.ks-sound-test:disabled, .ks-mute:disabled { opacity: .5; cursor: default; }
.ks-lighting { display: flex; align-items: center; gap: 12px; height: 28px; margin-top: 16px; }
.ks-backlight { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 10px !important; color: #87948c !important; padding: 5px 0 !important; }
.ks-backlight > [aria-hidden] { font-size: 19px; line-height: 16px; }
.ks-backlight[aria-pressed="true"] { color: #dfeee4 !important; }
.ks-backlight[aria-pressed="true"] > [aria-hidden] { text-shadow: 0 0 9px #d9f2e77a; }
.ks-brightness { width: 110px; height: 18px; margin: 0; accent-color: #d5e7df; cursor: pointer; }
.ks-brightness-value { min-width: 32px; color: #91a79a; font: 10px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ks-writing { margin-top: 24px; }
.ks-hud { position: relative; height: 128px; width: 100%; pointer-events: auto; color: #b0f6c5; border-bottom: 1px solid #33493b; }
.ks-hud-content { position: absolute; inset: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, "Apple SD Gothic Neo", monospace; }
.ks-hud-prompt { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: #668973; font-size: 10px; letter-spacing: .3px; }
.ks-hud-status { font-family: -apple-system, sans-serif; color: #678772; font-size: 9px; letter-spacing: .4px; }
.ks-hud-output { font: 400 26px/1.6 ui-monospace, SFMono-Regular, Menlo, "Apple SD Gothic Neo", monospace; white-space: pre-wrap; overflow-wrap: anywhere; height: calc(3.2em + 4px); overflow: hidden; margin: 13px 0 0; text-shadow: 0 0 17px #80eea037, 0 0 3px #c5ffd014; }
.ks-cursor { display: inline; background: #b1f4bf; color: #092015; animation: ks-cursor-blink 1.1s step-end infinite; }
.ks-composing .ks-cursor { animation: none; border-bottom: 1px solid #a5f695; }
.ks-input { position: absolute; inset: 20px 0 0; width: 100%; height: calc(100% - 20px); margin: 0; border: 0; padding: 0; resize: none; font: 26px/1.6 ui-monospace, monospace; color: transparent; caret-color: transparent; background: transparent; outline: none; opacity: .02; z-index: 4; }
.ks-hud:focus-within { border-color: #5c9470; }
.ks-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 14px; }
.ks-session-actions { display: flex; align-items: center; gap: 16px; }
.ks-start { color: #bce4c7 !important; font-size: 11px !important; padding: 5px 0 !important; }
.ks-start::before { content: "↳"; margin-right: 6px; color: #779c82; }
.ks-clear { color: #83958a !important; font-size: 10px !important; padding: 5px !important; }
.ks-metrics { display: flex; align-items: baseline; gap: 20px; font: 9px ui-monospace, SFMono-Regular, monospace; color: #6b8174; font-variant-numeric: tabular-nums; }
.ks-metrics b { font-weight: 500; font-size: 14px; color: #b3c8ba; }
.ks-practice { margin-top: 20px; }
.ks-lesson-tools { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: #839b8c; }
.ks-language { font-size: 10px !important; margin-left: 6px; padding: 2px 5px; border: 0; background: #16231b; border-radius: 3px; }
.ks-next { color: #9cc2a7 !important; font-size: 10px !important; }
.ks-target { font-size: 14px; line-height: 1.65; color: #687e6f; margin: 7px 0 0; letter-spacing: .1px; }
.ks-correct { color: #b9e7c1; }
.ks-error { color: #ffab91; background: #a4463429; }
.ks-next-char { border-bottom: 1px solid #c0f3c6; }
[data-practice="true"] .ks-writing { margin-top: 10px; }
[data-practice="true"] .ks-hud { height: 112px; }
[data-practice="true"] .ks-hud-output { font-size: 22px; margin-top: 8px; }
.ks-board { position: absolute; left: 50%; transform: translateX(-50%); width: var(--ks-board-width); bottom: 12px; height: var(--ks-board-height); }
.ks-canvas, .ks-key-hits { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.ks-key-hits { z-index: 1; pointer-events: none; }
.ks-hit { position: absolute; pointer-events: auto; padding: 0; background: transparent; touch-action: none; }
.ks-hit:hover { background: #c8ffdf08; }
.ks-hit[data-pressed] { background: #aeffd008; }
.ks-load-note { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #9caf9f; font-size: 12px; }
.ks-status { position: absolute; bottom: 0; left: 16px; right: 16px; color: #6e8477; font-size: 9px; line-height: 1.4; margin: 0; text-align: center; }
.ks-mobile-host { position: relative; width: 100%; height: 100px; background: #030605; }
.ks-mobile-host .ks-root { inset: 0; height: 100%; }
@keyframes ks-cursor-blink { 0%, 100% { background: #b1f4bf; color: #092015; } 50% { background: transparent; color: #b0f6c5; } }
@keyframes ks-scene-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1279px) {
  .ks-root { left: 24px; right: 24px; }
}
@media (max-width: 809.98px) {
  .ks-footer-slot { --ks-board-width: calc(100vw - 24px); --ks-scene-height: calc(var(--ks-board-height) + 309px + var(--ks-selector-space) + var(--ks-input-space)); }
  .ks-console { width: calc(100% - 38px); }
  .ks-console-title { font-size: 9px; letter-spacing: 1px; }
  .ks-console-detail { margin-left: auto; }
  .ks-toolbar { position: static; justify-content: space-between; margin-top: 15px; gap: 10px; }
  .ks-writing { margin-top: 18px; }
  .ks-hud { height: 104px; }
  .ks-hud-output { font-size: 19px; }
  .ks-input { font-size: 19px; }
  .ks-hud-prompt { font-size: 9px; }
  .ks-hud-status { font-size: 8px; }
  .ks-metrics { gap: 13px; }
  .ks-practice { margin-top: 15px; }
  .ks-target { font-size: 11px; line-height: 1.5; }
  [data-practice="true"] .ks-hud { height: 96px; }
  [data-practice="true"] .ks-hud-output { font-size: 18px; margin-top: 5px; }
  [data-practice="true"] .ks-hud-prompt { font-size: 8px; }
  .ks-status { font-size: 8px; }
}
@media (max-width: 379.98px) {
  .ks-footer-slot { --ks-scene-height: calc(var(--ks-board-height) + 344px + var(--ks-selector-space) + var(--ks-input-space)); }
  .ks-toolbar { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-stage, .ks-cursor { animation: none; }
}

[data-simulator-mode="keychron-k3"] .ks-root::before { background: radial-gradient(ellipse 70% 50% at 50% 83%, #384e4b48, transparent 85%); }
[data-simulator-mode="keychron-k3"] .ks-hit:hover, [data-simulator-mode="keychron-k3"] .ks-hit[data-pressed] { background: none; }
@media (max-width: 809.98px) {
  [data-simulator-mode="keychron-k3"] .ks-console-detail { font-size: 8px; }
}

/* G3 retains the source's 1680 × 700 composition, with uniform scaling only. */
[data-simulator-mode="imac-g3"] .ks-root::before { background: none; }
[data-simulator-mode="imac-g3"] .ks-board { overflow: hidden; }
[data-simulator-mode="imac-g3"] .ks-console-detail { font-size: 9px; }
.ks-g3 { position: absolute; left: 0; top: 0; width: 1680px; height: 700px; transform-origin: 0 0; user-select: none; }
.ks-g3 img { position: absolute; width: 1680px; height: 700px; max-width: none; pointer-events: none; }
/* Both full housing layers contain the cable. Keep their rounded end caps intact. */
.ks-g3 > img { clip-path: polygon(0 0, 830px 0, 830px 163px, 855px 163px, 855px 0, 100% 0, 100% 100%, 0 100%); }
.ks-g3-crop { position: absolute; overflow: hidden; padding: 0; pointer-events: none; }
.ks-g3 .ks-hit { pointer-events: auto; border-radius: 0; background: none; }
.ks-g3 .ks-hit img { transition: transform .085s cubic-bezier(.16,1,.3,1); }
.ks-g3 .ks-hit:is([data-hover],[data-pressed]) img { transform: translateY(10px); }
.ks-g3 .ks-hit[data-pressed] img { transition-duration: 0s; }
@media (max-width: 809.98px) {
  [data-simulator-mode="imac-g3"] .ks-console-detail { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-g3 .ks-hit img { transition: none; }
}

/* Sky 61 keeps a matte blue/white shell around the RGB glow. */
[data-simulator-mode="sky61"] .ks-root::before { background: radial-gradient(ellipse 65% 36% at 50% 86%, #33556d30, transparent 90%); }
[data-simulator-mode="sky61"] .ks-hit:hover, [data-simulator-mode="sky61"] .ks-hit[data-pressed] { background: none; }
[data-simulator-mode="sky61"] .ks-lighting { height: auto; min-height: 28px; flex-wrap: wrap; row-gap: 8px; }
.ks-rgb-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #9bb4bc; font-size: 10px; white-space: nowrap; }
.ks-rgb-mode { border: 1px solid #36515b !important; border-radius: 5px; padding: 4px 6px; background: #10212a; color: #d0e9f2 !important; font-size: 10px !important; }
.ks-rgb-mode:focus-visible { outline: 2px solid #a6efb6; outline-offset: 3px; }
@media (max-width: 809.98px) {
  [data-simulator-mode="sky61"] .ks-rgb-controls { margin-left: 0; }
}
@media (max-width: 379.98px) {
  .ks-footer-slot[data-keyboard-scene="sky61"] { --ks-scene-height: calc(var(--ks-board-height) + 368px + var(--ks-selector-space) + var(--ks-input-space)); }
}

[data-simulator-mode="picnic66"] .ks-root::before { background: radial-gradient(ellipse 65% 36% at 50% 86%, #79535d20, transparent 90%); }
[data-simulator-mode="picnic66"] .ks-hit:hover, [data-simulator-mode="picnic66"] .ks-hit[data-pressed] { background: none; }
.ks-knob { position: absolute; pointer-events: auto; border-radius: 50%; padding: 0; touch-action: manipulation; }
.ks-knob:focus-visible { outline: 2px solid #f0c0b8; outline-offset: 3px; }
@media (max-width: 809.98px) { [data-simulator-mode="picnic66"] .ks-console-detail { font-size: 8px; } }

@media (max-width: 1100px) { .ks-toolbar { gap: 12px; } .ks-audio { gap: 6px; } }
@media (max-width: 809.98px) { .ks-toolbar { flex-wrap: wrap; } .ks-audio { flex-wrap: wrap; } }

[data-simulator-mode="retro104"] .ks-hit:hover, [data-simulator-mode="retro104"] .ks-hit[data-pressed] { background: none; }

/* Warm cabinet and raised controls shared by every keyboard model. */
.ks-root { color: #fff0d4; }
[data-simulator-mode] .ks-root { background: #3e3127 !important; }
[data-simulator-mode] .ks-root::before { background: radial-gradient(ellipse 65% 42% at 50% 80%, #f2a83a25, transparent 84%) !important; }
.ks-selector-track {
  padding: 9px 10px 13px;
  background: #2d241d;
  border: 1px solid #9c7f5d;
  border-radius: 18px;
  box-shadow: inset 0 1px #fff0d429, 0 8px 24px #2018105c;
  scrollbar-color: #d1a66a transparent;
}
.ks-root .ks-choice {
  border: 1px solid #d4c2a6;
  border-radius: 14px;
  background: #fff6e6;
  box-shadow: inset 0 2px #fff, inset 0 -3px #d0bfa3, 0 3px 0 #876948, 0 6px 10px #21170f35;
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.ks-root .ks-choice:hover { transform: translateY(-2px); background: #ffe8bd; }
.ks-root .ks-choice:active { transform: translateY(2px); box-shadow: inset 0 2px 4px #76533569, 0 1px 0 #876948; }
.ks-root .ks-choice[aria-pressed="true"] { background: #f2a83a; border-color: #b46b30; box-shadow: inset 0 2px #ffe0a7, inset 0 -3px #cc772d, 0 3px 0 #733f26; }
.ks-choice strong, .ks-choice:hover strong, .ks-choice[aria-pressed="true"] strong { color: #3e3127; font-weight: 700; }
.ks-led { background: #f2a83a; box-shadow: 0 0 8px #f2a83a9e; }
.ks-console {
  padding: 18px 22px 16px;
  background: #fff0d4;
  border: 1px solid #d8b887;
  border-radius: 18px;
  box-shadow: inset 0 2px #fff9eb, 0 5px 0 #a77b50, 0 16px 38px #22180e6b;
  color: #3e3127;
}
.ks-console-title { color: #4d3c2d; font-weight: 700; }
.ks-console-detail { color: #897157; border-color: #c6a77f; }
.ks-toolbar { top: 12px; right: 22px; gap: 12px; }
.ks-modes { gap: 7px; padding: 0; background: none; border: 0; }
.ks-root :is(.ks-modes button,.ks-mute,.ks-sound-test,.ks-studio-open,.ks-backlight,.ks-start,.ks-clear,.ks-next) {
  min-height: 32px;
  padding: 6px 11px !important;
  border: 1px solid #c6b293 !important;
  border-radius: 9px;
  background: #fff9eb !important;
  box-shadow: inset 0 2px #fff, inset 0 -2px #d2c0a6, 0 2px 0 #9c8160, 0 4px 8px #291a101f;
  color: #3e3127 !important;
  font-size: 11px !important;
  font-weight: 650;
  white-space: nowrap;
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.ks-root :is(.ks-modes button,.ks-mute,.ks-sound-test,.ks-studio-open,.ks-backlight,.ks-start,.ks-clear,.ks-next):hover { background: #ffe7bd !important; transform: translateY(-1px); }
.ks-root :is(.ks-modes button,.ks-mute,.ks-sound-test,.ks-studio-open,.ks-backlight,.ks-start,.ks-clear,.ks-next):active { transform: translateY(2px); box-shadow: inset 0 2px 4px #76533569, 0 1px 0 #9c8160; }
.ks-root :is(.ks-modes button,.ks-mute,.ks-backlight)[aria-pressed="true"] { background: #f2a83a !important; border-color: #b56d32 !important; box-shadow: inset 0 2px #ffe0a7, inset 0 -2px #ce7a30, 0 2px 0 #8a4a2b; }
.ks-root :is(.ks-start,.ks-studio-open) { background: #f27d3b !important; border-color: #b04e2c !important; box-shadow: inset 0 2px #ffbd85, inset 0 -2px #c65c2c, 0 2px 0 #873e27; }
.ks-root :is(.ks-start,.ks-studio-open):hover { background: #ff994e !important; }
.ks-start::before { color: #64351e; }
.ks-volume, .ks-brightness { accent-color: #e68136; }
.ks-lighting { margin-top: 14px; }
.ks-backlight > [aria-hidden] { font-size: 17px; }
.ks-backlight[aria-pressed="true"] > [aria-hidden] { text-shadow: none; }
.ks-brightness-value, .ks-rgb-controls { color: #725a40; }
.ks-root :is(.ks-rgb-mode,.ks-language) {
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid #c6b293 !important;
  border-radius: 9px;
  background: #fff9eb;
  box-shadow: inset 0 2px #fff, inset 0 -2px #d2c0a6, 0 2px 0 #9c8160;
  color: #3e3127 !important;
  cursor: pointer;
}
.ks-hud { color: #3e3127; border-color: #bc9566; }
.ks-hud-prompt, .ks-hud-status, .ks-target, .ks-lesson-tools { color: #786149; }
.ks-hud-output { color: #3e3127; text-shadow: none; }
.ks-hud:focus-within { border-color: #e27632; }
.ks-cursor { background: #f27d3b; color: #2d241d; }
.ks-bottom { margin-top: 14px; }
.ks-metrics { color: #786149; }
.ks-metrics b { color: #3e3127; }
.ks-correct { color: #386f4c; }
.ks-error { color: #ae3b2f; background: #f14a4222; }
.ks-next-char { border-color: #e27632; }
.ks-status { color: #ead8bb; }
.ks-root button:focus-visible, .ks-root select:focus-visible, .ks-volume:focus-visible, .ks-brightness:focus-visible { outline-color: #e77231; }
@keyframes ks-cursor-blink { 0%, 100% { background: #f27d3b; color: #2d241d; } 50% { background: transparent; color: #3e3127; } }
@media (max-width: 809.98px) {
  .ks-console { padding: 15px; }
  .ks-toolbar { position: static; gap: 9px; }
  .ks-root :is(.ks-modes button,.ks-mute,.ks-sound-test,.ks-studio-open,.ks-backlight,.ks-start,.ks-clear,.ks-next) { min-height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-root :is(.ks-choice,.ks-modes button,.ks-mute,.ks-sound-test,.ks-studio-open,.ks-backlight,.ks-start,.ks-clear,.ks-next) { transition: none; }
}