@layer components{.c-audio{--audio-green:#00d900;--audio-black:#030406;--audio-gold:#d5cd89;width:min(100%, var(--spacing-480-480));color:#d9d9de;font-family:var(--font-geist-mono), monospace;font-size:var(--text-10-10);line-height:var(--leading-1-2);letter-spacing:0;background:linear-gradient(100deg,#171721,#282839 55%,#1c1c2b);border:2px solid #5e6072;border-color:#5e6072 #0b0c13 #090a10 #6d6f80;box-shadow:0 0 0 1px #030307,inset 0 0 0 1px #0b0c14,0 4px 12px #0008}.c-audio_titlebar{align-items:center;gap:var(--spacing-6-6);height:var(--spacing-24-24);padding-inline:var(--spacing-6-6);font-family:var(--font-geist-sans), sans-serif;font-size:var(--text-12-12);letter-spacing:.07em;text-shadow:1px 1px #090910;font-weight:800;display:flex}.c-audio_titlebar>.c-audio_icon{color:var(--audio-gold)}.c-audio_stripe{height:var(--spacing-6-6);background:linear-gradient(#d8d298 0 20%,#797350 20% 45%,#242432 45% 65%,#d8d298 65% 85%,#797350 85%);border:1px solid #0c0c14;flex:1;box-shadow:0 1px #626275}.c-audio_power,.c-audio_led{width:var(--spacing-6-6);height:var(--spacing-6-6);background:#2a3923;flex-shrink:0;box-shadow:inset 1px 1px #121b0d,1px 1px #c8c8af}.c-audio_power[data-active=true],.c-audio_led[data-active=true]{background:var(--audio-green)}.c-audio_dashboard{grid-template-columns:38% minmax(0,1fr)}.c-audio_display,.c-audio_track{background:var(--audio-black);border:2px solid #505466;border-color:#090a10 #505466 #505466 #080910;box-shadow:inset 1px 1px #000}.c-audio_display{padding:var(--spacing-6-6) var(--spacing-4-4) var(--spacing-4-4);background-image:radial-gradient(circle,#151923 .5px,#0000 .5px);background-size:3px 3px}.c-audio_clock{color:var(--audio-green)}.c-audio_indicator{color:#204923}.c-audio_indicator[data-active=true]{color:var(--audio-green)}.c-audio_time{flex:1;min-width:0}.c-audio_digits{height:var(--spacing-28-28)}.c-audio_spectrum{margin-top:var(--spacing-12-12);height:var(--spacing-32-32);image-rendering:pixelated}.c-audio_track{height:var(--spacing-28-28);padding-inline:var(--spacing-6-6);color:var(--audio-green);text-transform:uppercase;font-size:var(--text-12-12);white-space:nowrap;text-shadow:none;align-items:center;font-weight:700;display:flex;overflow:hidden}.c-audio_track span{text-overflow:ellipsis;overflow:hidden}.c-audio_metadata{min-height:var(--spacing-28-28);font-size:var(--text-10-10);white-space:nowrap;text-shadow:1px 1px #101018}.c-audio_metadata b{background:var(--audio-black);color:var(--audio-green);padding-inline:var(--spacing-4-4);font-weight:600}.c-audio_channels{color:var(--audio-green);margin-left:auto}.c-audio_icon{width:var(--spacing-14-14);height:var(--spacing-14-14);flex-shrink:0;display:block}.c-audio_mute{width:var(--spacing-28-28);height:var(--spacing-28-28);color:#c2c2cc;cursor:pointer;place-items:center;display:grid}.c-audio_slider{appearance:none;height:var(--spacing-28-28);cursor:pointer;accent-color:var(--audio-gold);background:0 0;border:0;border-radius:0}.c-audio_slider::-webkit-slider-runnable-track{height:var(--spacing-8-8);background:#11111d;border:1px solid #686879;border-color:#090911 #686879 #686879 #090911}.c-audio_slider::-moz-range-track{height:var(--spacing-8-8);background:#11111d;border:1px solid #686879;border-color:#090911 #686879 #686879 #090911}.c-audio_slider.-volume::-webkit-slider-runnable-track{background:linear-gradient(90deg,#9b591a,#cba42f 55%,#46ae25)}.c-audio_slider.-volume::-moz-range-track{background:linear-gradient(90deg,#9b591a,#cba42f 55%,#46ae25)}.c-audio_slider::-webkit-slider-thumb{appearance:none;width:var(--spacing-20-20);height:var(--spacing-14-14);margin-top:calc(-1 * var(--spacing-4-4));background:repeating-linear-gradient(90deg,#353846 0 1px,#0000 1px 3px) 50%/7px 7px no-repeat,linear-gradient(#c6d1d7,#94a2ae);border:2px solid #e0ebee;border-color:#e0ebee #454957 #383d49 #c9d5da;border-radius:0;box-shadow:1px 1px #101018}.c-audio_slider::-moz-range-thumb{width:var(--spacing-20-20);height:var(--spacing-14-14);background:repeating-linear-gradient(90deg,#353846 0 1px,#0000 1px 3px) 50%/7px 7px no-repeat,linear-gradient(#c6d1d7,#94a2ae);border:2px solid #e0ebee;border-color:#e0ebee #454957 #383d49 #c9d5da;border-radius:0;box-shadow:1px 1px #101018}.c-audio_slider.-seek::-webkit-slider-thumb{width:var(--spacing-32-32);background:linear-gradient(#ebe6b3,#aba575 50%,#d5cf99)}.c-audio_slider.-seek::-moz-range-thumb{width:var(--spacing-32-32);background:linear-gradient(#ebe6b3,#aba575 50%,#d5cf99)}.c-audio_transport{max-width:var(--spacing-240-240);flex:1}.c-audio .c-audio_button{min-width:var(--spacing-32-32);height:var(--spacing-32-32);padding-inline:var(--spacing-6-6);color:#344052;font-size:var(--text-10-10);text-shadow:1px 1px #d5e0e7;cursor:pointer;touch-action:manipulation;background:linear-gradient(#c3d0d8,#899aa9 50%,#a9bac4);border:2px solid #e3edf2;border-color:#e3edf2 #50586a #424b5e #bdcdd7;place-items:center;font-weight:700;text-decoration:none;display:grid;box-shadow:1px 1px #080911,inset 1px 1px #d5e0e7}.c-audio_transport .c-audio_button{flex:1}.c-audio .c-audio_button.-loop{margin-left:auto;display:flex}.c-audio .c-audio_button:active,.c-audio .c-audio_button[aria-pressed=true]{background:#8292a2;border-color:#3b4252 #bdcbd7 #bdcbd7 #3b4252;box-shadow:inset 1px 1px #526173}.c-audio .c-audio_button:hover{filter:brightness(1.1)}.c-audio :disabled{cursor:default;opacity:.45}.c-audio :focus-visible{outline:2px solid var(--audio-gold);outline-offset:2px}.c-audio_status{margin-top:var(--spacing-8-8);color:#c1c1c9;font-size:var(--text-9-9);letter-spacing:.07em}.c-audio_error{font-size:var(--text-11-11);line-height:var(--leading-1-5)}}