:root { color-scheme: dark; }
* {box-sizing:border-box}
body {margin:0;background:var(--color-background-primary,var(--cf-ui-bg-dense));color:var(--color-text-primary,var(--cf-ui-text-strong));font-family:var(--font-app);font-size:14px;line-height:1.5}
a {color:inherit;text-underline-offset:3px}
a:focus-visible {outline:2px solid var(--cf-ui-accent);outline-offset:4px}
#connect p {font-size:12px;color:var(--cf-ui-text)}
#connection-address {display:block;width:100%;margin-block:10px}
main {max-width:560px;margin:0 auto;padding:28px;display:grid;gap:22px}
.skip-link {position:absolute;left:-10000px;top:8px;background:var(--cf-ui-bg);color:var(--cf-ui-text-strong);padding:8px 12px;z-index:2}
.skip-link:focus {left:8px}
#standalone-nav {max-width:560px;margin:0 auto;padding:18px 28px 0;display:flex;gap:18px;font-size:12px}
#standalone-nav a:first-child {font-weight:700;margin-right:auto;text-decoration:none}
.embedded .standalone-only {display:none!important}
header p,header h1,.voice p,.voice h2 {margin:0}
.eyebrow {color:var(--cf-ui-accent);font-size:10px;letter-spacing:.18em;font-weight:750}
h1 {font-size:25px;font-weight:600;letter-spacing:-.025em;padding-top:6px}
.intro {color:var(--cf-ui-text);padding-top:4px}
.voice {padding-block:14px 20px;border-bottom:1px solid var(--cf-ui-border)}
.voice h2 {font-size:32px;letter-spacing:-.025em;font-weight:550;margin-top:10px}
.voice p {font-size:15px;color:var(--cf-ui-text);margin-top:4px}
small {display:block;font-size:11px;color:var(--cf-ui-text);margin-top:8px;opacity:.8}
.dial {margin-top:20px}
#primary .dial {margin-top:0}
.dial-heading {display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dial label {font-size:13px;font-weight:600}
.dial output {color:var(--cf-ui-accent);font-size:12px;font-variant-numeric:tabular-nums}
.dial p {font-size:12px;color:var(--cf-ui-text);margin:3px 0 10px}
input[type=range] {width:100%;margin:8px 0;accent-color:var(--cf-ui-accent);cursor:pointer}
input[type=range]:focus-visible,summary:focus-visible {outline:2px solid var(--cf-ui-accent);outline-offset:5px}
.endpoints {display:flex;justify-content:space-between;font-size:11px;color:var(--cf-ui-text)}
details {border-block:1px solid var(--cf-ui-border);padding-block:15px}
summary {cursor:pointer;color:var(--cf-ui-text);font-size:13px}
#advanced-hint {font-size:11px;color:var(--cf-ui-accent);margin-left:14px}
.locked-voices {margin-top:24px;padding-top:16px;border-top:1px solid var(--cf-ui-border)}
.locked-voices h3 {margin:0 0 10px;font-size:13px;font-weight:600}
#status {font-size:12px;color:var(--cf-ui-text);margin:0;min-height:18px}
#packet {border-top:1px solid var(--cf-ui-border);padding-top:18px}
#packet p {font-size:12px;color:var(--cf-ui-text)}
textarea {width:100%;margin-bottom:10px;font:12px/1.5 var(--font-code);background:var(--cf-ui-bg);color:var(--cf-ui-text);border:1px solid var(--cf-ui-border);padding:12px;resize:vertical}
footer {font-size:10px;color:var(--cf-ui-text);opacity:.75}
[hidden] {display:none!important}
@media(max-width:400px){main{padding:20px;gap:18px}#standalone-nav{padding-inline:20px;gap:10px;font-size:11px}.voice h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}