:root{--ink:#252932;--muted:#626873;--blue:#377bd6;--line:#dce1e9;scroll-behavior:auto}
*{box-sizing:border-box}
body{margin:0;background:#f5f5f9;color:var(--ink);font-family:Arial,"Segoe UI",sans-serif;font-size:15px;line-height:1.55}
a{color:#2864b2;text-underline-offset:3px}
button,a,audio{touch-action:manipulation}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,audio:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
[hidden]{display:none!important}
.wrap{max-width:1240px;padding-left:28px;padding-right:28px;margin:0 auto}
.skip{position:fixed;left:12px;top:-100px;background:white;padding:12px;z-index:5}.skip:focus{top:12px}
header{background:#30343c;color:white;text-align:center;padding:21px 20px 23px}
h1{font-size:30px;line-height:1.2;margin:0 0 5px;letter-spacing:.01em}header p{font-size:15px;color:#e2e5eb;margin:0}
main{padding-top:27px;padding-bottom:18px}h2{font-size:21px;margin:0 0 10px;text-align:center}
.guide{font-size:14px;text-align:center;color:var(--muted);max-width:960px;margin:0 auto 17px}
#load-status,.local-status{font-size:12px;text-align:center;color:var(--muted);margin:0 0 15px}
.availability{background:white;border:1px solid var(--line);border-radius:7px;padding:25px;text-align:center;margin:30px 0 45px}.availability p{margin:0 0 5px}.availability p:last-child{font-size:13px;color:var(--muted);margin:0}
#example-index{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:16px 0 28px}
#example-index a{font-size:12px;padding:4px 10px;border:1px solid #d5dce7;background:white;border-radius:4px;text-decoration:none}#example-index a:hover{background:#e8f0fb}
.example{margin:0 0 24px;scroll-margin-top:16px}
.example-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}
.example-title{font-size:16px;font-weight:600;margin:0}
.target-switch{display:flex;align-items:center;gap:5px}.target-switch span{font-size:12px;color:var(--muted);margin-right:5px}
.target-switch button{width:34px;height:29px;border:1px solid #bdc8d8;background:white;border-radius:4px;line-height:1;font-size:13px}.target-switch button[aria-pressed=true]{color:white;background:var(--blue);border-color:var(--blue)}
.track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.track{min-width:0;margin:0;padding:12px 8px 8px;background:white;border:1px solid #e6e8ef;border-radius:9px;box-shadow:0 2px 6px #2529320a}
.track h4{font-size:15px;font-weight:500;margin:0 0 12px;text-align:center}
.track img{width:100%;aspect-ratio:2.7;object-fit:fill;display:block;border-radius:5px;background:#000004}
.track-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:3px 0 7px}
.track audio{display:block;width:100%;height:42px}
.download{display:block;text-align:center;background:#78a8f6;color:#132c54;text-decoration:none;font-size:13px;border-radius:4px;padding:4px 8px;margin-top:9px}.download:hover{background:#6198f1}
.track-description{display:block;text-align:center;color:#a32b2b;font-size:12px;margin:0 0 9px}
.playback-row{text-align:right;margin-top:5px}.restart{font-size:11px;background:none;color:#526d95;padding:4px 0;border:0}
.playback-notes{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:20px}.playback-notes summary{cursor:pointer}.playback-notes p{margin:10px 0;max-width:1050px}
footer.wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 25px;border-top:1px solid var(--line);font-size:12px;padding-top:18px;padding-bottom:22px}footer a{color:var(--muted)}
@media(max-width:1000px){.track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track img{aspect-ratio:3.2}}
@media(max-width:600px){.wrap{padding-left:17px;padding-right:17px}header{padding:18px}h1{font-size:26px}header p{font-size:13px}main{padding-top:23px}.guide{font-size:13px}.track-grid{grid-template-columns:1fr;gap:10px}.track{padding:13px 12px 10px}.track img{aspect-ratio:3.4}.track h4{font-size:16px}.track-axis{font-size:11px}.download{padding:6px 8px}.example{margin-bottom:25px}.example-title{font-size:15px}footer.wrap{gap:10px 17px}}