.sound-game{color:var(--site2-ink)}
.sound-game [hidden]{display:none!important}
.sound-heading{padding:15px 13px;border-bottom:3px solid var(--site2-ink)}
.sound-heading h1{margin:0;font-family:Site2Pixel,monospace}
.sound-settings{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.sound-settings label{display:flex;flex:1;align-items:center;gap:10px;font:11px/1.5 Site2Pixel,monospace}
.sound-settings input{width:110px;min-height:44px;accent-color:var(--site2-forest);cursor:pointer}
.sound-button{min-height:46px;padding:12px 14px 10px;border:3px solid var(--site2-ink);border-radius:0;box-shadow:3px 3px 0 var(--site2-moss);background:var(--site2-forest);color:var(--site2-paper);font:11px/1.6 Site2Pixel,monospace;cursor:pointer}
.sound-button.quiet{background:var(--site2-cream);color:var(--site2-ink)}
.sound-settings .sound-level{position:relative;flex:0 0 184px;min-width:174px;max-width:100%}
.sound-level summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;list-style:none}
.sound-level summary::-webkit-details-marker{display:none}
.sound-level summary::after{content:'';margin-left:auto;border:5px solid transparent;border-top-color:var(--site2-ink);transform:translateY(3px)}
.sound-level[open] summary::after{transform:rotate(180deg) translateY(3px)}
.sound-check{display:block;flex-shrink:0;width:28px;height:28px;background:url("sim-card-assets/sound-graphs-check.svg") center/28px 28px no-repeat;font-size:0;image-rendering:pixelated}
.sound-level-options{position:absolute;z-index:20;top:calc(100% + 6px);right:0;width:100%;max-height:330px;overflow-y:auto;overscroll-behavior:contain;padding:4px;border:3px solid var(--site2-ink);background:var(--site2-paper);box-shadow:3px 3px 0 var(--site2-moss)}
.sound-level-options button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:0;background:var(--site2-paper);color:var(--site2-ink);font:11px/1.5 Site2Pixel,monospace;text-align:left;cursor:pointer}
.sound-level-options button:hover,.sound-level-options button[aria-current]{background:var(--site2-cream)}
.sound-button.next{background:var(--site2-sand);color:var(--site2-ink)}
.sound-button:hover:not(:disabled){background:var(--site2-gold);color:var(--site2-ink)}
.sound-button:disabled{opacity:.5;cursor:default;box-shadow:none}
.sound-panel{padding:16px;border:3px solid var(--site2-ink);background:var(--site2-cream);box-shadow:4px 4px 0 var(--site2-moss)}
.sound-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:34px;margin-bottom:14px}
.sound-panel-heading h2{margin:0;font:13px/1.7 Site2Pixel,monospace}
#sound-count{flex-shrink:0;color:var(--site2-chestnut);font:11px/1.5 Site2Pixel,monospace}
.sound-demo{max-width:500px;margin:auto;border:3px solid var(--site2-ink);background:var(--site2-paper)}
.sound-demo-name{padding:8px 12px;border-bottom:2px solid var(--site2-ink);color:var(--site2-chestnut);font:700 25px/1.5 Site2Body,Arial,sans-serif}
.sound-equation{padding:0 8px 8px;color:var(--site2-forest);text-align:center;font:700 20px/1.4 Site2Body,Arial,sans-serif}
.sound-hint{margin:14px 0 0;font-size:16px;line-height:1.5}
.sound-plot{display:block;width:100%;height:auto;overflow:visible}
.sound-plot .grid-line{stroke:var(--site2-line);stroke-width:.7;opacity:.65}
.sound-plot .axis{stroke:var(--site2-ink);stroke-width:1.5}
.sound-plot text{fill:var(--site2-ink);font:16px Site2Body,Arial,sans-serif}
.sound-plot .curve{fill:none;stroke:var(--site2-blue);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sound-plot .trace{fill:none;stroke:var(--site2-chestnut);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sound-plot .cursor{fill:var(--site2-gold);stroke:var(--site2-ink);stroke-width:2}
.sound-plot .sweep{stroke:var(--site2-chestnut);stroke-width:1;stroke-dasharray:4 4}
.sound-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;min-height:430px}
.sound-option{display:flex;flex-direction:column;width:100%;min-width:0;padding:0;border:3px solid var(--site2-ink);border-radius:0;background:var(--site2-paper);color:var(--site2-ink);text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--site2-moss)}
.sound-option:disabled{cursor:default;opacity:1}
.sound-option .sound-plot{height:190px}
.sound-option:hover:not(:disabled){border-color:var(--site2-blue)}
.sound-option-label{display:flex;align-items:center;justify-content:space-between;min-height:33px;padding:6px 10px;border-bottom:2px solid var(--site2-ink);font:11px/1.6 Site2Pixel,monospace}
.sound-option.wrong{border-color:var(--site2-red);box-shadow:none}
.sound-option.wrong .sound-option-label{color:var(--site2-red)}
.sound-option.correct{border-color:var(--site2-forest)}
.sound-option.correct .sound-option-label{background:var(--site2-forest);color:var(--site2-paper)}
.sound-option.is-playing{box-shadow:3px 3px 0 var(--site2-chestnut)}
.sound-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:0}
.sound-controls .sound-button{flex:1}
.sound-playback{height:5px;margin-top:17px;background:var(--site2-line);overflow:hidden}
#sound-progress{display:block;width:100%;height:100%;background:var(--site2-chestnut);transform:scaleX(0);transform-origin:left}
#sound-status{min-height:27px;margin:10px 0 12px;font-size:17px;line-height:1.5}
#sound-status:empty{display:none}
#sound-content{margin-top:12px}
.sound-finish{display:grid;place-items:center;min-height:310px;background:var(--site2-paper);border:3px solid var(--site2-ink)}
.sound-finish strong{padding:20px;text-align:center;color:var(--site2-forest);font:20px/1.8 Site2Pixel,monospace}
@media(max-width:600px){
  .sound-heading{padding:12px 4px}
  .sound-settings{gap:8px}
  .sound-settings label{flex-basis:100%}
  .sound-settings input{flex:1;max-width:190px}
  .sound-settings .sound-button{flex:1}
  .sound-settings .sound-level{flex:1 1 174px}
  .sound-panel{padding:10px}
  .sound-panel-heading{align-items:flex-start;gap:8px}
  .sound-panel-heading h2{font-size:11px}
  #sound-count{font:15px/1.5 Site2Body,Arial,sans-serif}
  .sound-options{gap:9px;min-height:310px}
  .sound-option .sound-plot{height:auto}
  .sound-option-label{padding:5px 7px}
  .sound-option-label .sound-result{font:14px/1.4 Site2Body,Arial,sans-serif}
  .sound-plot text{font-size:21px}
  .sound-controls{gap:9px}
  .sound-controls .sound-button{padding:10px 7px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  html:has(.sound-game){scroll-behavior:auto}
}