:root{
  /* the Web-CLI family palette (see ffmpeg-webCLI) */
  color-scheme:dark;
  --bg:#0d0f1a;--panel:#151827;--surface2:#1e2236;--surface3:#252a42;
  --accent:#3665b6;--accent-h:#81e2f8;--ok:#70db97;--warn:#ef4444;--amber:#f59e0b;
  --fg:#e2e8f0;--muted:#94a3b8;--rule:#5b515f;--link:#81e2f8;--code:#080a10;--r:10px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
a{color:var(--link)}
.muted{color:var(--muted)}
h1{font-size:1.6rem;letter-spacing:-.02em}

/* header */
#top{display:flex;gap:.6rem 1rem;align-items:center;flex-wrap:wrap;background:var(--panel);border-bottom:1px solid var(--rule);padding:.85rem 1.5rem}
#top .brand{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--fg)}
#top .brand::before{content:"";width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.pill{font-size:.7rem;padding:2px 9px;border-radius:20px;background:rgba(99,102,241,.18);color:#818cf8;font-weight:600;white-space:nowrap}
.badge-local{font-size:.7rem;padding:2px 9px;border-radius:20px;background:rgba(34,197,94,.15);color:var(--ok);font-weight:600;white-space:nowrap}
#top form{display:flex;gap:.4rem;flex:1 1 14rem;min-width:12rem;max-width:26rem}
#top input{flex:1}
.signed{font-size:.8rem;color:var(--muted);white-space:nowrap}
.gh-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none;padding:5px 12px;border-radius:7px;border:1px solid var(--rule);background:var(--surface2);transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.gh-link::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.337-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.337-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E") center/contain no-repeat}
.gh-link:hover{color:var(--fg);border-color:var(--accent);background:var(--surface3)}
@media (max-width:1100px){.badge-local{display:none}}
@media (max-width:700px){.gh-link span{display:none}.gh-link{padding:5px 9px}#top form{max-width:none}}
#view{max-width:64rem;margin:0 auto;padding:1.25rem 1.5rem 3rem}

/* controls */
input,select,textarea{font:inherit;font-size:.9rem;color:var(--fg);background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:7px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
select:disabled,input:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background:var(--surface2)}
button,a.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.85rem;font-weight:600;color:var(--fg);background:var(--surface2);border:1px solid var(--rule);border-radius:7px;padding:8px 16px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s}
button:hover:not(:disabled),a.btn:hover{background:var(--surface3)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover:not(:disabled){background:var(--accent-h);border-color:var(--accent-h);color:#0d0f1a}
button:disabled{opacity:.35;cursor:not-allowed}
label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px}
[hidden]{display:none!important}
.row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
.row>div{flex:1;min-width:10rem}
.row input,.row select{width:100%}
.err,.ok{border-radius:7px;padding:10px 14px;margin:.75rem 0;white-space:pre-wrap;font-size:.85rem}
.err{color:var(--warn);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}
.err b{display:block}
.ok{color:var(--accent-h);background:rgba(54,101,182,.12);border:1px solid rgba(54,101,182,.35)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
ul.posts{list-style:none;padding:0;display:grid;gap:.6rem}
ul.posts li{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:.8rem 1rem;overflow:hidden}
ul.posts li:hover{border-color:var(--accent)}
ul.posts h3{margin:0;font-size:1rem}
ul.posts p{margin:.2rem 0 0}
.tag{font-size:.8rem;color:var(--muted);margin-left:.4rem}
article.post{font:18px/1.7 Georgia,serif}
article.post img{max-width:100%;height:auto}
article.post pre{background:var(--code);padding:1rem;overflow:auto;border-radius:6px}
article.post code{background:var(--code);padding:.1em .3em;border-radius:3px}
article.post pre code{background:none;padding:0}
article.post blockquote{margin:1em 0;padding:.1em 1em;border-left:3px solid var(--rule);color:var(--muted)}
.unresolved{color:var(--muted);font-style:italic}
#ledger{max-width:64rem;margin:0 auto;padding:.75rem 1.5rem 2rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--muted)}
#ledger summary{cursor:pointer}
#ledger .up-zero{color:var(--ok)}
#ledger .up-some{color:var(--amber);font-weight:600}
#ledger ol{max-height:12rem;overflow:auto;font:.75rem/1.4 ui-monospace,monospace;padding-left:1.4rem}
dialog{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);color:var(--fg);max-width:36rem;width:calc(100% - 2rem);padding:1.25rem}
dialog::backdrop{background:rgba(5,6,10,.7)}
dialog h2{margin-top:0;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.preflight{font-weight:600;background:var(--surface2);padding:.6rem .8rem;border-radius:8px;margin:.5rem 0}
.files{font:.73rem/1.55 'SF Mono','Fira Code','Courier New',monospace;background:var(--code);color:#7dd3fc;padding:10px 12px;border-radius:6px;max-height:10rem;overflow:auto}
#editor{height:24rem;font:17px/1.6 Georgia,serif}
.ql-toolbar{border-radius:6px 6px 0 0;background:var(--surface2)}
.ql-container{border-radius:0 0 6px 6px;background:var(--panel)}
.ql-snow .ql-editor img{max-width:100%}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Subheading'}
.ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before{content:'Paragraph'}
.hint{font-size:.78rem;color:var(--muted);margin:.4rem 0}
.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background:var(--code);color:var(--fg)}
.ql-snow .ql-stroke{stroke:var(--fg)}
.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:var(--fg)}
.ql-snow .ql-picker,.ql-snow .ql-picker-options{color:var(--fg);background:var(--bg)}
.ql-snow .ql-editor.ql-blank::before{color:var(--muted)}
.ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--rule)}
figure.video{margin:1.2em 0}
figure.video iframe,.ql-snow .ql-editor iframe.ql-video{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:6px;background:var(--code)}
figure.video figcaption{font-size:.85rem;color:var(--muted)}
fieldset{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);margin:1rem 0;padding:.4rem 1rem 1rem;min-width:0}
fieldset legend{float:left;width:calc(100% + 2rem);margin:-.4rem -1rem .8rem;padding:11px 16px;border-bottom:1px solid var(--rule);font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
fieldset legend+*{clear:both}
#preview{display:block;background:var(--bg);border:1px solid var(--rule);border-radius:8px;max-height:26rem;overflow:auto;margin:.4rem 0}
.hint.bad{color:var(--warn)}
.colors{display:grid;grid-template-columns:6rem 1fr 1fr;gap:.4rem .8rem;align-items:center}
.colors .cc{display:flex;gap:.4rem}
.colors .cc input[type=text],.colors .cc input:not([type]){flex:1;min-width:0}
.colors input[type=color]{padding:0;width:2.2rem;height:2.2rem;flex:none;cursor:pointer}
label.check{display:block;font-size:.95rem;color:var(--fg);margin:.2rem 0}
textarea{width:100%}
textarea.mono{font:.85rem/1.5 ui-monospace,monospace}
details summary{cursor:pointer;margin:.5rem 0}

/* "Embed a video": a searchable dropdown with the Embed button beside it */
dialog:has(.video-combo){max-width:40rem}
.combo-row{display:flex;gap:.5rem;align-items:stretch;margin:.25rem 0 .5rem}
.combo{position:relative;flex:1;min-width:0}
.combo-input{width:100%;padding-right:2.2rem}
.combo-toggle{position:absolute;right:.2rem;top:50%;transform:translateY(-50%);border:0;background:none;padding:.2rem .45rem;color:var(--muted);line-height:1}
.combo-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + .25rem);margin:0;padding:.25rem;list-style:none;max-height:16rem;overflow:auto;background:var(--bg);border:1px solid var(--rule);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.combo-list[hidden]{display:none}
.combo-list li{display:flex;align-items:center;gap:.6rem;padding:.35rem .45rem;border-radius:6px;cursor:pointer}
.combo-list li.active,.combo-list li:hover{background:var(--panel)}
.combo-list li[aria-selected=true] .opt-name{color:var(--link)}
.combo-list li.empty{cursor:default;color:var(--muted)}
.opt-text{flex:1;min-width:0}
.opt-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-repo{font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--code);flex:none}
.thumb.small{width:4.2rem}
.thumb.large{width:11rem}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.thumb.no-poster img{display:none}
.thumb.no-poster::before{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:1.1rem}
.combo-preview{display:flex;gap:.9rem;align-items:center;min-height:2rem;margin:.25rem 0 .5rem}
.combo-preview .meta{min-width:0;overflow-wrap:anywhere}
.chip{font:inherit;font-size:.75rem;line-height:1;padding:.2rem .45rem;border:1px solid var(--rule);border-radius:999px;color:var(--muted);background:var(--bg)}
.badge{font-size:.7rem;line-height:1;padding:.2rem .45rem;border-radius:999px;background:var(--panel);border:1px dashed var(--rule);color:var(--muted);white-space:nowrap}
input[readonly]{background:var(--panel);color:var(--muted);cursor:default}
input[readonly]:focus{outline:1px dashed var(--rule)}

