:root {
  color-scheme: dark;
  --bg: oklch(12.5% 0.008 276);
  --top: oklch(15% 0.009 276);
  --panel: oklch(18% 0.011 284);
  --field: oklch(21% 0.012 284);
  --field-hover: oklch(24% 0.014 284);
  --line: oklch(31% 0.016 284);
  --line-strong: oklch(39% 0.018 284);
  --ink: oklch(94% 0.01 284);
  --muted: oklch(74% 0.022 284);
  --accent: oklch(77% 0.12 292);
  --warn: oklch(78% 0.12 82);
  --bad: oklch(72% 0.16 24);
  --ok: oklch(74% 0.11 255);
  --video-bg: #000;
  --r: 8px;
  --r-sm: 6px;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --control-h: 2.5rem;
  --panel-pad: var(--space-md);
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.48; }
a { color: inherit; }
a.link { color: var(--accent); text-underline-offset: 2px; }
a.link:hover { color: color-mix(in oklch, var(--accent), var(--ink) 25%); }
h1, h2, p, dl { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 1.2rem; line-height: 1.2; font-weight: 650; text-wrap: balance; }
h2 { font-size: 1rem; line-height: 1.25; font-weight: 650; text-wrap: balance; }
code { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); padding: .08rem .32rem; color: var(--ink); font-family: var(--mono); font-size: .9em; }
label { display: grid; gap: var(--space-xs); color: var(--muted); }
select, input, textarea, button { font: inherit; }

.wrap { width: min(1120px, calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); background: var(--top); }
.topbar { min-height: 3.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.brand, .nav a { text-decoration: none; }
.brand, .mono, .spec, .meta dd, .tile span { font-family: var(--mono); }
.brand { font-size: .9rem; }
.nav { display: flex; gap: var(--space-md); color: var(--muted); flex-wrap: wrap; }
.nav a:hover { color: var(--ink); }
.brand:focus-visible, .nav a:focus-visible, a.link:focus-visible { border-radius: var(--r-sm); outline: 2px solid color-mix(in oklch, var(--accent), transparent 35%); outline-offset: 3px; }
.main { padding-block: var(--space-lg) var(--space-2xl); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-sm); top: var(--space-sm); z-index: 2; background: var(--accent); color: var(--bg); padding: var(--space-xs) var(--space-sm); border-radius: var(--r-sm); }

.pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.pagehead p, .stack p, .tile span, output { color: var(--muted); overflow-wrap: anywhere; }
.search, .actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.search .field { width: min(22rem, 52vw); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-sm); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21.25rem); gap: var(--space-md); align-items: start; }
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 22.5rem); gap: var(--space-md); align-items: start; }
.panel, .tile { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); }
.panel { min-width: 0; padding: var(--panel-pad); }
.skeleton-screen { display: grid; gap: var(--space-md); }
.skeleton-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--control-h); }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-sm); }
.skeleton-tile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 5.5rem; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.skeleton-copy { display: grid; gap: var(--space-xs); min-width: 0; }
.skel { display: block; border: 1px solid color-mix(in oklch, var(--line), var(--field) 28%); border-radius: var(--r-sm); background: color-mix(in oklch, var(--field), var(--panel) 34%); }
.skel-title { width: min(14rem, 55vw); height: 1.45rem; }
.skel-control { width: 9rem; height: var(--control-h); }
.skel-line { width: 100%; height: .82rem; }
.skel-line.short { width: 68%; }
.skeleton-thumb { width: 100%; aspect-ratio: 16 / 9; background: color-mix(in oklch, var(--video-bg), var(--field) 16%); }
.tile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 5.5rem; padding: var(--space-sm); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.tile:hover { border-color: var(--line-strong); background: color-mix(in oklch, var(--panel), var(--field) 36%); }
.thumb, video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--video-bg); }
.thumb { height: auto; object-fit: cover; pointer-events: none; }
.thumb-empty { display: grid; place-items: center; color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.tilebody { display: grid; gap: var(--space-2xs); min-width: 0; line-height: 1.35; }
.tilebody span { overflow-wrap: anywhere; }
.tilebody strong { color: var(--ink); font-weight: 600; }
.player { display: grid; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: var(--space-xs); }
.player video { border-color: color-mix(in oklch, var(--line), black 8%); }
.player .plyr {
  --plyr-color-main: var(--accent);
  --plyr-video-background: var(--video-bg);
  --plyr-video-control-color: var(--ink);
  --plyr-video-control-color-hover: var(--bg);
  --plyr-video-controls-background: linear-gradient(transparent, rgb(0 0 0 / .78));
  --plyr-control-radius: 6px;
  --plyr-range-fill-background: var(--accent);
  border: 1px solid color-mix(in oklch, var(--line), black 8%);
  border-radius: var(--r-sm);
  overflow: hidden;
  min-width: 0;
}
.player .plyr__controls, .player .plyr__progress__container { min-width: 0; }
.playerbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: 0; }
.stack { display: grid; gap: var(--stack-gap, var(--space-sm)); }
.narrow { max-width: 560px; }
.panel.narrow { margin-inline: auto; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.field { width: 100%; min-height: var(--control-h); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--ink); padding: 0 var(--space-sm); outline: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
input[type="file"].field { padding: 0 var(--space-sm) 0 0; color: var(--muted); }
input[type="file"].field::file-selector-button { min-height: calc(var(--control-h) - 2px); margin: 0 var(--space-sm) 0 0; border: 0; border-right: 1px solid var(--line); border-radius: calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px); background: color-mix(in oklch, var(--panel), var(--field) 42%); color: var(--ink); padding: 0 var(--space-sm); font: inherit; cursor: pointer; transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease); }
input[type="file"].field:hover::file-selector-button { border-color: var(--line-strong); background: var(--field-hover); }
textarea.field { padding-block: var(--space-xs); }
.field::placeholder { color: color-mix(in oklch, var(--muted), var(--ink) 8%); }
.field:focus, .btn:focus-visible, .tile:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in oklch, var(--accent), transparent 40%); outline-offset: 2px; }
.codebox { min-height: 8rem; resize: vertical; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
.btn { min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--ink); padding: 0 var(--space-sm); text-decoration: none; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease); }
.btn:hover { border-color: var(--line-strong); background: var(--field-hover); }
.btn:disabled { cursor: not-allowed; opacity: .62; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--bg); font-weight: 650; }
.btn.primary:hover { border-color: color-mix(in oklch, var(--accent), white 12%); background: color-mix(in oklch, var(--accent), white 12%); color: var(--bg); }
.btn.is-done { border-color: var(--ok); color: var(--ok); }
.btn.primary.is-done { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.notice { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-xs) var(--space-sm); background: color-mix(in oklch, var(--accent), transparent 92%); color: var(--ink); }
.notice[hidden] { display: none; }
.upload-meter { display: grid; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); padding: var(--space-xs) var(--space-sm); }
.meter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 1.25rem; }
#upload-percent { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: color-mix(in oklch, var(--bg), var(--field) 42%); }
progress::-webkit-progress-bar { background: color-mix(in oklch, var(--bg), var(--field) 42%); }
progress::-webkit-progress-value { background: var(--accent); transition: width .18s var(--ease); }
progress::-moz-progress-bar { background: var(--accent); transition: width .18s var(--ease); }
.upload-result { padding-top: var(--space-xs); }
.meta { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); margin: 0; line-height: 1.38; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.account-layout { width: min(680px, 100%); margin-inline: auto; display: grid; gap: var(--space-md); }
.account-panel, .uploads-panel { --panel-pad: var(--space-lg); }
.account-card { --stack-gap: var(--space-md); }
.section-head { display: grid; gap: var(--space-xs); }
.section-head p, .section-head output { min-height: 1.2em; color: var(--muted); }
.section-head output:empty { display: none; }
.account-meta { grid-template-columns: 7.25rem minmax(0, 1fr); gap: var(--space-xs) var(--space-md); }
.key-panel { display: grid; gap: var(--space-sm); padding-block: var(--space-md); border-block: 1px solid var(--line); }
.key-panel label { color: var(--muted); }
.account-actions { padding-top: var(--space-2xs); }
.mini-list { display: grid; gap: var(--space-xs); }
.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--control-h); gap: var(--space-xs); align-items: center; }
.mini-item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-xs); align-items: center; min-height: 4.25rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); padding: var(--space-xs); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.mini-item:hover { border-color: var(--line-strong); background: var(--field-hover); }
.btn-icon { width: 38px; padding: 0; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-icon svg { width: 18px; height: 18px; }
.btn-danger { border-color: color-mix(in oklch, var(--bad), transparent 55%); color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); background: var(--bad); color: var(--bg); }
.mini-row .btn-danger { border-color: transparent; background: transparent; color: var(--muted); }
.mini-row .btn-danger:hover, .mini-row .btn-danger:focus-visible { color: var(--bad); border-color: color-mix(in oklch, var(--bad), transparent 55%); background: color-mix(in oklch, var(--bad), transparent 90%); }
.video-titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); align-items: start; }
.edit-toggle { color: var(--muted); }
.edit-toggle:hover, .edit-toggle:focus-visible, .edit-toggle.is-open { color: var(--ink); }
.edit-toggle.is-open { border-color: color-mix(in oklch, var(--accent), transparent 20%); background: color-mix(in oklch, var(--accent), transparent 88%); }
.btn-icon-mask { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; }
.edit-actions { justify-content: space-between; align-items: center; }
.mini-item > span:not(.mini-thumb) { display: grid; gap: var(--space-2xs); min-width: 0; line-height: 1.35; }
.mini-item strong, .mini-item span { overflow-wrap: anywhere; }
.mini-item span span { color: var(--muted); font-family: var(--mono); }
.mini-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 5px; background: var(--video-bg); color: var(--muted); font-family: var(--mono); font-size: .8rem; object-fit: cover; }
.video-edit { display: grid; gap: var(--space-sm); padding-block: var(--space-md); border-block: 1px solid var(--line); }
.video-edit output:empty { display: none; }
output.is-ok { color: var(--ok); }
output.is-bad { color: var(--bad); }
output.is-ok, output.is-bad { transition: opacity .22s var(--ease); }
output.is-fading { opacity: 0; }
.cfg-block, #video-cfg { display: grid; gap: var(--space-xs); min-width: 0; }
.recipe { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); overflow: hidden; }
.recipe > summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.25rem; padding: var(--space-xs) var(--space-sm); cursor: pointer; list-style: none; user-select: none; color: var(--muted); font-family: var(--mono); font-size: .8rem; transition: color .15s var(--ease), background-color .15s var(--ease); }
.recipe > summary::marker { content: ""; }
.recipe > summary::-webkit-details-marker { display: none; }
.recipe > summary::before { content: ""; flex: none; inline-size: 0; block-size: 0; border-block: .28rem solid transparent; border-left: .36rem solid currentColor; opacity: .78; transform-origin: 42% 50%; transition: transform .18s var(--ease), opacity .15s var(--ease); }
.recipe[open] > summary::before { transform: rotate(90deg); }
.recipe > summary:hover { color: var(--ink); background: var(--field-hover); }
.recipe > summary:hover::before { opacity: 1; }
.recipe > summary:focus-visible { outline: 2px solid color-mix(in oklch, var(--accent), transparent 40%); outline-offset: -2px; border-radius: 4px; }
.recipe pre { margin: 0; padding: var(--space-sm); border-top: 1px solid var(--line); max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: .8rem; line-height: 1.55; }
.recipe .tok-comment { color: var(--muted); font-style: italic; }
.recipe .tok-section { color: var(--accent); }
.recipe .tok-key { color: var(--ink); }
.recipe .tok-punct { color: var(--muted); }
.recipe .tok-str { color: var(--ok); }
.recipe .tok-num, .recipe .tok-bool { color: var(--warn); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.modal { width: min(420px, calc(100% - var(--page-gutter) * 2)); padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px -24px oklch(0% 0 0 / .7); }
.modal:not([open]) { display: none; }
.modal::backdrop { background: oklch(8% 0.01 286 / .62); }
.modal-body { display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.modal-body h2 { font-size: 1.05rem; }
.modal-copy { color: var(--muted); line-height: 1.5; }
.modal-copy strong { color: var(--ink); font-weight: 600; }
.modal-error { color: var(--bad); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-2xs); }
.modal[open] { animation: modal-in .18s cubic-bezier(.2, .8, .2, 1); }
.modal[open]::backdrop { animation: modal-fade .18s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes modal-fade { from { opacity: 0; } }

@media (max-width: 820px) {
  .pagehead, .topbar { align-items: start; }
  .topbar { display: grid; justify-content: stretch; min-height: 0; padding-block: var(--space-sm); gap: var(--space-xs); }
  .pagehead, .split, .viewer, .cols { grid-template-columns: 1fr; display: grid; }
  .split, .viewer { gap: var(--space-sm); }
  .nav { gap: var(--space-sm); }
  .search .field { width: 100%; }
  .grid, .skeleton-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root { --panel-pad: var(--space-sm); }
  .main { padding-block: var(--space-md) var(--space-xl); }
  .pagehead { align-items: stretch; }
  .skeleton-head { align-items: stretch; flex-direction: column; }
  .skel-control { width: min(11rem, 100%); }
  .tile, .skeleton-tile { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .mini-row { grid-template-columns: minmax(0, 1fr); }
  .mini-row .btn-icon { justify-self: end; }
  .player .plyr__time, .player .plyr__tooltip { display: none; }
}

@media (pointer: coarse) {
  .btn, .field { min-height: 44px; }
  input[type="file"].field::file-selector-button { min-height: 42px; }
  .btn-icon { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .recipe > summary, .recipe > summary::before, input[type="file"].field::file-selector-button, output.is-ok, output.is-bad, progress::-webkit-progress-value, progress::-moz-progress-bar { transition: none; }
  .modal[open], .modal[open]::backdrop { animation: none; }
}