: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:16px}
.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:10px 6px}
.voice h2 {font-size:32px;letter-spacing:-.025em;font-weight:550;margin-top:10px}
.voice-heading {position:relative;display:flex;align-items:center;gap:7px;min-width:0}
.voice-heading h2 {margin-right:0}
.voice-info {width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;padding:4px!important}
.voice-info svg {width:16px!important;height:16px!important}
.voice-info-popover {position:absolute;z-index:5;width:max-content;max-width:min(320px,calc(100vw - 24px));padding:10px 12px;border:1px solid var(--cf-ui-border);border-radius:8px;background:var(--cf-ui-bg-dense);color:var(--cf-ui-text);box-shadow:0 8px 24px rgb(0 0 0 / .28);font-size:13px;line-height:1.4}
.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:14px}
#tuning-access {font-size:12px;color:var(--cf-ui-text);margin:12px 0 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}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input[type=range] {width:100%;margin:8px 0;accent-color:var(--cf-ui-accent);cursor:pointer}
input[type=range]:disabled {cursor:not-allowed;filter:grayscale(1);opacity:.42}
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)}
#advanced,#connect {border-top:1px solid var(--cf-ui-border);border-bottom:0;padding-block:12px 0}
#instruction-preview {border:0;padding:0}
summary {cursor:pointer;color:var(--cf-ui-text);font-size:13px}
#advanced-controls {padding-bottom:2px}
#advanced-controls.is-locked .dial {filter:grayscale(1);opacity:.58}
#voices .cf-toggle-button.is-locked {color:var(--cf-ui-text);border-color:var(--cf-ui-border);filter:grayscale(1);opacity:.48}
#voices .cf-toggle-button.is-locked:hover,#voices .cf-toggle-button.is-locked:focus-visible {opacity:.72}
#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}
#status:empty {display:none}
#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}}