/* activity and toasts */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toast-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.15em}
button.busy{pointer-events:none;opacity:.85}
button.busy::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.1em}
.hint.progress{display:flex;align-items:center;gap:.4rem}
.notices{position:fixed;inset:auto 1rem 1rem auto;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:min(26rem,calc(100vw - 2rem));pointer-events:none}
.notices>*{pointer-events:auto}
.notices .toasts{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;width:100%}
.activity{display:flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:var(--surface2);color:var(--accent-h);color:var(--fg);border:1px solid var(--rule);border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:.9rem;pointer-events:none}
.activity[hidden]{display:none}
.toast{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;background:var(--surface2);color:var(--fg);border:1px solid var(--rule);border-left-width:4px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:toast-in .18s ease-out}
.toast.leaving{opacity:0;transform:translateY(.4rem);transition:opacity .15s,transform .15s}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--accent-h)}
.toast-icon{flex:none;display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;font-size:.85rem;font-weight:700;color:#0d0f1a}
.toast.success .toast-icon{background:var(--ok)}
.toast.error .toast-icon{background:var(--warn)}
.toast.info .toast-icon{background:var(--accent-h)}
.toast-body{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-title{font-weight:600}
.toast-message{white-space:pre-line;font-size:.9rem;color:var(--muted);margin-top:.15rem;max-height:14rem;overflow:auto}
.toast-links{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem;margin-top:.3rem}
.toast-actions{margin-top:.5rem}
.toast-close{flex:none;border:0;background:none;color:var(--muted);font-size:1.2rem;line-height:1;padding:0 .25rem}
.toast-close:hover{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.spinner,button.busy::before{animation-duration:2s}}

/* progress, as in the other Web-CLIs */
progress{appearance:none;-webkit-appearance:none;height:5px;border:0;border-radius:3px;background:var(--surface3);overflow:hidden}
progress::-webkit-progress-bar{background:var(--surface3);border-radius:3px}
progress::-webkit-progress-value{background:var(--accent);border-radius:3px;transition:width .2s ease}
progress::-moz-progress-bar{background:var(--accent);border-radius:3px}
.statusbar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:11px 16px;margin-bottom:1rem;font-size:.82rem;color:var(--muted)}
.statusbar .dot{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none}
.statusbar .dot.on{background:var(--ok)}
.statusbar .grow{flex:1;min-width:0}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin:1rem 0}
.card-header{padding:11px 16px;border-bottom:1px solid var(--rule);font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-body{padding:16px}