.cc{--cc-mat:#d8d4cc;position:relative;overflow:hidden;background:var(--cc-mat)}
.cc canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s linear}
.cc.ready canvas{opacity:1}
.cc-ui{--ink:#000;--paper:#fff;display:flex;align-items:stretch;flex-wrap:wrap;background:var(--paper);color:var(--ink);
  font:400 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.01em;opacity:0}
.cc-ui.ready{opacity:1}
.cc-ui:not(.cc-ui--below){position:absolute;left:0;top:0;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}
.cc-btn{all:unset;box-sizing:border-box;width:24px;height:24px;display:grid;place-items:center;cursor:pointer}
.cc-btn svg{width:12px;height:12px}
.cc-btn:hover{background:rgba(0,0,0,.08)}
.cc-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cc-btn[aria-busy="true"]{opacity:.4}
.cc-btn:focus-visible,.cc-dial input:focus-visible{outline:1px solid var(--ink);outline-offset:-3px}
.cc-sep{width:1px;background:var(--ink);opacity:.2;margin:0 8px}
.cc-dial{display:flex;align-items:center;gap:5px;margin-right:10px}
.cc-dial svg{width:11px;height:11px}
.cc-dial input{-webkit-appearance:none;appearance:none;width:52px;height:24px;background:transparent;margin:0;cursor:pointer}
.cc-dial input::-webkit-slider-runnable-track{height:1px;background:var(--ink)}
.cc-dial input::-moz-range-track{height:1px;background:var(--ink)}
.cc-dial input::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:11px;background:var(--ink);margin-top:-5px;border:0;border-radius:0}
.cc-dial input::-moz-range-thumb{width:5px;height:11px;background:var(--ink);border:0;border-radius:0}
.cc-cap{margin-left:auto;align-self:center;padding:0 2px 0 10px;opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}