.sample-browser{border:1px solid var(--line);border-radius:12px;background:#131416;overflow:hidden;padding:28px}.sample-browser-head .eyebrow{margin-bottom:10px}.sample-browser-head h3{font-size:28px;margin-bottom:10px}.sample-browser-head>p:last-child{color:var(--muted);font-size:14px}.sample-player{margin:22px 0;padding:16px;background:#202124;border-bottom:2px solid var(--accent);border-radius:6px 6px 0 0}.sample-player audio{display:block;width:100%;margin-top:10px;height:40px}.sample-player p{font-size:13px}.sample-player #sample-error{color:#ffbc99;margin-top:6px}.sample-filters{display:grid;grid-template-columns:minmax(0,1fr) 230px auto;gap:14px;align-items:end}.sample-filters label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.sample-filters input,.sample-filters select,.sample-filters button{background:#202124;color:var(--text);border:1px solid #505056;border-radius:6px;min-height:46px;font:inherit;padding:10px 12px;min-width:0;width:100%}.sample-filters select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.sample-filters button{width:auto;font-size:12px}#sample-count{color:var(--muted);font-size:12px;margin:18px 0 10px}.sample-list{list-style:none;margin:0;padding:0}.sample-row{display:grid;grid-template-columns:44px minmax(0,1fr) 65px;gap:14px;align-items:center;border-top:1px solid var(--line);padding:15px 8px}.sample-row[hidden]{display:none}.sample-play{height:44px;width:44px;background:#28292d;color:var(--text);border:1px solid #55565b;border-radius:7px;font-size:16px}.sample-play:hover,.sample-row.is-playing .sample-play{background:var(--accent);color:#141414;border-color:var(--accent)}.sample-row.is-playing{background:#241b16}.sample-info{min-width:0}.sample-info strong{display:block;font-size:14px}.sample-info strong span{font-weight:400;color:var(--muted);margin-left:6px;font-size:11px}.sample-filename{display:block;overflow-wrap:anywhere;color:#b4b2af;font-size:10px;margin-top:3px}.sample-meta{display:block;color:#ecb48b;font-size:11px;margin-top:4px}.sample-duration{color:var(--muted);font-size:12px;text-align:right}.sample-browser-foot{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px;font-size:12px;color:var(--muted)}.sample-browser-foot a{color:var(--accent);font-weight:650;width:fit-content}#sample-empty{padding:22px 0;font-size:14px}@media(max-width:650px){.sample-browser{padding:18px 14px}.sample-browser-head h3{font-size:22px}.sample-browser-head>p:last-child{font-size:12px}.sample-filters{grid-template-columns:minmax(0,1fr) auto;gap:10px}.sample-filters label:first-child{grid-column:1/-1}.sample-filters input{font-size:16px}.sample-filters select{font-size:14px}.sample-player{padding:12px}.sample-row{grid-template-columns:44px minmax(0,1fr);gap:8px 12px;padding:14px 0}.sample-duration{grid-column:2;text-align:left;margin-top:-7px;font-size:10px}.sample-filename{font-size:9px}.sample-info strong{font-size:13px}.sample-meta{font-size:10px}.sample-browser-foot{font-size:11px}}

.sample-demo{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:4px 0 18px;margin-bottom:14px;border-bottom:1px solid #45403a}.sample-demo h4{font-size:21px;line-height:1.25;margin:5px 0 9px}.sample-demo .sample-demo-kicker{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1px}.sample-demo p{line-height:1.6}.sample-demo .sample-demo-meta{color:var(--muted);font-size:11px;margin-top:7px}.sample-demo .sample-play{border-color:var(--accent);color:var(--accent)}.sample-demo.is-playing .sample-play{background:var(--accent);color:#141414}.sample-demo .sample-play:focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(max-width:650px){.sample-demo{gap:12px}.sample-demo h4{font-size:18px}.sample-demo p{font-size:12px}.sample-demo .sample-demo-kicker{font-size:9px}}