.ob{display:flex;flex-direction:column;gap:20px}.ob__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}.ob__inputs{gap:22px;padding:24px}.ob__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.ob__upload{gap:10px;align-items:stretch}.ob__result,.ob__upload{display:flex;flex-direction:column}.ob__result{gap:16px;min-width:0;position:sticky;top:80px}.ob__hotkey{font-size:11px;color:var(--fg-faint);text-align:end}.ob__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ob__empty{padding:28px 8px;text-align:center;color:var(--fg-muted)}@media (max-width:960px){.ob__grid{grid-template-columns:minmax(0,1fr)}.ob__result{position:static}}@media (max-width:520px){.ob__fields,.ob__stats{grid-template-columns:minmax(0,1fr)}}.obf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:18px;align-items:start}.obf__cell{display:flex;flex-direction:column;gap:8px;margin:0;padding:10px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);min-width:0;transition:border-color var(--dur-2),background var(--dur-2)}.obf__cell.is-on{border-color:var(--accent-fg);background:var(--accent-soft)}.obf__frame{position:relative;width:min(100%,calc(200px * var(--ratio)));aspect-ratio:var(--ratio);margin-inline:auto;overflow:hidden;border-radius:8px;outline:1px dashed var(--line-strong);outline-offset:-1px;background-color:var(--surface-3);background-image:conic-gradient(rgba(128,128,128,.22) 25%,transparent 0 50%,rgba(128,128,128,.22) 0 75%,transparent 0);background-size:14px 14px;cursor:pointer}.obf__cell.is-on .obf__frame{cursor:crosshair;touch-action:none;user-select:none}.obf__frame:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}.obf__frame img{display:block;width:100%;height:100%;pointer-events:none}.obf__focal{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #fff;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);pointer-events:none}.obf figcaption{display:flex;flex-direction:column;gap:3px;font-size:var(--text-xs);color:var(--fg-muted);line-height:1.45}.obf figcaption code{align-self:flex-start;padding:.1em .5em;border-radius:6px;background:var(--surface-2);color:var(--fg);font-family:var(--font-mono);font-weight:600}@media (max-width:960px){.ob__result{display:contents}.ob__preview{order:-1}}