.examples-app{color:#183d34;font-synthesis:none;background:#f3f5ee;font-family:ui-sans-serif,system-ui,sans-serif}.examples-app *{box-sizing:border-box}.examples-app{margin:0}.examples-app .badge{letter-spacing:1px;white-space:nowrap;background:#e4eddd;border-radius:5px;padding:7px 10px;font-size:10px;font-weight:750}.examples-app main{max-width:1260px;margin:auto;padding:36px 4vw}.examples-app .eyebrow{text-transform:uppercase;letter-spacing:2px;color:#49806b;font-size:11px;font-weight:750}.examples-app h1{letter-spacing:-2.5px;margin:14px 0;font-size:clamp(38px,4.5vw,64px);font-weight:600}.examples-app .intro>p:last-child{color:#62786a;margin-bottom:36px}.examples-app .workspace{grid-template-columns:220px minmax(0,1fr);gap:30px;display:grid}.examples-app nav{flex-direction:column;gap:6px;display:flex}.examples-app nav a{color:#456251;border-radius:8px;gap:14px;padding:15px 12px;font-size:13px;text-decoration:none;display:flex}.examples-app nav a span{opacity:.6;font-size:11px}.examples-app nav a[aria-current=page]{color:#fff;background:#234f40}.examples-app .demo{min-width:0}.examples-app .demo-heading{justify-content:space-between;align-items:start;gap:16px;margin-bottom:22px;display:flex}.examples-app h2{letter-spacing:-.6px;margin:0;font-size:24px}.examples-app .demo-heading p{color:#5d7465;max-width:470px;margin-bottom:0;font-size:13px;line-height:1.6}.examples-app .frameworks{background:#e6ebdf;border-radius:8px;flex-shrink:0;padding:4px;display:flex}.examples-app .frameworks a{color:inherit;border-radius:5px;padding:8px 12px;font-size:12px;text-decoration:none}.examples-app .frameworks a[aria-current]{background:#fff;box-shadow:0 1px 5px #1232}.examples-app .player-card{background:#fff;border:1px solid #dce3d5;border-radius:12px;min-width:0;margin-bottom:18px;padding:25px}.examples-app .card-heading{justify-content:space-between;align-items:center;gap:15px;display:flex}.examples-app h3{margin:0;font-size:16px;font-weight:650}.examples-app .helper{color:#708374;margin:10px 0 22px;font-size:11px}.examples-app .player-card .raavl-waveform{--raavl-progress-color:inherit;--raavl-wave-color:inherit}.examples-app button,.examples-app select,.examples-app input{font:inherit}.examples-app button,.examples-app select{color:#234f40;background:#fff;border:1px solid #ced8ca;border-radius:6px;padding:9px 12px;font-size:12px}.examples-app button{cursor:pointer}.examples-app button:hover:not(:disabled){background:#eaf1e4}.examples-app button:disabled{opacity:.4;cursor:default}.examples-app button.primary{color:#fff;background:#245e49;border-color:#245e49}.examples-app button.primary:hover:not(:disabled){background:#153c2e}.examples-app .play{min-width:90px}.examples-app .transport{flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 18px;display:flex}.examples-app .clock{font-variant-numeric:tabular-nums;margin-left:auto;font-family:ui-monospace,monospace;font-size:15px}.examples-app .clock span{color:#869489}.examples-app .audio-settings{flex-wrap:wrap;align-items:center;gap:25px;display:flex}.examples-app label{color:#5c7362;font-size:12px}.examples-app .audio-settings label{align-items:center;gap:10px;display:flex}.examples-app input[type=range]{accent-color:#397c5e;max-width:130px}.examples-app input[type=checkbox]{accent-color:#397c5e}.examples-app .checkbox{align-items:center;gap:8px;display:flex}.examples-app .status{color:#7a897d;border-top:1px solid #edf0e8;flex-wrap:wrap;gap:18px;margin-top:20px;padding-top:16px;font-size:10px;display:flex}.examples-app .status b{color:#365b46;margin-left:5px;font-weight:550}.examples-app .customize{background:#f8faf5;border-radius:8px;margin-top:20px;padding:16px}.examples-app summary{cursor:pointer;font-size:12px;font-weight:650}.examples-app .view-settings{flex-wrap:wrap;align-items:end;gap:18px;margin-top:16px;display:flex}.examples-app .view-settings label{flex-direction:column;gap:7px;display:flex}.examples-app .theme-json{border-top:1px solid #dce3d5;margin-top:20px;padding-top:16px}.examples-app .theme-json p{color:#5c7362;font-size:12px;line-height:1.6}.examples-app .theme-json label{margin-top:14px;display:block}.examples-app .theme-json textarea{resize:vertical;color:#183d34;background:#fff;border:1px solid #ced8ca;border-radius:6px;width:100%;margin-top:8px;padding:12px;font:12px/1.6 ui-monospace,monospace;display:block}.examples-app .theme-json a{color:#277e67;font-size:12px}.examples-app input[type=color]{background:#fff;border:1px solid #ced8ca;border-radius:6px;width:45px;height:34px;padding:3px}.examples-app .source-form{margin-bottom:22px}.examples-app .source-form>div{gap:8px;margin-top:8px;display:flex}.examples-app .source-form input{border:1px solid #ced8ca;border-radius:6px;flex:1;min-width:0;padding:10px 12px;font-size:13px}.examples-app .source-form p{color:#718370;font-size:11px}.examples-app .callout,.examples-app .file-drop{background:#e7efdf;border-radius:9px;margin-bottom:20px;padding:18px 20px;font-size:13px;line-height:1.6}.examples-app .callout p{margin:0 0 10px}.examples-app .file-drop{border:1px dashed #90aa80;flex-direction:column;gap:14px;display:flex}.examples-app .file-drop span{color:#5d755e;font-size:11px}.examples-app .external{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.examples-app .external p{margin-bottom:0;font-size:11px}.examples-app audio{max-width:100%;height:40px}.examples-app .test-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.examples-app .test-actions span{color:#6c826d;font-size:11px}.examples-app .empty-wave{color:#6a7d6d;background:#f0f4eb;border-radius:8px;place-items:center;height:160px;font-size:13px;display:grid}.examples-app .error{color:#864b2c;background:#fff1e9;border-radius:6px;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:14px;font-size:12px;display:flex}.examples-app footer{color:#72816d;border-top:1px solid #d6dfd2;justify-content:space-between;gap:20px;margin-top:30px;padding-top:20px;font-size:11px;display:flex}.examples-app :focus-visible{outline-offset:3px;outline:3px solid #bc7f36}@media (max-width:850px){.examples-app .workspace{grid-template-columns:1fr}.examples-app nav{flex-direction:row;overflow:auto}.examples-app nav a{flex-shrink:0}.examples-app .demo-heading{flex-wrap:wrap}}@media (max-width:520px){.examples-app main{padding:25px 16px}.examples-app .player-card{padding:17px}.examples-app .card-heading{flex-wrap:wrap}.examples-app .clock{width:100%;margin-top:6px}.examples-app footer{flex-direction:column}}.examples-app .editor-settings{margin:20px 0}.examples-app .editor-actions{flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;display:flex}.examples-app .editor-actions span{color:#718370;font-size:11px}.examples-app .annotation-fields{border:1px solid #d6dfd2;border-radius:8px;flex-wrap:wrap;align-items:end;gap:12px;margin:15px 0;padding:15px;display:flex}.examples-app .annotation-fields legend{font-size:12px}.examples-app .annotation-fields label{flex-direction:column;gap:6px;display:flex}.examples-app .annotation-fields input{border:1px solid #ced8ca;border-radius:5px;width:140px;padding:8px}.examples-app .persistence{margin-top:20px;font-size:12px}.examples-app .persistence label{display:block}.examples-app .persistence textarea{resize:vertical;border:1px solid #ced8ca;border-radius:5px;width:100%;margin:10px 0;padding:12px;font:11px ui-monospace,monospace;display:block}.examples-app .annotation-editor .raavl-region-body{color:#493165}.examples-app .annotation-editor .raavl-region-label{text-align:left}.examples-app .code-example{background:#fff;border:1px solid #dce3d5;border-radius:12px;margin-top:24px;overflow:hidden}.examples-app .code-heading{border-bottom:1px solid #dce3d5;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;display:flex}.examples-app .code-heading h3{margin-right:auto}.examples-app .code-heading [role=status]{color:#5c7362;font-size:12px}.examples-app .code-example pre{tab-size:2;background:#f8faf5;max-height:560px;margin:0;padding:22px;font:12px/1.7 ui-monospace,monospace;overflow-x:auto}.examples-app .demo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.examples-app .demo-tile{min-height:245px;color:inherit;background:#fff;border:1px solid #dce3d5;border-radius:12px;flex-direction:column;padding:26px;text-decoration:none;transition:border-color .15s;display:flex}.examples-app .demo-tile:hover{border-color:#49806b}.examples-app .demo-tile h2{margin-top:22px;font-size:21px}.examples-app .demo-tile p{color:#62786a;font-size:14px;line-height:1.65}.examples-app .tile-link{color:#277e67;margin-top:auto;padding-top:14px;font-size:13px;font-weight:650}.examples-app .docs-callout{background:#e6eddf;border-radius:12px;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;padding:28px;display:flex}.examples-app .docs-callout h2{font-size:21px}.examples-app .docs-callout p{color:#62786a;margin-bottom:0;font-size:14px;line-height:1.6}.examples-app .docs-callout a{flex-shrink:0;font-size:14px}.examples-app footer a,.examples-app .docs-callout a{color:#277e67;text-underline-offset:3px}.examples-app .frameworks button{background:0 0;border:0;min-height:44px}.examples-app .frameworks button[aria-pressed=true]{background:#fff;box-shadow:0 1px 5px #1232}@media (max-width:1100px){.examples-app .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:851px){.examples-app .section-nav{align-self:start;position:sticky;top:80px}}@media (max-width:850px){.examples-app .docs-callout{flex-direction:column;align-items:start}}@media (max-width:520px){.examples-app .demo-grid{grid-template-columns:1fr}.examples-app .demo-tile{min-height:220px}.examples-app .code-heading button,.examples-app .frameworks a{align-items:center;min-height:44px;display:inline-flex}}.examples-app input.raavl-seek{width:100%;max-width:none}.examples-app input.raavl-volume{width:96px}