:root {
  color-scheme: light;
  --page: #fff;
  --surface: #f6f6f7;
  --raised: #fff;
  --text: rgba(10, 10, 12, 1);
  --muted: rgba(10, 10, 12, .72);
  --quiet: rgba(10, 10, 12, .55);
  --text-4: rgba(10, 10, 12, .4);
  --line: #e7e7e9;
  --dash: rgba(10, 10, 12, .2);
  --accent: var(--text);
  --focus: #516b70;
  --danger: #b42318; --ok: #15803d;
  --mark: color-mix(in srgb, #15803d 22%, transparent);
  --tk-tag: #a0524f; --tk-attr: #8a6a2f; --tk-str: #4c7a5a; --tk-cmd: #3f6f8f; --tk-punct: #8a8a8a;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0a0b; --surface: #131315; --raised: #17171a;
  --text: rgba(255, 255, 255, 1); --muted: rgba(255, 255, 255, .7); --quiet: rgba(255, 255, 255, .5); --text-4: rgba(255, 255, 255, .35);
  --line: #232327; --dash: rgba(255, 255, 255, .22); --focus: #c8cede; --danger: #f43f5e; --ok: #4ade9b;
  --mark: color-mix(in srgb, #4ade9b 26%, transparent);
  --tk-tag: #d49a96; --tk-attr: #cdb27a; --tk-str: #8fb99b; --tk-cmd: #8fb4cf; --tk-punct: #7d7d7d;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--text); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.shell { width: min(100% - 48px, 720px); min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 80px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 650; letter-spacing: -.045em; border-radius: 6px; }
.mark { width: 24px; height: 24px; }
.bands { transform-box: view-box; transform-origin: 13px 8px; transition: transform 460ms cubic-bezier(.34, 1.56, .64, 1); }
.bands path { transform-box: fill-box; transform-origin: left center; animation: band-in 240ms var(--ease) backwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes band-in { from { opacity: 0; transform: scaleX(0); } }
@media (hover: hover) and (pointer: fine) {
  .wordmark:hover .bands { transform: scaleX(.5); transition-duration: 160ms; transition-timing-function: var(--ease); }
}
.wordmark-domain { color: var(--text-4); font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: 4px; margin-right: -10px; }
.nav-link { padding: 10px; color: var(--muted); font-size: 13px; text-decoration: none; border-radius: 6px; transition: color 150ms; }
.nav-link:hover { color: var(--text); }
.icon-btn { border: 0; width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 8px; cursor: pointer; transition: background-color 150ms, color 150ms; }
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.tool { width: 100%; padding-top: 40px; }
h1 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.045em; font-weight: 620; text-wrap: balance; }
.rot { display: inline-block; vertical-align: baseline; clip-path: inset(0); padding-block: .15em; margin-block: -.15em; transition: width 420ms var(--ease); white-space: nowrap; }
.rot-in { display: inline-block; }
.rot-w { display: inline-block; white-space: pre; animation: word-in 480ms var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
.rot-w.out { animation: word-out 200ms ease-in forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(.7em); filter: blur(2px); } }
@keyframes word-out { to { opacity: 0; transform: translateY(-.7em); filter: blur(2px); } }
.intro { margin: 10px 0 36px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.dropzone { height: 200px; border: 1px dashed var(--dash); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; position: relative; cursor: pointer; transition: height 320ms var(--ease), border-color 150ms, background-color 150ms; outline: none; }
.dropzone.is-compact { height: 48px; flex-direction: row; gap: 0; }
.is-compact .drop-tags { display: none; }
.dropzone:hover, .dropzone.is-over { border-color: var(--focus); background: var(--surface); }
.dropzone:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.dropzone.is-over { border-style: solid; }
.drop-copy { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.drop-icon { width: 20px; height: 20px; translate: 0 1px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: scale 200ms var(--ease), stroke 150ms; }
.drop-arrow { animation: arrow-drift 2.4s ease-in-out infinite; }
@keyframes arrow-drift { 50% { transform: translateY(-2px); } }
.is-compact .drop-arrow { animation: none; }
.dropzone:hover .drop-icon, .dropzone.is-over .drop-icon { scale: 1.12; stroke: var(--text); }
.dropzone.is-over .drop-icon path:nth-of-type(1) { fill: var(--text); }
.text-button { border: 0; padding: 4px 0; color: var(--text); text-decoration: underline; text-underline-offset: 3px; background: transparent; cursor: pointer; }
.drop-tags { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.tag { padding: 2px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); color: var(--quiet); font: 12px/1.4 var(--mono); white-space: nowrap; }
.error { margin: 12px 0 0; color: var(--danger); font-size: 13px; }

.job { display: flex; gap: 16px; padding: 36px 0 32px; animation: row-in 320ms var(--ease) backwards; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
.thumb { position: relative; flex: 0 0 112px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--surface); }
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); pointer-events: none; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade 240ms ease backwards; }
@keyframes fade { from { opacity: 0; } }
.thumb-ph { position: absolute; inset: 0; }
.job[data-state="uploading"] .thumb-ph, .job[data-state="queued"] .thumb-ph { background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 6%, transparent) 50%, transparent 70%) 0 0 / 200% 100%; animation: sheen 1.4s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.job-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-content: start; }
.job-head { display: contents; }
.job-head > .name { grid-area: 1 / 1; align-self: baseline; }
.job-head > .state { grid-area: 1 / 2; }
.meta { grid-area: 2 / 1; }
.sizes { grid-area: 3 / 1; }
.bar { grid-area: 4 / 1 / auto / -1; }
.name { margin: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.state { flex: none; display: grid; justify-items: end; align-items: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.state > * { grid-area: 1 / 1; }
.readout { position: relative; display: inline-flex; align-items: baseline; border-radius: 4px; color: var(--text); transition: opacity 200ms ease; }
.pct-sign { margin-left: 1px; }
.left { margin-left: 8px; color: var(--quiet); font-size: 12px; }
.left:empty { display: none; }
.tip { position: absolute; top: calc(100% + 6px); right: 0; padding: 4px 8px; border-radius: 6px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
.readout:hover .tip, .readout:focus-visible .tip { opacity: 1; transition-delay: 120ms; }
.job[data-state="done"] .readout, .job[data-state="failed"] .readout { opacity: 0; pointer-events: none; }
.check { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.check circle { opacity: .35; }
.job[data-state="done"] .check { visibility: visible; }
.job[data-state="done"] .check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 300ms ease-out 120ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.msg { color: var(--danger); font-size: 13px; }
.job:not([data-state="failed"]) .msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meta, .sizes { margin: 0; color: var(--quiet); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.meta:empty { display: none; }
.sizes strong { color: var(--text); font-weight: 550; }
.sizes .arrow { margin: 0 4px; }
.sizes .saved, .sizes .note { margin-left: 8px; }
.sizes .saved { padding: 1px 6px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); font-weight: 550; }
.bar { height: 1px; margin-top: 4px; background: var(--line); overflow: hidden; transition: opacity 300ms ease 200ms; }
.bar i { display: block; height: 100%; background: var(--muted); transform-origin: left; transform: scaleX(0); transition: transform 380ms linear; }
.job[data-state="done"] .bar, .job[data-state="failed"] .bar { opacity: 0; }
.actions { grid-area: 2 / 2 / 4 / 3; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; animation: row-in 280ms var(--ease) backwards; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms, transform 120ms var(--ease); }
.btn:hover { background: var(--surface); border-color: var(--dash); }
.btn:active { transform: scale(.97); }
.btn svg { width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--page); margin-left: 8px; order: 1; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--page)); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: 0 10px; }
.btn.ghost:hover { color: var(--text); background: transparent; }
.btn.icon { width: 32px; min-height: 32px; padding: 0; }
.btn.icon svg { margin: 0; width: 16px; height: 16px; }
.btn.icon:hover { background: var(--surface); }
.btn.host { margin-top: 12px; min-height: 32px; font-size: 12px; }
.btn.host svg { margin: 0 0 0 6px; }
.tip-float { position: fixed; z-index: 10; transform: translate(-50%, -100%) translateY(2px); padding: 4px 8px; border-radius: 6px; background: var(--raised); box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgb(0 0 0 / .1); color: var(--text); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease, transform 120ms var(--ease); }
.tip-float.on { opacity: 1; transform: translate(-50%, -100%); }
.tip-float.instant { transition-duration: 0ms; }

/* dialogs */
.sheet { width: min(100% - 32px, 600px); max-height: min(100% - 48px, 760px); padding: 20px 24px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); color: var(--text); box-shadow: 0 16px 48px rgb(0 0 0 / .16); overflow: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 200ms ease, transform 240ms var(--ease), overlay 240ms allow-discrete, display 240ms allow-discrete; }
.sheet[open] { opacity: 1; transform: none; }
@starting-style { .sheet[open] { opacity: 0; transform: translateY(10px) scale(.98); } }
.sheet::backdrop { background: rgb(0 0 0 / 0); transition: background-color 240ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete; }
.sheet[open]::backdrop { background: rgb(0 0 0 / .35); }
@starting-style { .sheet[open]::backdrop { background: rgb(0 0 0 / 0); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -10px 8px 0; }
.sheet h2 { margin: 0; font-size: 17px; letter-spacing: -.03em; font-weight: 620; }
.prose { font-size: 14px; line-height: 1.65; }
.prose p { margin: 0 0 14px; }
.prose a { color: var(--text); text-underline-offset: 3px; }
code { font: 12.5px/1.6 var(--mono); }
pre { margin: 0 0 14px; padding: 14px 16px; border-radius: 8px; background: var(--surface); overflow-x: auto; }
pre code { white-space: pre; }
mark { padding: 0 .06em; background: linear-gradient(transparent 58%, var(--mark) 58%); color: inherit; }
.tk-tag { color: var(--tk-tag); }
.tk-attr, .tk-flag { color: var(--tk-attr); }
.tk-str { color: var(--tk-str); }
.tk-cmd { color: var(--tk-cmd); }
.tk-punct { color: var(--tk-punct); }
.prose pre { margin-bottom: 0; }
.seg { border-radius: 3px; outline-offset: 1px; transition: background-color 150ms; }
.seg.is-active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.eyebrow { margin: 0; color: var(--quiet); font-size: 11px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
.under-hood { margin: 20px 0 20px 4px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line); }
.under-hood .eyebrow { margin-bottom: 10px; }
.under-hood pre { margin: 0; }
.cmd-tip { height: 1.65em; margin: 10px 0 0 !important; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.links-card { margin: 4px 0 0; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.links-card a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; color: var(--muted); text-decoration: none; transition: background-color 150ms, color 150ms; }
.links-card a + a { border-top: 1px solid var(--line); }
.links-card a:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.links-card .to { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 500; }
.links-card svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease); }
.links-card a:hover svg { transform: translate(1px, -1px); }
.embed-preview { margin-bottom: 12px; padding: 16px; border-radius: 20px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.embed-preview video, .embed-preview img { display: block; max-width: 100%; max-height: 260px; border-radius: 4px; }
.code-wrap { position: relative; }
.code-wrap pre { margin: 0; }
.code-wrap .copy { position: absolute; right: 8px; bottom: 8px; min-height: 28px; min-width: 58px; padding: 0 10px; font-size: 12px; background: var(--surface); }
.code-wrap .copy:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.hint { margin: 10px 0 0; color: var(--quiet); font-size: 12px; white-space: pre-line; }

footer { margin-top: auto; padding: 36px 0 24px; color: var(--quiet); font-size: 12px; }
footer a { color: var(--muted); text-underline-offset: 3px; }
footer a:hover { color: var(--text); }

@media (max-width: 560px) {
  .shell { width: min(100% - 32px, 720px); }
  .topbar { height: 68px; }
  .tool { padding-top: 24px; }
  .dropzone { height: 176px; }
  .job { flex-wrap: wrap; }
  .thumb { flex-basis: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 200px; }
  .job-main { flex-basis: 100%; }
  .btn { min-height: 44px; }
  .btn.icon { width: 44px; }
  .btn.host { min-height: 44px; }
  .actions { grid-area: auto / 1 / auto / -1; margin-top: 4px; }
  .dropzone.is-compact { height: 56px; }
  .sheet { padding: 16px 18px 20px; }
  .cmd-tip { height: 3.3em; white-space: normal; }
}

/* expired job */
.expired { display: grid; justify-items: center; text-align: center; padding: 56px 0 32px; animation: row-in 320ms var(--ease) backwards; }
.expired-icon { width: 28px; height: 28px; margin-bottom: 14px; fill: none; stroke: var(--quiet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.expired h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.03em; font-weight: 620; }
.expired p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.expired .expired-alt { margin-top: 14px; color: var(--quiet); }
.expired a { color: var(--text); text-underline-offset: 3px; }

/* previous jobs */
.history { margin-top: 12px; }
.history a { color: inherit; text-decoration: none; }
.h-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 4px; }
.h-clear { border: 0; padding: 4px 0; background: transparent; color: var(--quiet); font-size: 12px; cursor: pointer; transition: color 150ms; }
.h-clear:hover { color: var(--text); }
.h-thumb { position: relative; flex: none; overflow: hidden; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.h-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-thumb.is-gone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)); }
.h-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-expired { opacity: .5; cursor: default; }
.is-expired .h-name { text-decoration: line-through; text-decoration-color: var(--text-4); }
.history a:focus-visible { border-radius: 6px; }

/* rows */
.h-row { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 8px; margin: 0 -8px; border-radius: 6px; color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; transition: background-color 150ms, color 150ms; }
a.h-row:hover { background: var(--surface); color: var(--muted); }
.h-row .h-thumb { width: 32px; height: 22px; }
.h-row .h-name { flex: 1; color: var(--muted); font-size: 13px; }
.h-saved { min-width: 40px; text-align: right; color: var(--ok); }
.h-when { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .h-sizes { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bands { transition: none; transform: none !important; }
  .drop-arrow { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.h-when[data-tip]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.9'/%3E%3Cpath d='M6 3.4V6l1.7 1.1'/%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 12 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.9'/%3E%3Cpath d='M6 3.4V6l1.7 1.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease-in, transform 160ms ease-in; pointer-events: none; }
.history > * { animation: fade 220ms var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) { .is-leaving, .history > * { transition: none; animation: none; } }
.thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms var(--ease); }
.thumb.is-playing video { opacity: 1; }